<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"
                  :clearable="false"
                  @input="handleMonthInput">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="是否过滤" prop="isFilter">
                <el-select v-model="queryParams.isFilter" placeholder="请选择" clearable>
                    <el-option label="已过滤" value="0"></el-option>
                    <el-option label="未过滤" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是否结算" prop="isPay">
                <el-select v-model="queryParams.isPay" placeholder="请选择" clearable>
                    <el-option label="已结算" value="0"></el-option>
                    <el-option label="未结算" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是否审核" prop="isReview">
                <el-select v-model="queryParams.isReview" placeholder="请选择" clearable>
                    <el-option label="已审核" value="0"></el-option>
                    <el-option label="未审核" value="1"></el-option>
                </el-select>
            </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="success"
                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"
      :span-method="objectSpanMethod"
      border
    >
    <el-table-column type="selection" align="center"  :selectable="selectable"/>
      <el-table-column label="序号" align="center" type="index">
        <template scope="scope">
                    <span style="background-color: #f8f8f9;text-align: center;" v-if="scope.$index==pushReviewList.length-1">合计费用：</span>
                    <span v-else>{{ scope.$index+1 }} </span>
        </template>
      </el-table-column>
      <el-table-column label="协议号" align="center" prop="agreementCode"  show-overflow-tooltip />
      <el-table-column label="单位名称" align="center" prop="unitName" width="180" />
      <el-table-column label="工程名称" align="center" prop="projectName" width="180" />
      <el-table-column label="推送月份" align="center" prop="month" width="100" >
        <template slot-scope="scope" >
          <span>
            {{originalMonthTrue}}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="租赁费用" align="center" prop="leaseMoney" >
        <template slot-scope="scope" >
          <span class="clickText" v-if="scope.row.leaseMoney!=null && scope.$index!=pushReviewList.length-1"  @click="openLease(scope.row)">
            {{scope.row.leaseMoney}}
          </span>
          <span  v-if="scope.row.leaseMoney!=null && scope.$index==pushReviewList.length-1"  >
            {{scope.row.leaseMoney}}
          </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 && scope.$index!=pushReviewList.length-1" @click="openRepair(scope.row)">
            {{scope.row.repairMoney}}
          </span>
          <span v-if="scope.row.repairMoney!=null && scope.$index==pushReviewList.length-1"  >
            {{scope.row.repairMoney}}
          </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 && scope.$index!=pushReviewList.length-1"  @click="openScrap(scope.row)">
            {{scope.row.scrapMoney}}
          </span>
          <span v-if="scope.row.scrapMoney!=null && scope.$index==pushReviewList.length-1"  >
            {{scope.row.scrapMoney}}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="丢失费用" align="center" prop="lostMoney"  show-overflow-tooltip >
        <template slot-scope="scope" >
          <span class="clickText" v-if="scope.row.lostMoney!=null && scope.$index!=pushReviewList.length-1"  @click="openLose(scope.row)">
            {{scope.row.lostMoney}}
          </span>
          <span v-if="scope.row.lostMoney!=null && scope.$index==pushReviewList.length-1"  >
            {{scope.row.lostMoney}}
          </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}}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="是否结算" align="center" prop="isSettlement" width="100" >
        <template slot-scope="scope" >
          <span v-if="scope.row.isSettlement==1" style="color: #67c23a">已结算</span>
          <span v-if="scope.row.isSettlement==0" style="color: #f56c6c">未结算</span>
        </template>
      </el-table-column>
      <el-table-column label="是否审核" align="center" prop="checkStatus" width="100" >
        <template slot-scope="scope" >
          <span v-if="scope.row.checkStatus==1" style="color: #67c23a">已审核</span>
          <span v-if="scope.row.checkStatus==0" style="color: #f56c6c">未审核</span>
        </template>
      </el-table-column>      
    </el-table>
    <!-- <div class="tabelFirstBottom">
                <div class="columnFirstNum">合计费用</div>
                <div style="display: flex;width:58%">
                <div class="columnFirst">{{ leaseAll.toFixed(2) }}</div>
                <div class="columnFirst">{{ repairAll.toFixed(2) }}</div>
                <div class="columnFirst">{{ scrapAll.toFixed(2) }}</div>
                <div class="columnFirst">{{ loseAll.toFixed(2) }}</div>
                <div class="columnFirst">{{ moneyAll.toFixed(2) }}</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"
               @click="handleExportLease"
             >导出</el-button>
           </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="dialogLeaseList" height="500px" border>
          <el-table-column label="序号" align="center" width="80" type="index" />
          <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="unitName" :show-overflow-tooltip="true"/>
          <el-table-column label="租赁单价" align="center" prop="leasePrice" :show-overflow-tooltip="true"/>
          <el-table-column label="租赁数量" align="center" prop="leaseNum" :show-overflow-tooltip="true"/>
          <el-table-column label="租赁日期" align="center" prop="leaseDate"  width="170px"/>
          <el-table-column label="归还日期" align="center" prop="backDate"  width="170px"/>
          <el-table-column label="租赁天数" align="center" prop="leaseDays" :show-overflow-tooltip="true"/>
          <el-table-column label="租赁费用" align="center" width="126px" prop="leaseMoney" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                {{ scope.row.leaseMoney.toFixed(2) }}
            </template>
          </el-table-column>            
        </el-table>
        <div class="tabelAllBottom">
                <div class="columnAllNum">合计费用</div>
                <div class="columnAll">
                {{ leaseAllMoney.toFixed(2) }}
                </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"
               @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="unitName" :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="repairMoney" :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"
               @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="unitName" :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="scrapMoney" :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"
               @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="unitName" :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="loseMoney" :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,getLeaseList,getRepairList,getLoseList,getScrapList } from "@/api/costPush/costPush";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
    name: "PushReview",
  data() {
    return {
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,

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

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

      //合计
      moneyAll: 0,
      //租赁合计
      leaseAll: 0,
      //维修合计
      repairAll: 0,
      //报废合计
      scrapAll: 0,
      //丢失合计
      loseAll: 0,

      // 查询参数
      queryParams: {
        unitId: null,
        projectId: null,
        agreementId: '',
        agreementCode: '',
        month: null,
        isReview: null,
        isPay: null,
        isFilter: null,
      },

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

      //租赁费用弹窗
      showLease: false,
      dialogLeaseList: [], //租赁费用列表
      dialogLease: {
        typeName: undefined,
        modelName: undefined,
      },
      dialogLeaseTotal: 0,
      leaseAllMoney: 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,

      originalMonth: null, // 用于存储原始的月份值，防止键盘按键删除
      originalMonthTrue: null,
    };
  },
  created() {
    this.getMonth();
    this.GetUnitData()
    this.GetProData()
    this.getList();
  },
  components: { Treeselect },
    methods: {
      getMonth() {
        // 默认当月
        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);
        this.$set(this.queryParams, "month", dayDate.toString());
        this.originalMonth = dayDate.toString();
        this.originalMonthTrue = dayDate.toString();
      },

      //键盘按键删除触发返回效果
      handleMonthInput() {
      // 当用户输入时，检查是否为空
      if (!this.queryParams.month) {
          this.queryParams.month = this.originalMonth;
        }
      },

      //多选框选中数据
      handleSelectionChange(val) {
        this.ids = val.map(item => item.id);
      },

      /** 转换菜单数据结构 */
      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(this.queryParams.month)
        getPushReviewList(this.queryParams).then((response) => {
          this.pushReviewList = response.rows;
          this.originalMonthTrue = this.queryParams.month;
          if(response.rows){
            response.rows.forEach(item => {
              this.leaseAll += (Number(item.leaseMoney) || 0);
              this.repairAll += (Number(item.repairMoney) || 0) ;
              this.scrapAll += (Number(item.scrapMoney) || 0);
              this.loseAll += (Number(item.loseMoney) || 0);
            })
            this.moneyAll = this.leaseAll + this.repairAll + this.scrapAll + this.loseAll;
          }
          let obj = {
            leaseMoney: this.leaseAll,
            repairMoney: this.repairAll,
            scrapMoney: this.scrapAll,
            loseMoney: this.loseAll,
            money: this.moneyAll,
          }
          this.pushReviewList.push(obj)
          this.loading = false;
        });

        this.loading = false;
      },

      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          isReview: null,
          isPay: null,
          isFilter: null,
          unitId: null,
          projectId: null,
          agreementId: '',
          agreementCode: '',
          month: this.originalMonth,
        }
        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.isReview == "0") {
          return false;
        } else {
          return true;
        }
      },

      //打开租赁费用弹窗
      openLease(row) {
        this.showLease = true
        this.dialogLease.typeName = ""
        this.dialogLease.modelName = ""
        this.dialogLease.id = row.id;
        this.getLeaseList(row)
      },
      //查询租赁费用
      getLeaseList(row) {
        this.loading = true;
        let params = {
          month: this.queryParams.month,
          agreementId: row.agreementId,
          typeName: this.dialogLease.typeName,
          modelName: this.dialogLease.modelName,
        }
        getLeaseList(params).then((response) => {
          this.dialogLeaseList = response.rows;
          this.leaseAllMoney = 0;
          this.dialogLeaseList.forEach(item => {
            this.leaseAllMoney += Number(item.leaseMoney);
          })
          this.dialogLeaseTotal = response.total;
          this.loading = false;
        });
      },
      handleQueryLease() {
        this.getLeaseList()
      },
      //导出租赁费用
      handleExportLease() {
      // this.download(
      //         'material/complex_query/exportOutRecord',
      //         {
      //             ...this.queryParams,
      //         },
      //         `租赁费用记录_${new Date().getTime()}.xlsx`,
      //     )
      },

      //打开维修费用弹窗
      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() {
      // this.download(
      //         'material/complex_query/exportOutRecord',
      //         {
      //             ...this.queryParams,
      //         },
      //         `维修费用记录_${new Date().getTime()}.xlsx`,
      //     )
      },


      //打开报废费用弹窗
      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() {
      // this.download(
      //         'material/complex_query/exportOutRecord',
      //         {
      //             ...this.queryParams,
      //         },
      //         `报废费用记录_${new Date().getTime()}.xlsx`,
      //     )
      },


      //打开丢失费用弹窗
      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() {
      // this.download(
      //         'material/complex_query/exportOutRecord',
      //         {
      //             ...this.queryParams,
      //         },
      //         `丢失费用记录_${new Date().getTime()}.xlsx`,
      //     )
      },
      /** 外层导出 */
      handleExport() {
      this.download(
              'material/iws_cost_push/exportCostPushExamList',
              {
                  ...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(() => {})
     },

      // 合并单元格 rowIndex=行数  columnIndex=列数
      // 这里是合并table的除表头外的第一行的第二列 + 除表头外的第二行的第二列
      // 注意列数和行数从 0 开始
      objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === this.pushReviewList.length-1 && columnIndex == 1) {
          let rowspan = 2
          let colspan = 6
          return { rowspan, colspan }
        }
        // 解决偏移的重要代码
        // 重点在 else if 判断必须加因为合并单元格数据会出现偏移、
        // 否则如果是 第二行 的 第二列 那么隐藏原有第二行 的 第二列的数据使他隐藏
        else if (rowIndex === this.pushReviewList.length-1 && columnIndex < 6) {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      },
  },
};
</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:14.5%;
  align-items: center;
  text-align: center;
  justify-content: center; /* 将内容对齐到中间 */
}
.columnFirstRight {
  padding: 5px;
  background-color: #f8f8f9;
  border-left: 1px solid #dfe6ec;
  width:28.5%;
  align-items: center;
  text-align: center;
  justify-content: center; /* 将内容对齐到中间 */
}
.columnFirstNum {
  background-color: #f8f8f9;
  padding: 5px;
  text-align: center;
  width:41.7%;
  border-left: none;
}
</style>