<template>
  <div class="app-container">
    <el-row style="width: 100%">
      <el-col :span="18">
        <el-button type="primary" size="mini" @click="handleExport1">租赁明细导出</el-button>
        <el-button type="primary" size="mini" @click="handleExport3">维修明细导出</el-button>
        <el-button type="primary" size="mini" @click="handleExport4">报废明细导出</el-button>
        <el-button type="primary" size="mini" @click="handleExport2">丢失明细导出</el-button>
        <el-button type="primary" size="mini" @click="handleExport5">减免明细导出</el-button>
        <el-button type="warning" size="mini" @click="handleExportAll">全部明细导出</el-button>
        <el-button type="warning" size="mini" @click="handleExportEach">各结算明细导出</el-button>
        <el-button type="success" size="mini" @click="handleAdd">提交</el-button>
      </el-col>
    </el-row>

    <div style="margin-top: 20px">
      <div class="tabelAllTop">
        <div class="costTop">结算费用</div>
      </div>
      <div class="tabelAllTopUnit">
        <div class="costTopUnit">结算单位</div>
        <div class="costRightUnit">
          {{ unitName }}
        </div>
      </div>
      <div class="tabelAllTopUnit">
        <div class="costTopUnit">结算工程</div>
        <div class="costRightUnit">
          {{ projectName }}
        </div>
      </div>
      <el-table :data="leaseList">
        <el-table-column label="租赁费用明细" align="center">
          <el-table-column label="序号" align="center" type="index" width="60" />

          <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">
            <template slot-scope="scope" v-show="scope.row.leasePrice">
              {{ scope.row.leasePrice.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column label="租赁数量" align="center" prop="num" :show-overflow-tooltip="true">
            <template slot-scope="scope" v-show="scope.row.num">
              {{ scope.row.num.toFixed(2) }}
            </template>
          </el-table-column>
          <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">
            <template slot-scope="scope" v-show="scope.row.leaseDays">
              {{ Number(scope.row.leaseDays).toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column label="租赁费用（元）" align="center" prop="costs" :show-overflow-tooltip="true">
            <template slot-scope="scope" v-show="scope.row.costs">
              {{ scope.row.costs.toFixed(2) }}
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>

      <div class="tabelAll">
        <div class="columnAllNum">费用小计：</div>
        <div class="columnAll">
          {{ leaseCost }}
        </div>
      </div>
    </div>

    <div>
      <el-table :data="repairList">
        <el-table-column label="维修费用明细" align="center">
          <el-table-column label="序号" align="center" type="index" width="60" />
          <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">
            <template slot-scope="scope" v-show="scope.row.num">
              {{ scope.row.num.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column label="是否收费" align="center" prop="partType" :show-overflow-tooltip="true" />
          <el-table-column label="维修费用（元）" align="center" prop="costs" :show-overflow-tooltip="true">
            <template slot-scope="scope" v-show="scope.row.costs">
              {{ scope.row.costs.toFixed(2) }}
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <div class="tabelAll">
        <div class="columnAllNum">费用小计：</div>
        <div class="columnAll">
          {{ repairCost }}
        </div>
      </div>
    </div>

    <div>
      <el-table :data="scrapList">
        <el-table-column label="报废费用明细" align="center">
          <el-table-column label="序号" align="center" type="index" width="60" />
          <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">
            <template slot-scope="scope" v-show="scope.row.num">
              {{ scope.row.num.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column label="是否收费" align="center" prop="partType" :show-overflow-tooltip="true" />
          <el-table-column label="报废费用（元）" align="center" prop="costs" :show-overflow-tooltip="true">
            <template slot-scope="scope" v-show="scope.row.costs">
              {{ scope.row.costs.toFixed(2) }}
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <div class="tabelAll">
        <div class="columnAllNum">费用小计：</div>
        <div class="columnAll">
          {{ scrapCost }}
        </div>
      </div>
    </div>

    <div>
      <el-table :data="loseList">
        <el-table-column label="丢失费用明细" align="center">
          <el-table-column label="序号" align="center" type="index" width="60" />
          <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">
            <template slot-scope="scope" v-show="scope.row.num">
              {{ scope.row.num.toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column label="丢失费用（元）" align="center" prop="costs" :show-overflow-tooltip="true">
            <template slot-scope="scope" v-show="scope.row.costs">
              {{ scope.row.costs.toFixed(2) }}
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <div class="tabelAll">
        <div class="columnAllNum">费用小计：</div>
        <div class="columnAll">
          {{ loseCost }}
        </div>
      </div>
    </div>

    <div>
      <el-table :data="reducList">
        <el-table-column label="减免费用明细" align="center">
          <el-table-column label="序号" align="center" type="index" width="60" />
          <el-table-column label="设备名称" align="center" prop="typeName" :show-overflow-tooltip="true" />
          <el-table-column label="规格型号" align="center" prop="modeName" :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="reduceNum" :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="days" :show-overflow-tooltip="true" />
          <el-table-column label="减免原因" align="center" prop="remark" :show-overflow-tooltip="true" />
          <el-table-column label="减免费用（元）" align="center" prop="leaseMoney" :show-overflow-tooltip="true">
            <template slot-scope="scope" v-show="scope.row.leaseMoney">
              {{ scope.row.leaseMoney.toFixed(2) }}
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
      <div class="tabelAllBottom">
        <div class="columnAllNum">费用小计：</div>
        <div class="columnAll">
          {{ reducCost }}
        </div>
      </div>
      <div class="tabelAllBottom">
        <div class="columnAllNum">合计：</div>
        <div class="columnAll">
          {{ costAll.toFixed(2) }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSltInfo, getClzSltInfo, submitCosts, submitClzCosts } from '@/api/cost/cost'

export default {
  name: '',
  dicts: [],
  props: {
    row: {
      type: [String]
    }
  },
  data() {
    return {
      // 往来单位数据
      unitList: [],
      // 工程数据
      projectList: [],
      leaseList: [], //租赁费用列表
      leaseCost: 0,
      repairList: [], //维修费用列表
      repairCost: 0,
      scrapList: [], //报废费用列表
      scrapCost: 0,
      loseList: [], //丢失费用列表
      loseCost: 0,
      reducList: [], //减免费用列表
      reducCost: 0,
      costAll: 0,
      deptName: undefined,
      applyList: [],
      projectName: undefined, //结算工程
      unitName: undefined //结算单位
    }
  },
  mounted() {
    let arr = JSON.parse(this.row)
    this.rowData = arr
    this.getDataAll()
  },
  methods: {
    //获取单位类型 ,getUnitList, getProjectList
    getUnitList() {
      getUnitList().then(response => {
        this.unitList = response.data
      })
    },
    getProjectList() {
      getProjectList().then(response => {
        this.projectList = response.data
      })
    },
    /** 查询列表 */
    getDataAll() {
      getClzSltInfo(this.rowData).then(response => {
        this.leaseList = response.data.leaseList //租赁费用列表
        this.projectName = response.data.projectName
        this.unitName = response.data.unitName
        this.leaseCost = this.countCost(this.leaseList)

        this.repairList = response.data.repairList //维修费用列表
        this.repairCost = response.data.repairCost.toFixed(2)
        // this.repairCost = this.countCost(this.repairList)

        this.scrapList = response.data.scrapList //报废费用列表
        this.scrapCost = response.data.scrapCost.toFixed(2)
        // this.scrapCost = this.countCost(this.scrapList)

        this.loseList = response.data.loseList //丢失费用列表
        this.loseCost = this.countCost(this.loseList)
        this.reducList = response.data.reductionList //减免费用列表
        if (this.reducList != null) {
          this.reducList.forEach(item => {
            this.reducCost = Number(this.reducCost) + Number(item.leaseMoney)
          })
        }
        this.applyList = response.data.relations
        this.applyList.forEach(item => {
          item.leaseCost = Number(item.leaseCost)
          item.repairCost = Number(item.repairCost)
          item.scrapCost = Number(item.scrapCost)
          item.loseCost = Number(item.loseCost)
          item.cost =
            Number(item.leaseCost) +
            Number(item.repairCost) +
            Number(item.scrapCost) +
            Number(item.loseCost) +
            Number(item.reductionCost) +
            Number(item.addCost) -
            Number(item.subCost)
        })

        let costSum =
          Number(this.leaseCost) +
          Number(this.repairCost) +
          Number(this.scrapCost) +
          Number(this.loseCost) -
          Number(this.reducCost)
        this.costAll = costSum

        this.subCostFlag = costSum
      })
    },
    //计算金额1
    countCost(list) {
      let arrCost = 0
      list.forEach(item => {
        // arrCost += parseInt(item.costs)
        if (item.partType != 0 && item.scrapType != 0) {
          arrCost = arrCost + Number(item.costs)
        }
      })

      return arrCost.toFixed(2)
    },
    //提交按钮
    handleAdd() {
      this.$modal
        .confirm('是否确认提交？')
        .then(() => {
          let params = {
            agreementIds: Array.isArray(this.rowData) ? this.rowData.map(item => item.agreementId) : [],
            totalCostAll: this.costAll,
            leaseList: this.leaseList,
            repairList: this.repairList,
            scrapList: this.scrapList,
            loseList: this.loseList,
            reductionList: this.reducList
          }
          console.log('2222222222222', params)
          submitClzCosts(params).then(response => {
            this.$message({
              type: 'success',
              message: '提交成功'
            })
            this.$emit('goBackPage')
          })
        })
        .catch(() => {})
    },
    //el-table-合计总费用
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 9) {
          sums[index] = '最终费用'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        // 只对amount这一列进行总计核算。
        if (column.property === 'cost') {
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
          } else {
            sums[index] = '---'
          }
        }
      })
      return sums
    },
    countNum(row) {
      row.cost =
        Number(row.leaseCost) +
        Number(row.repairCost) +
        Number(row.scrapCost) +
        Number(row.loseCost) +
        Number(row.addCost || 0) -
        Number(row.subCost || 0)
    },

    //返回
    handleBack() {
      this.$emit('goBackPage')
    },
    /** 导出按钮操作 */
    //租赁
    handleExport1() {
      const formatTime = date => {
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        const hours = String(date.getHours()).padStart(2, '0')
        const minutes = String(date.getMinutes()).padStart(2, '0')
        const seconds = String(date.getSeconds()).padStart(2, '0')
        return `${year}${month}${day}_${hours}${minutes}${seconds}`
      }

      const currentTime = formatTime(new Date())
      let data = _.cloneDeep(this.rowData)
      const params = { params: JSON.stringify(data) }
      this.download('material/material_sltAgreementInfo/exportLease', { ...params }, `租赁费用明细_${currentTime}.xlsx`)
    },
    //丢失
    handleExport2() {
      const formatTime = date => {
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        const hours = String(date.getHours()).padStart(2, '0')
        const minutes = String(date.getMinutes()).padStart(2, '0')
        const seconds = String(date.getSeconds()).padStart(2, '0')
        return `${year}${month}${day}_${hours}${minutes}${seconds}`
      }

      const currentTime = formatTime(new Date())
      let data = _.cloneDeep(this.rowData)
      const params = { params: JSON.stringify(data) }
      this.download('material/material_sltAgreementInfo/exportLose', { ...params }, `丢失费用明细_${currentTime}.xlsx`)
    },
    // 维修
    handleExport3() {
      const formatTime = date => {
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        const hours = String(date.getHours()).padStart(2, '0')
        const minutes = String(date.getMinutes()).padStart(2, '0')
        const seconds = String(date.getSeconds()).padStart(2, '0')
        return `${year}${month}${day}_${hours}${minutes}${seconds}`
      }

      const currentTime = formatTime(new Date())
      let data = _.cloneDeep(this.rowData)
      const params = { params: JSON.stringify(data) }
      this.download('material/material_sltAgreementInfo/exportRepair', { ...params }, `维修费用明细_${currentTime}.xlsx`)
    },
    //报废
    handleExport4() {
      const formatTime = date => {
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        const hours = String(date.getHours()).padStart(2, '0')
        const minutes = String(date.getMinutes()).padStart(2, '0')
        const seconds = String(date.getSeconds()).padStart(2, '0')
        return `${year}${month}${day}_${hours}${minutes}${seconds}`
      }

      const currentTime = formatTime(new Date())
      let data = _.cloneDeep(this.rowData)
      const params = { params: JSON.stringify(data) }
      this.download('material/material_sltAgreementInfo/exportScrap', { ...params }, `报废费用明细_${currentTime}.xlsx`)
    },
    handleExport5() {
      const formatTime = date => {
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        const hours = String(date.getHours()).padStart(2, '0')
        const minutes = String(date.getMinutes()).padStart(2, '0')
        const seconds = String(date.getSeconds()).padStart(2, '0')
        return `${year}${month}${day}_${hours}${minutes}${seconds}`
      }

      const currentTime = formatTime(new Date())
      let data = _.cloneDeep(this.rowData)
      const params = { params: JSON.stringify(data) }
      this.download('material/material_sltAgreementInfo/exportReduction', { ...params }, `减免费用明细_${currentTime}.xlsx`)
    },

    handleExportAll() {
      const formatTime = date => {
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        const hours = String(date.getHours()).padStart(2, '0')
        const minutes = String(date.getMinutes()).padStart(2, '0')
        const seconds = String(date.getSeconds()).padStart(2, '0')
        return `${year}${month}${day}_${hours}${minutes}${seconds}`
      }

      const currentTime = formatTime(new Date())
      let data = _.cloneDeep(this.rowData)
      const params = { params: JSON.stringify(data) }
      this.download('material/material_sltAgreementInfo/exportAll', { ...params }, `全部费用明细_${currentTime}.xlsx`)
    },
    handleExportEach() {
      const formatTime = date => {
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        const hours = String(date.getHours()).padStart(2, '0')
        const minutes = String(date.getMinutes()).padStart(2, '0')
        const seconds = String(date.getSeconds()).padStart(2, '0')
        return `${year}${month}${day}_${hours}${minutes}${seconds}`
      }

      const currentTime = formatTime(new Date())
      let data = _.cloneDeep(this.rowData)
      const params = { params: JSON.stringify(data) }
      this.download('material/material_sltAgreementInfo/exportEach', { ...params }, `各费用明细_${currentTime}.xlsx`)
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep.el-table .fixed-width .el-button--mini {
  width: 80px !important;
  margin-bottom: 10px;
}
.tabelAllTop {
  display: flex;
  border: 1px solid #dfe6ec;
  width: 100%;
  height: 50px;
  background-color: #f8f8f9;
  border-left: none;
  border-bottom: none;
  .costTop {
    display: flex;
    padding: 5px;
    border-left: 1px solid #dfe6ec;
    align-items: center;
    text-align: center;
    justify-content: center; /* 将内容对齐到中间 */
    width: 100%;
    font-weight: bold; /* 添加字体加粗样式 */
  }
}
.tabelAllTopUnit {
  display: flex;
  border: 1px solid #dfe6ec;
  width: 100%;
  height: 50px;
  background-color: #f8f8f9;
  border-bottom: none;
  .costTopUnit {
    display: flex;
    padding: 5px;
    width: 21.4%;
    border-left: none;
    align-items: center;
    text-align: center;
    justify-content: center; /* 将内容对齐到中间 */
  }
  .costRightUnit {
    display: flex;
    padding: 5px;
    border-left: 1px solid #dfe6ec;
    text-align: center;
    align-items: center;
    width: 100%;
    justify-content: center; /* 将内容对齐到中间 */
    // padding-left: 20px; /* 添加左内边距 */
  }
}
.tabelAll {
  display: flex;
  border: 1px solid #ecedf3;
  width: 100%;
  border-bottom: 1px solid #dfe6ec;
  border-top: none;
  margin-bottom: 15px;
}
.tabelAllBottom {
  display: flex;
  border: 1px solid #dfe6ec;
  width: 100%;
  border-bottom: 1px solid #dfe6ec;
  border-top: none;
}
.columnAll {
  display: flex;
  padding: 5px;
  border-left: 1px solid #dfe6ec;
  text-align: center;
  align-items: center;
  width: 100%;
  justify-content: flex-end; /* 将内容对齐到右侧 */
  margin-right: 60px; /* 添加右边距 */
}
.columnAllNum {
  padding: 5px;
  text-align: center;
  width: 21.4%;
  border-left: none;
}
/* 最后一列无右边框 */
.tabelAll .column:last-child {
  border-right: none;
}
</style>
