<template>
  <div>
    <el-table :data="tableData" border style="width: 100%" :header-cell-style="{'text-align': 'center'}" :cell-style="{'text-align': 'center'}" :span-method="objectSpanMethod">
      <el-table-column prop="category" label="《产品市场服务协议》指标描述"> </el-table-column>
      <el-table-column prop="subCategory" label="《市场服务包合同》指标描述"> </el-table-column>
      <el-table-column label="评价值">
        <template slot-scope="scope">
          <template v-if="scope.row.type === 'number'">
            <el-input-number v-model="scope.row.total" :disabled="scope.row.disabled" class="w100" :controls="false" :min="0"></el-input-number>
          </template>
          <template v-if="scope.row.type === 'percentage'">
            <div class="percent-number">
              <el-input-number
                v-model="scope.row.total"
                :disabled="scope.row.disabled"
                class="w100"
                :controls="false"
                :min="0"
                :max="scope.row.max"
                @change="e => percentageChange(e, scope.row)"
              /><span>%</span>
            </div>
          </template>
        </template>
      </el-table-column>
      <el-table-column label="单项评价总值">
        <template slot-scope="scope">
          <div class="percent-number"><el-input-number v-model="scope.row.percentageOfIndividualitems" disabled class="w100" :controls="false" :min="0" /><span>%</span></div>
        </template>
      </el-table-column>
      <el-table-column label="评价总值">
        <template slot-scope="scope">
          <div class="percent-number"><el-input-number v-model="scope.row.totalPercentage" disabled class="w100" :controls="false" :min="0" /><span>%</span></div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import tableData from './table1';
export default {
  data() {
    return {
      tableData: tableData
    };
  },
  methods: {
    initInfo(info) {
      const tableDataCopy = JSON.parse(JSON.stringify(tableData));
      this.tableData = tableDataCopy;
    },
    redemptionFn(redemptionResult) {
      const tableDataCopy = JSON.parse(JSON.stringify(tableData));
      tableDataCopy.forEach(item => {
        const curr = redemptionResult.find(iten => iten.itemId === item.itemId);
        if (curr) {
          item.total = curr.total;
        }
      });
      this.tableData = tableDataCopy;
      this.tableData.forEach(item => {
        this.percentageChange(item.total, item);
      });
    },

    percentageChange(e, item) {
      const label = item.category;
      const arr = this.tableData.filter(item => item.category === label);
      const sum = arr.reduce((total, item) => total + item.total, 0);
      this.tableData.forEach(item => {
        if (item.category === label) {
          item.percentageOfIndividualitems = sum;
        }
      });
      let sumA = this.tableData[0].percentageOfIndividualitems;
      let sumB = this.tableData[2].percentageOfIndividualitems;
      let sumC = this.tableData[6].percentageOfIndividualitems;

      const sumD = sumA * sumB * sumC;
      this.tableData.forEach(item => {
        item.totalPercentage = sumD / 10000;
      });
      this.$emit('totalPercentageChange', sumD);
    },
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0 || columnIndex === 3) {
        if (rowIndex === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        }
        if (rowIndex === 2) {
          return {
            rowspan: 4,
            colspan: 1
          };
        }
        if (rowIndex === 6) {
          return {
            rowspan: 1,
            colspan: 1
          };
        }
        return {
          rowspan: 0,
          colspan: 0
        };
      }
      if (columnIndex === 4) {
        if (rowIndex === 0) {
          return {
            rowspan: 7,
            colspan: 1
          };
        }
        return {
          rowspan: 0,
          colspan: 0
        };
      }
    },
    returnInfo() {
      return this.tableData;
    }
  }
};
</script>

<style lang="scss" scoped>
.percent-number {
  display: flex;
  align-items: center;

  span {
    color: #909399;
    position: absolute;
    right: 20px;
  }
}
</style>
