<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" v-show="showSearch" :inline="true" label-width="80px">
            <el-form-item label="选择单位" prop="unitId">
                <treeselect
                    v-model="queryParams.unitId"
                    :options="unitList" :normalizer="normalizer"
                    :show-count="true" style="width: 215px" :disable-branch-nodes="true"
                    noChildrenText="没有数据了" noOptionsText="没有数据" noResultsText="没有搜索结果"
                    placeholder="请选择单位" @select="unitChange"
                /> 
            </el-form-item>

            <el-form-item label="选择工程" prop="projectId">
                <treeselect
                    v-model="queryParams.projectId"
                    :options="proList" :normalizer="normalizer"
                    :show-count="true" style="width: 215px" :disable-branch-nodes="true"
                    noChildrenText="没有数据了" noOptionsText="没有数据" noResultsText="没有搜索结果"
                    placeholder="请选择工程" @select="proChange"
                />
            </el-form-item>

            <el-form-item label="协议号" prop="agreementCode">
                <el-input v-model="queryParams.agreementCode" placeholder="协议号" clearable disabled/>
            </el-form-item>

            <el-form-item label="推送月份" prop="month">
                <el-date-picker
                  v-model="queryParams.month"
                  type="month"
                  placeholder="请选择月份"
                  value-format="yyyy-MM">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="是否推送" prop="isSend">
                <el-select v-model="queryParams.isSend" placeholder="请选择" clearable>
                    <el-option label="已推送" value="1"></el-option>
                    <el-option label="退回" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="导出年份" prop="year">
              <el-date-picker
                  v-model="queryParams.year"
                  type="year"
                  placeholder="请选择年份"
                  value-format="yyyy">
                </el-date-picker>
            </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
        <el-button
                type="warning"
                plain
                icon="el-icon-download"
                size="mini"
                @click="handleExport"
                >导出</el-button
        >
        <el-button
                type="warning"
                plain
                icon="el-icon-download"
                size="mini"
                @click="handleExportYear"
                >导出年度费用</el-button
        >
        <el-button
                type="warning"
                plain
                icon="el-icon-download"
                size="mini"
                @click="handleExportStart"
                >导出开工年度费用</el-button
        >
        <el-button
                type="danger"
                plain
                size="mini"
                @click="handleSubmit"
                >批量退回</el-button
        >
      </el-form-item>
    </el-form>
    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>

    <el-table
      v-loading="loading"
      :data="pushReviewList"
      ref="multipleTable"
      row-key="id"
      @selection-change="handleSelectionChange"
      border
      :max-height="650"
    >
    <el-table-column type="selection" width="55" align="center"  :selectable="selectable"/>
      <el-table-column label="序号" align="center" width="80" type="index"/>
      <el-table-column label="协议号" align="center" prop="agreementCode"  show-overflow-tooltip />
      <el-table-column label="单位名称" align="center" prop="unitName"  show-overflow-tooltip />
      <el-table-column label="工程名称" align="center" prop="projectName"  show-overflow-tooltip />
      <el-table-column label="推送月份" align="center" prop="month"  show-overflow-tooltip />
      <el-table-column label="租赁费用" align="center" prop="leaseMoney"  show-overflow-tooltip >
        <template slot-scope="scope" >
          <span class="clickText" v-if="scope.row.leaseMoney!=null"  @click="openLease(scope.row)">
            {{scope.row.leaseMoney.toFixed(2)}}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="维修费用" align="center" prop="repairMoney"  show-overflow-tooltip >
        <template slot-scope="scope" >
          <span class="clickText" v-if="scope.row.repairMoney!=null"  @click="openRepair(scope.row)">
            {{scope.row.repairMoney.toFixed(2)}}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="报废费用" align="center" prop="scrapMoney"  show-overflow-tooltip >
        <template slot-scope="scope" >
          <span class="clickText" v-if="scope.row.scrapMoney!=null"  @click="openScrap(scope.row)">
            {{scope.row.scrapMoney.toFixed(2)}}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="丢失费用" align="center" prop="loseMoney"  show-overflow-tooltip >
        <template slot-scope="scope" >
          <span class="clickText" v-if="scope.row.loseMoney!=null"  @click="openLose(scope.row)">
            {{scope.row.loseMoney.toFixed(2)}}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="合计费用" align="center" prop="money"  show-overflow-tooltip >
        <template slot-scope="scope" >
          <span  v-if="scope.row.money!=null"  >
            {{scope.row.money.toFixed(2)}}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="推送月份" align="center" prop="month"  show-overflow-tooltip />
      <el-table-column label="推送状态" align="center" prop="status"  show-overflow-tooltip >
        <template slot-scope="scope" >
          <span v-if="scope.row.status==1" style="color: #67c23a">已推送</span>
          <span v-if="scope.row.status==0" style="color: #f56c6c">退回</span>
        </template>
      </el-table-column>      
      <el-table-column label="推送备注" align="center" prop="remark"  show-overflow-tooltip >
        <template slot-scope="scope" >
          <span v-if="scope.row.status==1" style="color: #f56c6c">{{ scope.row.remark }}</span>
          <span v-else >{{ scope.row.remark }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div class="tabelFirstBottom">
                <div class="columnFirstNum">合计费用</div>
                <div style="display: flex;width:61%">
                <div class="columnFirst">{{ 2530.55 }}</div>
                <div class="columnFirst">{{ 2530.55 }}</div>
                <div class="columnFirst">{{ 2530.55 }}</div>
                <div class="columnFirst">{{ 2530.55 }}</div>
                <div class="columnFirst">{{ 2530.55 }}</div>
                <div class="columnFirstRight"></div>
              </div>
    </div>

      <!-- 租赁费用弹窗-->
      <el-dialog :title="title" :visible.sync="showLease" width="1200px"  append-to-body>
        <el-form :model="dialogLease" ref="dialogLease" size="small" :inline="true" label-width="80px">
          <el-form-item label="物资名称" prop="typeName">
          <el-input
            v-model="dialogLease.typeName"
            placeholder="请输入物资名称"
            clearable :maxlength="30"
            style="width: 240px"/>
          </el-form-item>
          <el-form-item label="规格型号" prop="modelName">
          <el-input
            v-model="dialogLease.modelName"
            placeholder="请输入规格型号"
            clearable :maxlength="30"
            style="width: 240px"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
              icon="el-icon-search" size="mini"
              @click="handleQueryLease"
            >查询</el-button>
          </el-form-item>
          <el-form-item>
             <el-button
               type="warning"
               icon="el-icon-download"
               size="mini"
               :disabled="!dialogLeaseList.length"
               @click="handleExportLease"
             >导出</el-button>
           </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="dialogLeaseList" border>
          <el-table-column label="序号" align="center" width="80" type="index" >
            <template slot-scope="scope">
              <span>{{
                (dialogLease.pageNum - 1) * dialogLease.pageSize + scope.$index + 1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="物资名称" align="center" prop="typeName" :show-overflow-tooltip="true"/>
          <el-table-column label="规格型号" align="center" prop="modelName" :show-overflow-tooltip="true"/>
          <el-table-column label="计量单位" align="center" prop="mtUnitName" :show-overflow-tooltip="true"/>
          <el-table-column label="租赁单价" align="center" prop="leasePrice" :show-overflow-tooltip="true"/>
          <el-table-column label="租赁数量" align="center" prop="num" :show-overflow-tooltip="true"/>
          <el-table-column label="租赁日期" align="center" prop="startTime" :show-overflow-tooltip="true"/>
          <el-table-column label="归还日期" align="center" prop="endTime" :show-overflow-tooltip="true"/>
          <el-table-column label="租赁天数" align="center" prop="leaseDays" :show-overflow-tooltip="true"/>
          <el-table-column label="租赁费用" align="center" width="130px" prop="costs" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                {{ scope.row.costs.toFixed(2) }}
            </template>
          </el-table-column>            
        </el-table>
        <div class="tabelAllBottom">
                <div class="columnAllNum">合计费用</div>
                <div class="columnAll">
                {{ 2530.55 }}
                </div>
        </div>
      </el-dialog>

      <!-- 维修费用弹窗-->
      <el-dialog :title="title" :visible.sync="showRepair" width="1200px"  append-to-body>
        <el-form :model="dialogRepair" ref="dialogRepair" size="small" :inline="true" label-width="80px">
          <el-form-item label="物资名称" prop="typeName">
          <el-input
            v-model="dialogRepair.typeName"
            placeholder="请输入物资名称"
            clearable :maxlength="30"
            style="width: 240px"/>
          </el-form-item>
          <el-form-item label="规格型号" prop="modelName">
          <el-input
            v-model="dialogRepair.modelName"
            placeholder="请输入规格型号"
            clearable :maxlength="30"
            style="width: 240px"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
              icon="el-icon-search" size="mini"
              @click="handleQueryRepair"
            >查询</el-button>
          </el-form-item>
          <el-form-item>
             <el-button
               type="warning"
               icon="el-icon-download"
               size="mini"
               :disabled="!dialogRepairList.length"
               @click="handleExportRepair"
             >导出</el-button>
           </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="dialogRepairList" border>
          <el-table-column label="序号" align="center" width="80" type="index" >
            <template slot-scope="scope">
              <span>{{
                (dialogRepair.pageNum - 1) * dialogRepair.pageSize + scope.$index + 1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="物资名称" align="center" prop="typeName" :show-overflow-tooltip="true"/>
          <el-table-column label="规格型号" align="center" prop="modelName" :show-overflow-tooltip="true"/>
          <el-table-column label="计量单位" align="center" prop="mtUnitName" :show-overflow-tooltip="true"/>
          <el-table-column label="维修数量" align="center" prop="num" :show-overflow-tooltip="true"/>
          <el-table-column label="是否收费" align="center" prop="partType" :show-overflow-tooltip="true"/>
          <el-table-column label="维修费用" align="center" width="130px" prop="costs" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                {{ scope.row.costs.toFixed(2) }}
            </template>
          </el-table-column>
        </el-table>
        <div class="tabelAllBottom">
                <div class="columnAllNum">合计费用</div>
                <div class="columnAll">
                {{ 2530.55 }}
                </div>
        </div>
      </el-dialog>

      <!-- 报废费用弹窗-->
      <el-dialog :title="title" :visible.sync="showScrap" width="1200px"  append-to-body>
        <el-form :model="dialogScrap" ref="dialogScrap" size="small" :inline="true" label-width="80px">
          <el-form-item label="物资名称" prop="typeName">
          <el-input
            v-model="dialogScrap.typeName"
            placeholder="请输入物资名称"
            clearable :maxlength="30"
            style="width: 240px"/>
          </el-form-item>
          <el-form-item label="规格型号" prop="modelName">
          <el-input
            v-model="dialogScrap.modelName"
            placeholder="请输入规格型号"
            clearable :maxlength="30"
            style="width: 240px"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
              icon="el-icon-search" size="mini"
              @click="handleQueryScrap"
            >查询</el-button>
          </el-form-item>
          <el-form-item>
             <el-button
               type="warning"
               icon="el-icon-download"
               size="mini"
               :disabled="!dialogScrapList.length"
               @click="handleExportScrap"
             >导出</el-button>
           </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="dialogScrapList" border>
          <el-table-column label="序号" align="center" width="80" type="index" >
            <template slot-scope="scope">
              <span>{{
                (dialogScrap.pageNum - 1) * dialogScrap.pageSize + scope.$index + 1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="物资名称" align="center" prop="typeName" :show-overflow-tooltip="true"/>
          <el-table-column label="规格型号" align="center" prop="modelName" :show-overflow-tooltip="true"/>
          <el-table-column label="计量单位" align="center" prop="mtUnitName" :show-overflow-tooltip="true"/>
          <el-table-column label="报废数量" align="center" prop="num" :show-overflow-tooltip="true"/>
          <el-table-column label="是否收费" align="center" prop="partType" :show-overflow-tooltip="true"/>
          <el-table-column label="报废费用" align="center" width="130px" prop="costs" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                {{ scope.row.costs.toFixed(2) }}
            </template>
          </el-table-column>
        </el-table>
        <div class="tabelAllBottom">
                <div class="columnAllNum">合计费用</div>
                <div class="columnAll">
                {{ 2530.55 }}
                </div>
        </div>
      </el-dialog>

      <!-- 丢失费用弹窗-->
      <el-dialog :title="title" :visible.sync="showLose" width="1200px"  append-to-body>
        <el-form :model="dialogLose" ref="dialogLose" size="small" :inline="true" label-width="80px">
          <el-form-item label="物资名称" prop="typeName">
          <el-input
            v-model="dialogLose.typeName"
            placeholder="请输入物资名称"
            clearable :maxlength="30"
            style="width: 240px"/>
          </el-form-item>
          <el-form-item label="规格型号" prop="modelName">
          <el-input
            v-model="dialogLose.modelName"
            placeholder="请输入规格型号"
            clearable :maxlength="30"
            style="width: 240px"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
              icon="el-icon-search" size="mini"
              @click="handleQueryLose"
            >查询</el-button>
          </el-form-item>
          <el-form-item>
             <el-button
               type="warning"
               icon="el-icon-download"
               size="mini"
               :disabled="!dialogLoseList.length"
               @click="handleExportLose"
             >导出</el-button>
           </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="dialogLoseList" border>
          <el-table-column label="序号" align="center" width="80" type="index" >
            <template slot-scope="scope">
              <span>{{
                (dialogLose.pageNum - 1) * dialogLose.pageSize + scope.$index + 1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="物资名称" align="center" prop="typeName" :show-overflow-tooltip="true"/>
          <el-table-column label="规格型号" align="center" prop="modelName" :show-overflow-tooltip="true"/>
          <el-table-column label="计量单位" align="center" prop="mtUnitName" :show-overflow-tooltip="true"/>
          <el-table-column label="丢失数量" align="center" prop="num" :show-overflow-tooltip="true"/>
          <el-table-column label="丢失费用" align="center" width="130px" prop="costs" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                {{ scope.row.costs.toFixed(2) }}
            </template>
          </el-table-column>
        </el-table>
        <div class="tabelAllBottom">
                <div class="columnAllNum">合计费用</div>
                <div class="columnAll">
                {{ 2530.55 }}
                </div>
        </div>
      </el-dialog>
  </div>
</template> 
  
  <script>
import {
    getProjectList,
    getUnitList,
    getAgreementInfoById, 
} from '@/api/back/index.js' 
import {getPushReviewList, } from "@/api/costPush/costPush";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
    name: "PushCost",
  data() {
    return {
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,

      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,

      // 总条数
      total: 0,
      // 费用推送审核表格数据
      pushReviewList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 单位数据
      unitList: [],
      // 工程数据
      proList: [],

      // 查询参数
      queryParams: {
        unitId: null,
        projectId: null,
        agreementId: '',
        agreementCode: '',
        month: null,
        year: null,
        isSend: null,
      },

      // 多选框选中数据
      ids: [],

      //租赁费用弹窗
      showLease: false,
      dialogLeaseList: [], //租赁费用列表
      dialogLease: {
        typeName: undefined,
        modelName: undefined,
      },
      dialogLeaseTotal: 0,

      //维修费用弹窗
      showRepair: false,
      dialogRepairList: [], //维修费用列表
      dialogRepair: {
        typeName: undefined,
        modelName: undefined,
      },
      dialogRepairTotal: 0,

      //报废费用弹窗
      showScrap: false,
      dialogScrapList: [], //报废费用列表
      dialogScrap: {
        typeName: undefined,
        modelName: undefined,
      },
      dialogScrapTotal: 0,

      //丢失费用弹窗
      showLose: false,
      dialogLoseList: [], //丢失费用列表
      dialogLose: {
        typeName: undefined,
        modelName: undefined,
      },
      dialogLoseTotal: 0,
    };
  },
  created() {
    this.getMonthandYear();
    this.GetUnitData()
    this.GetProData()
    this.getList();
  },
  components: { Treeselect },
    methods: {
      getMonthandYear() {
        // 默认当月
        var nowDate = new Date();
        var date = {
          year: nowDate.getFullYear(),
          month: nowDate.getMonth() + 1,
          day: nowDate.getDate()
        };
        const dayDate = date.year + "-" + (date.month >= 10 ? date.month : "0" + date.month);
        const dayYear = date.year;
        this.$set(this.queryParams, "month", dayDate.toString());
        this.$set(this.queryParams, "year", dayYear.toString());
      },

      /** 转换菜单数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.name,
          children: node.children,
        };
      },
      // 获取 单位 列表数据
      async GetUnitData() {
        const params = {
          // projectId: this.queryParams.projectId /*  */,
        }
        const res = await getUnitList(params)
        this.unitList = res.data;

        this.getAgreementInfo()
      },
      unitChange(val) {
        setTimeout(() => {
          this.queryParams.projectId = null
          this.queryParams.agreementId = null
          this.queryParams.agreementCode = null
          this.GetProData()
        }, 500)
      },
      // 获取 工程名称 列表数据
      async GetProData() {
        const params = {
          unitId: this.queryParams.unitId,
        }
        const res = await getProjectList(params)
        this.proList = res.data;

        this.getAgreementInfo()
      },
      proChange(val) {
        setTimeout(() => {
          this.GetUnitData()
        }, 500)
      },

      // 获取 协议id
      async getAgreementInfo() {
        if (this.queryParams.unitId && this.queryParams.projectId) {
          const params = {
            unitId: this.queryParams.unitId,
            projectId: this.queryParams.projectId,
          }
          const res = await getAgreementInfoById(params)
          console.log(res)
          if (!(res.data && res.data.agreementId)) {
            this.$message.error('当前单位和工程无协议！')
            this.queryParams.unitId = null
            this.queryParams.projectId = null
            this.GetUnitData()
            this.GetProData()
          } else {
            this.queryParams.agreementId = res.data.agreementId
            this.queryParams.agreementCode = res.data.agreementCode
          }
        }
      },


      /** 查询列表 */
      getList() {
        this.loading = true;
        console.log('3333333',this.queryParams.year)
        // getPushReviewList(this.queryParams).then((response) => {
        //   this.pushReviewList = response.rows;
        //   this.total = response.total;
        //   this.loading = false;
        // });
        this.pushReviewList = [
          {
            id: 1,
            agreementCode: '1',
            unitName: '1',
            projectName: '1',
            leaseCost: 100,
            repairCost: 100,
            scrapCost: 100,
            loseCost: 100,
            allCost: 100,
            month: '2025-01',
            status: '0',
            remark: '非竣工的60天内的工程数据',
          },
          {
            id: 2,
            agreementCode: '2',
            unitName: '2',
            projectName: '2',
            leaseCost: 100,
            repairCost: 100,
            scrapCost: 100,
            loseCost: 100,
            allCost: 100,
            month: '2024-12',
            status: '1',
            remark: '非竣工的70天内的工程数据',
          },
        ]

        this.loading = false;
      },

      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams = {
          isSend: null,
          unitId: null,
          projectId: null,
          agreementId: '',
          agreementCode: '',
          month: null,
          year: null,
        }
        this.resetForm('queryForm')
        this.handleQuery()
      },

      /** 搜索按钮操作 */
      handleQuery() {
        this.getList();
      },

      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.id)
        this.single = selection.length != 1
        this.multiple = !selection.length
      },

      //是否可用勾选框
      selectable(row) {
        if (row.status == "1") {
          return false;
        } else {
          return true;
        }
      },

      //打开租赁费用弹窗
      openLease(row) {
        this.showLease = true
        this.dialogLease.typeName = ""
        this.dialogLease.modelName = ""
        this.dialogLease.id = row.id;
        // this.getLeaseList()
      },
      //查询租赁费用
      getLeaseList() {
        this.loading = true;
        // getLeaseList(this.dialogLease).then((response) => {
        //   this.dialogLeaseList = response.rows;
        //   this.dialogLeaseTotal = response.total;
        //   this.loading = false;
        // });
      },
      handleQueryLease() {
        this.getLeaseList()
      },
      //导出租赁费用
      handleExportLease() {
        // exportLease(this.dialogLease).then((response) => {
        //   this.$message.success("导出成功");
        // });
      },

      //打开维修费用弹窗
      openRepair(row) {
        this.showRepair = true
        this.dialogRepair.typeName = ""
        this.dialogRepair.modelName = ""
        this.dialogRepair.id = row.id;
        // this.getRepairList()
      },
      //查询维修费用
      getRepairList() {
        this.loading = true;
        // getRepairList(this.dialogRepaire).then((response) => {
        //   this.dialogRepairList = response.rows;
        //   this.dialogRepairTotal = response.total;
        //   this.loading = false;
        // });
      },
      handleQueryRepair() {
        this.getRepairList()
      },
      //导出维修费用
      handleExportRepair() {
        // exportRepair(this.dialogRepair).then((response) => {
        //   this.$message.success("导出成功");
        // });
      },


      //打开报废费用弹窗
      openScrap(row) {
        this.showScrap = true
        this.dialogScrap.typeName = ""
        this.dialogScrap.modelName = ""
        this.dialogScrap.id = row.id;
        // this.getScrapList()
      },
      //查询报废费用
      getScrapList() {
        this.loading = true;
        // getScrapList(this.dialogScrap).then((response) => {
        //   this.dialogScrapList = response.rows;
        //   this.dialogScrapTotal = response.total;
        //   this.loading = false;
        // });
      },
      handleQueryScrap() {
        this.getScrapList()
      },
      //导出维修费用
      handleExportScrap() {
        // exportScrap(this.dialogScrap).then((response) => {
        //   this.$message.success("导出成功");
        // });
      },


      //打开丢失费用弹窗
      openLose(row) {
        this.showLose = true
        this.dialogLose.typeName = ""
        this.dialogLose.modelName = ""
        this.dialogLose.id = row.id;
        // this.getLoseList()
      },
      //查询丢失费用
      getLoseList() {
        this.loading = true;
        // getLoseList(this.dialogLose).then((response) => {
        //   this.dialogLoseList = response.rows;
        //   this.dialogLoseTotal = response.total;
        //   this.loading = false;
        // });
      },
      handleQueryLose() {
        this.getLoseList()
      },
      handleExportLose() {
        // exportLose(this.dialogLose).then((response) => {
        //   this.$message.success("导出成功");
        // });
      },

      /** 导出 */
      handleExport() {
      // this.download(
      //         'material/complex_query/exportOutRecord',
      //         {
      //             ...this.queryParams,
      //         },
      //         `费用推送记录_${new Date().getTime()}.xlsx`,
      //     )
      },
      /** 导出年度费用 */
      handleExportYear() {
              // this.download(
      //         'material/complex_query/exportOutRecord',
      //         {
      //             ...this.queryParams,
      //         },
      //         `年度费用记录_${new Date().getTime()}.xlsx`,
      //     )
      },
      /** 导出开工年度费用 */
      handleExportStart() {
              // this.download(
      //         'material/complex_query/exportOutRecord',
      //         {
      //             ...this.queryParams,
      //         },
      //         `开工年度费用记录_${new Date().getTime()}.xlsx`,
      //     )
      },

      /** 批量退回 */
      handleSubmit() {
        if (this.ids.length == 0) {
              this.$message({
                type: 'warning',
                message: '请选择数据',
              })
            return;
        }
        this.$modal
              .confirm('是否确认退回？')
          .then(() => {
                  // let params = {
                  //     'agreementId': this.rowData.agreementId, 'agreementCode': this.rowData.agreementCode,'totalCostAll': this.costAll,
                  //     'leaseList': this.leaseList, 'repairList': this.repairList, 'scrapList': this.scrapList,'loseList': this.loseList,
                  // }
                 
                  // submitCosts(params).then((response) => {
                  //     this.$message({
                  //         type: 'success',
                  //         message: '提交成功',
                  //     })
                  //     this.getList()
                  // })
              })
              .catch(() => {})
     }
  },
};
</script>
<style lang="scss" scoped>
.uploadImg {
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.deviceCode {
  margin-top: 10px;
  padding-bottom: 20px;
  font-size: 18px;
}
::v-deep.el-table .fixed-width .el-button--mini {
    width: 60px !important;
    margin-bottom: 10px;
}
.clickText {
  color: #02a7f0;
  cursor: pointer;
}

.tabelAllBottom {
  display: flex;
  border: 1px solid #dfe6ec;
  width:100%;
  border-bottom: 1px solid #dfe6ec;
  border-top: none;
}
.columnAll {
  flex:1;
  display: flex;
  padding: 5px;
  border-left: 1px solid #dfe6ec;
  width:100%;
  align-items: center;
  text-align: center;
  justify-content: center; /* 将内容对齐到中间 */
}
.columnAllNum {
  padding: 5px;
  text-align: center;
  width:88.6%;
  border-left: none;
}

.tabelFirstBottom {
  display: flex;
  border: 1px solid #dfe6ec;
  width:100%;
  border-bottom: 1px solid #dfe6ec;
  border-top: none;
}
.columnFirst {
  display: flex ;
  background-color: #f8f8f9;
  padding: 5px;
  border-left: 1px solid #dfe6ec;
  width:12.5%;
  align-items: center;
  text-align: center;
  justify-content: center; /* 将内容对齐到中间 */
}
.columnFirstRight {
  padding: 5px;
  border-left: 1px solid #dfe6ec;
  width:37.5%;
  align-items: center;
  text-align: center;
  justify-content: center; /* 将内容对齐到中间 */
}
.columnFirstNum {
  background-color: #f8f8f9;
  padding: 5px;
  text-align: center;
  width:38.98%;
  border-left: none;
}
</style>