<template>
  <div>
    <div class="tab-header webtop">
      <!-- 标题 -->
      <div style="margin: 0 auto;">{{title}}</div>
      <!-- start 添加修改按钮 -->
      <div>
        <el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
      </div>
      <!-- end 详情按钮 -->
    </div>

    <div style="margin-top: 10px; height: 100%;">

      <el-table :key="tableKey" v-loading="listLoading" :data="list" border style="width: 100%;"
        :span-method="objectSpanMethods" show-summary :summary-method="getSummaries">
        <el-table-column fixed label="序号" type="index" width="80" :index="index+1" align="center" />
        <el-table-column prop="completionMonth" label="竣工月份" align="center" width="150" />
        <el-table-column prop="completionDate" label="竣工日期" align="center" width="150" />
        <el-table-column prop="settlementDate" label="结算日期" align="center" width="150" />
        <el-table-column prop="repairOrderNo" label="维修单号" align="center" width="150" />
        <el-table-column prop="vehMark" label="车牌号" align="center" width="150" />
        <el-table-column prop="serviceItem" label="维修项目" align="center" width="150" />
        <el-table-column prop="accessoryName" label="所需配件名称" align="center" width="150" />
        <el-table-column prop="goodsCode" label="图号" align="center" width="150" />
        <el-table-column prop="num" label="所需数量" align="center" width="150" />
        <el-table-column prop="disposableNum" label="库房一次性提供数量" align="center" width="150" />
        <el-table-column label="库房未能一次性提供的解决方案" align="center">
          <el-table-column prop="outsourceNum" label="外购数量" align="center" width="120" />
          <el-table-column prop="emergencyNum" label="订应急数量" align="center" width="120" />
          <el-table-column prop="otherNum" label="其它数量" align="center" width="120" />
        </el-table-column>
        <el-table-column prop="goodsArrivedDate" label="配件到货日期（最后入库日期）" align="center" width="150" />
        <el-table-column prop="goodsDistributionDate" label="配件装配日期（最后出库日期）" align="center" width="150" />
        <el-table-column prop="OneRate" label="配件一次性满足率" align="center" width="150" />
        <el-table-column prop="outsourceRate" label="外购率" align="center" width="150" />
        <el-table-column prop="emergencyRate" label="订应急率" align="center" width="150" />

      </el-table>
    </div>
  </div>
</template>

<script>
  import req from '@/api/statement/monthlyReport/oneTimeRate'
  export default {
    data() {
      return {
        index: 0,
        tableKey: 0,
        listLoading: false,
        list: [],
        title: "",
        mergeObj: {}, // 用来记录需要合并行的下标
        mergeArr: ['completionMonth', 'completionDate', 'settlementDate', 'repairOrderNo', 'vehMark'], // 表格中的列名
        // mergeArr: ['品牌', '服务站名称', '软件系统', '品名'], // 表格中的列名
      }
    },

    methods: {

      // 合计
      getSummaries(param) {
        const {
          columns,
          data
        } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计：'
            return
          }
          const values = data.map(item => Number(item[column.property]))
          if (column.property === 'num') { // 所需数量
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              console.log('>>>>>>>>>commodityCurrentChange', prev)
              console.log('>>>>>>>>>commodityCurrentChange', value)
              if (!isNaN(value)) {
                return (Number(prev) + Number(curr))
              } else {
                return Number(prev)
              }
            }, 0)
            sums[index] += ''
          } else if (column.property === 'disposableNum') { // 库房一次性提供数量
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return (Number(prev) + Number(curr))
              } else {
                return Number(prev)
              }
            }, 0)
            sums[index] += ''
          } else if (column.property === 'outsourceNum') { // 外购数量
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return (Number(prev) + Number(curr))
              } else {
                return Number(prev)
              }
            }, 0)
            sums[index] += ''
          } else if (column.property === 'emergencyNum') { //订应急数量
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return (Number(prev) + Number(curr))
              } else {
                return Number(prev)
              }
            }, 0)
            sums[index] += ''
          } else if (column.property === 'otherNum') { //其它数量
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return (Number(prev) + Number(curr))
              } else {
                return Number(prev)
              }
            }, 0)
            sums[index] += ''
          }
        })
        return sums
      },



      objectSpanMethods({
        row, //当前行、
        column, //当前列、
        rowIndex, //当前行索引
        columnIndex //当前列索引
      }) {

        // if (row.项目 == '总计') {
        //   if (columnIndex === 4) {
        //     //定位到6行4列的ID，告诉该单元格合并1行2列
        //     return [1, 2]
        //   }
        //   if (columnIndex === 5) {
        //     //定位到6行4列的ID，告诉该单元格合并1行2列
        //     return [0, 0]
        //   }
        // }

        // 判断列的属性
        if (this.mergeArr.indexOf(column.property) !== -1) {
          // 判断其值是不是为0
          if (this.mergeObj[column.property][rowIndex]) {
            return [this.mergeObj[column.property][rowIndex], 1]
          } else {
            // 如果为0则为需要合并的行
            return [0, 0];
          }
        }

      },
      showAdd(row) {
        this.title = "安瑞集团" + row.deptName + row.createTime + "配件库房一次性满足率统计表"

        req.getDetail(row.sid)
          .then(resp => {
            if (resp.success) {
              this.list = resp.data
              this.getSpanArr(this.list)
            }
          })
          .catch(e => {
            this.$emit('doback')
          })

      },
      // getSpanArr方法
      getSpanArr(data) {
        this.mergeArr.forEach((key, index1) => {
          let count = 0; // 用来记录需要合并行的起始位置
          this.mergeObj[key] = []; // 记录每一列的合并信息
          data.forEach((item, index) => {
            // index == 0表示数据为第一行，直接 push 一个 1
            if (index === 0) {
              this.mergeObj[key].push(1);
            } else {
              // console.log('>>>>>>>>>commodityCurrentChange', data[index - 1][key])
              // 判断当前行是否与上一行其值相等 如果相等 在 count 记录的位置其值 +1 表示当前行需要合并 并push 一个 0 作为占位
              if (item[key] === data[index - 1][key]) {
                this.mergeObj[key][count] += 1;
                this.mergeObj[key].push(0);
              } else {
                // 如果当前行和上一行其值不相等
                count = index; // 记录当前位置
                this.mergeObj[key].push(1); // 重新push 一个 1
              }

            }
          })
        })
      },

      handleReturn(isreload) {
        if (isreload === 'true') this.$emit('reloadlist')
        this.formobj = {

        }
        this.$emit('doback')
      }
    }
  }
</script>

<style scoped>

</style>
