<template>
    <div class="app-container" id="agreement">
     
            <el-row style="width: 100%;">
                <el-col :span="18">
                    <el-button type="primary" size="mini" >租赁明细导出</el-button>
                    <el-button type="primary" size="mini" >丢失明细导出</el-button>
                    <el-button type="primary" size="mini" >维修明细导出</el-button>
                    <el-button type="primary" size="mini" >报废明细导出</el-button>
                    <el-button type="warning" size="mini" >全部明细导出</el-button>
                    <el-button type="success" size="mini" >提交</el-button>
                </el-col>
                <el-col :span="4">
                    <el-button type="danger" size="mini" style="float: right;" @click="handleBack">返回</el-button>
                </el-col>
            </el-row>
      <div style="color: rgb(217, 0, 27);font-weight: 700;padding: 20px 0;">
        结算费用合计：¥230020，租赁费用¥123456，维修费用¥1234，报废费用¥123，丢失费用0
      </div>


      <div>
        <el-table v-loading="loading" :data="agreementList" @selection-change="handleSelectionChange">
            <!-- <el-table-column type="selection" width="55" align="center" /> -->
            <el-table-column label="租赁费用明细" align="center">
                <el-table-column label="序号" align="center" type="index"  width="60"/>
                <el-table-column label="结算单位名称" align="center" prop="agreementCode" :show-overflow-tooltip="true" />
                <el-table-column label="结算工程名称" align="center" prop="contractCode" :show-overflow-tooltip="true" />
                <el-table-column label="设备名称" align="center" prop="fileName" :show-overflow-tooltip="true" />
                <el-table-column label="规格型号" align="center" prop="signTime" :show-overflow-tooltip="true" />
                <el-table-column label="计量单位" align="center" prop="unitName" :show-overflow-tooltip="true" />
                <el-table-column label="租赁单价" align="center" prop="projectName" :show-overflow-tooltip="true" />
                <el-table-column label="租赁数量" align="center" prop="planStartTime" :show-overflow-tooltip="true" />
                <el-table-column label="租赁日期" align="center" prop="leaseDay" :show-overflow-tooltip="true" />
                <el-table-column label="归还数量" align="center" prop="authPerson" :show-overflow-tooltip="true" />
                <el-table-column label="归还日期 " align="center" prop="phone" :show-overflow-tooltip="true" />
                <el-table-column label="租赁天数" align="center" prop="remark" :show-overflow-tooltip="true" />
                <el-table-column label="外部租赁费用" align="center" prop="remark" :show-overflow-tooltip="true" />
            </el-table-column>
        </el-table>
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />        
        <div style="width: 100%;text-align: right;padding: 20px 20px;">租赁费用小计：97010.08</div>
      </div>

      <div>
        <el-table v-loading="loading" :data="agreementList" @selection-change="handleSelectionChange">
            <!-- <el-table-column type="selection" width="55" align="center" /> -->
            <el-table-column label="维修费用明细" align="center">
                <el-table-column label="序号" align="center" type="index"  width="60"/>
                <el-table-column label="结算单位名称" align="center" prop="agreementCode" :show-overflow-tooltip="true" />
                <el-table-column label="结算工程名称" align="center" prop="contractCode" :show-overflow-tooltip="true" />
                <el-table-column label="设备名称" align="center" prop="fileName" :show-overflow-tooltip="true" />
                <el-table-column label="规格型号" align="center" prop="signTime" :show-overflow-tooltip="true" />
                <el-table-column label="计量单位" align="center" prop="unitName" :show-overflow-tooltip="true" />
                <el-table-column label="维修数量" align="center" prop="projectName" :show-overflow-tooltip="true" />
                <el-table-column label="维修费用" align="center" prop="planStartTime" :show-overflow-tooltip="true" />
                 
            </el-table-column>
        </el-table>
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />        
        <div style="width: 100%;text-align: right;padding: 20px 20px;">维修费用小计：230</div>
      </div>

      <div>
        <el-table v-loading="loading" :data="agreementList" @selection-change="handleSelectionChange">
            <!-- <el-table-column type="selection" width="55" align="center" /> -->
            <el-table-column label="报废费用明细" align="center">
                <el-table-column label="序号" align="center" type="index"  width="60"/>
                <el-table-column label="结算单位名称" align="center" prop="agreementCode" :show-overflow-tooltip="true" />
                <el-table-column label="结算工程名称" align="center" prop="contractCode" :show-overflow-tooltip="true" />
                <el-table-column label="设备名称" align="center" prop="fileName" :show-overflow-tooltip="true" />
                <el-table-column label="规格型号" align="center" prop="signTime" :show-overflow-tooltip="true" />
                <el-table-column label="计量单位" align="center" prop="unitName" :show-overflow-tooltip="true" />
                <el-table-column label="报废数量" align="center" prop="projectName" :show-overflow-tooltip="true" />
                <el-table-column label="报废原因" align="center" prop="planStartTime" :show-overflow-tooltip="true" />
                <el-table-column label="维修费用" align="center" prop="planStartTime" :show-overflow-tooltip="true" />
            </el-table-column>
        </el-table>
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />        
        <div style="width: 100%;text-align: right;padding: 20px 20px;">报废费用小计：230</div>
      </div>

      <div>
        <el-table v-loading="loading" :data="agreementList" @selection-change="handleSelectionChange">
            <!-- <el-table-column type="selection" width="55" align="center" /> -->
            <el-table-column label="丢失费用明细" align="center">
                <el-table-column label="序号" align="center" type="index"  width="60"/>
                <el-table-column label="结算单位名称" align="center" prop="agreementCode" :show-overflow-tooltip="true" />
                <el-table-column label="结算工程名称" align="center" prop="contractCode" :show-overflow-tooltip="true" />
                <el-table-column label="设备名称" align="center" prop="fileName" :show-overflow-tooltip="true" />
                <el-table-column label="规格型号" align="center" prop="signTime" :show-overflow-tooltip="true" />
                <el-table-column label="计量单位" align="center" prop="unitName" :show-overflow-tooltip="true" />
                <el-table-column label="丢失数量" align="center" prop="projectName" :show-overflow-tooltip="true" />
                <el-table-column label="丢失费用" align="center" prop="planStartTime" :show-overflow-tooltip="true" />
            </el-table-column>
        </el-table>
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />        
        <div style="width: 100%;text-align: right;padding: 20px 20px;">丢失费用小计：230</div>
      </div>
  
    </div>
  </template>
  
  <script>
  import { getAgreementList,getUnitList, getProjectList } from "@/api/claimAndRefund/receive";
  export default {
    name: "Agreement",
    dicts: ['sys_normal_disable'],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 往来单位数据
        unitList: [],
        // 工程数据
         projectList: [],
         statusList:[{id:'0',name:'请选择'},{id:'1',name:'已结算'},{id:'2',name:'未结算'},{id:'3',name:'待审核'}], //集合
        // 表格数据
        agreementList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 日期范围
        dateRange: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          keyWord: undefined,
         
        },
        // 表单参数
        form: {},
        //图片上传
        uploadHeader: process.env.VUE_APP_BASE_API,
        imageUrl:'',
        imageName:'',
        fileList:[],
        field101fileList:[],
        dialogImageUrl: '',
        dialogVisible: false,
        //上传地址
        // uploadUrl:'http://192.168.0.14:21624/system',//线上服务器地址+system
        // uploadUrl:'http://112.29.103.165:21626/system',//线上服务器地址+system
        uploadUrl: process.env.VUE_APP_BASE_API + "/system", // 上传的图片服务器地址
        // 表单校验
        rules: {
          contractCode: [
            { required: true, message: "合同编号不能为空", trigger: "blur" }
          ],
          signTime: [
            { required: true, message: "签订日期不能为空", trigger: "blur" }
          ],
          unitName: [
            { required: true, message: "往来单位不能为空", trigger: "blur" }
          ],
          projectName: [
            { required: true, message: "工程名称不能为空", trigger: "blur" }
          ]
        },
        peopleOpen:false,
        noticeOpen:false,
        nform:{
          notice:''
        },
        nrules: {
          notice: [
            { required: true, message: "通知内容不能为空", trigger: "blur" }
          ]
        },
        deptName: undefined,
      };
    },
    created() {
      this.getList();
    //   this.getUnitList();
    //   this.getProjectList();
  
    },
    methods: {
      //获取单位类型 ,getUnitList, getProjectList
      getUnitList(){
        getUnitList().then(response => {
          this.unitList =  response.data;
          })
      },
      getProjectList(){
        getProjectList().then(response => {
          this.projectList =  response.data;
          })
      },
      
      /** 查询字典类型列表 */
      getList() {
        this.loading = true;
        getAgreementList(this.queryParams).then(response => {
            this.agreementList = response.rows;
            this.total = response.total;
            this.loading = false;
          }
        );
      },
      handleBack(){
        this.$tab.closeOpenPage({
            path:'/cost/cost/costApplyList',
            query:{
                isEdit:true
            }
        }) 
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.agreementId)
        this.single = selection.length!=1
        this.multiple = !selection.length
      },
 
      /** 删除按钮操作 */
      handleDelete(row) {
        // const agreementId = row.agreementId;
        // let param = {
        //   agreementId:row.agreementId+''
        // }
        // this.$modal.confirm('是否确认删除该数据项？').then(function() {
        //   return removeAgreement(param);
        // }).then(() => {
        //   this.getList();
        //   this.$modal.msgSuccess("删除成功");
        // }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        // this.download('material/agreementInfo/export', {
        //   ...this.queryParams
        // }, `协议_${new Date().getTime()}.xlsx`)
      },
    }
  };
  </script>
  <style lang="scss" scoped>
  ::v-deep.el-table .fixed-width .el-button--mini {
    width: 80px !important;
    margin-bottom: 10px;
  }
  </style>