<template>
  <!-- 奖惩规则配置 -->
  <div class="app-container">
    <div class="red-text"><i class="el-icon-warning-outline"></i> 双击修改</div>
    <div class="table" v-loading="loading">
      <el-table
        v-if="!loading"
        ref="renewalTable"
        :data="wrapperDataList"
        row-key="id"
        :span-method="objectSpanMethod"
      >
        <el-table-column
          label="时户数要求"
          align="center"
          prop="title1"
          width="90"
          fixed
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope"
            ><div style="white-space: pre-wrap">
              {{ scope.row.title1 }}
            </div></template
          >
        </el-table-column>
        <el-table-column
          label="计划时户数N"
          align="center"
          :show-overflow-tooltip="true"
        >
          <el-table-column
            label="完成时户数X"
            align="center"
            prop="title2"
            width="160"
            fixed
            :show-overflow-tooltip="true"
          ></el-table-column>
        </el-table-column>
        <el-table-column
          v-for="(ite, i) in dataList"
          :key="i"
          :label="ite.remark"
          align="center"
          :show-overflow-tooltip="true"
        >
          <el-table-column
            v-for="(_ite, _i) in ite.children"
            :key="_i"
            :label="_ite.remark"
            align="center"
            :prop="`${ite.remark}_${_ite.remark}`"
            :show-overflow-tooltip="true"
          >
            <template slot="header" slot-scope="scope">
              <span @dblclick="handleBatchUpdate(scope.row)">
                {{ _ite.remark }}</span
              >
            </template>
            <template slot-scope="scope">
              <span
                v-if="
                  !curKey ||
                  curKey !=
                    `${ite.remark}_${_ite.remark}_${keys[scope.$index].text}`
                "
                class="text"
                @dblclick="
                  editVal(
                    `${ite.remark}_${_ite.remark}_${
                      keys[scope.$index]['text']
                    }`,
                    scope.row[
                      `${ite.remark}_${_ite.remark}_${
                        keys[scope.$index]['text']
                      }_obj`
                    ]
                  )
                "
              >
                {{
                  getVal(
                    scope.row[
                      `${ite.remark}_${_ite.remark}_${keys[scope.$index].text}`
                    ]
                  )
                }}</span
              >
              <el-input
                id="inputId"
                v-else
                type="number"
                v-model="editObj.amount"
                @blur="editChange"
                placeholder="请输入"
              ></el-input>
            </template>
          </el-table-column>
        </el-table-column>
        <div slot="append">
          <!-- class中出现了el-table字样的，为了复用el-table的样式 -->
          <table
            v-if="wrapperDataList.length != 0"
            cellspacing="0"
            cellpadding="0"
            border="0"
            class="el-table__body"
            style="width: 100%"
          >
            <tr ref="sum" class="el-table__row sum">
              <td
                ref="sum_cell"
                class="el-table__cell"
                style="width: 100%; padding: 10px"
              >
                <div>
                  1、未批准的300 时户数以内的计划停电，超出 300
                  时户数的，按超出部分每时户
                  10元对四级单位党政一把手及以下人员进行叠加考核。
                </div>
                <div>
                  2、已批准的超300时户数的计划停电，对超出计划时户数的，按超出部分每时户
                  20元对四级单位党政一把手及以下人员进行叠加考核。
                </div>
                <div>
                  3、因上级电网需求的计划停电，对超出计划时户数的，按以上原则对责任单位进行考核。
                </div>
              </td>
            </tr>
          </table>
        </div>
      </el-table>
    </div>
  </div>
</template>

<script>
import {
  getExamineCountyInfo,
  upPdmExamineCounty,
  saveBatch,
} from "@/api/powerdistribution/maintenance";
export default {
  data() {
    return {
      dataList: [],
      wrapperDataList: [],
      loading: true,
      keys: [
        {
          // key: "manageAmt",
          text: "党政一把手",
        },
        {
          // key: "manageAssistantAmt",
          text: "分管副经理",
        },
        {
          // key: "deptDirectorAmt",
          text: "部室主任",
        },
        {
          // key: "deptDirectorAssistantAmt",
          text: "部室分管主任",
        },
        {
          // key: "deptManageAmt",
          text: "部室责任专责",
        },
        {
          // key: "principAmt",
          text: "总负责人",
        },
        {
          // key: "workPrincipAmt",
          text: "直接责任人",
        },
        {
          // key: "ownerAmt",
          text: "设备主人",
        },
      ],
      curKey: null,
      editObj: {},
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getVal(val) {
      return val ?? "-";
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      getExamineCountyInfo().then((response) => {
        this.dataList = response.data;
        this.initKeys();
        this.loading = false;
        this.wrapperData();
      });
    },
    initKeys() {
      try {
        this.dataList.forEach((ite) => {
          if (ite.children && ite.children.length) {
            ite.children.forEach((c) => {
              if (c && c.examineCountyList) {
                this.keys = c.examineCountyList.map((e) => ({
                  text: e.roleNm,
                }));
                throw new Error();
              }
            });
          }
        });
      } catch (error) {}
    },
    wrapperData() {
      this.wrapperDataList = [];
      this.keys.forEach((obj, i) => {
        this.wrapperDataList.push({
          title1: "四级单位(县公司)考核金额单位:元",
          title2: obj.text,
          ...obj,
        });

        this.dataList.forEach((ite) => {
          if (ite.children && ite.children.length) {
            ite.children.forEach((c) => {
              this.wrapperDataList[i][`${ite.remark}_${c.remark}_${obj.text}`] =
                c.examineCountyList.find((e) =>
                  e.roleNm.includes(obj.text)
                )?.amount;
              this.wrapperDataList[i][
                `${ite.remark}_${c.remark}_${obj.text}_obj`
              ] = c.examineCountyList.find((e) => e.roleNm.includes(obj.text));
            });
          }
        });
      });
      this.loading = false;
    },
    editVal(key, row) {
      this.editObj = row;
      this.curKey = key;
      this.$nextTick(() => {
        let dom = document.getElementById("inputId");
        dom.focus();
      });
    },
    handleBatchUpdate(e) {},
    async editChange() {
      await upPdmExamineCounty({ ...this.editObj });
      this.curKey = null;
      this.editObj = {};
      this.loading = true;
      this.getList();
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0) {
          return {
            rowspan: this.wrapperDataList.length,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.table {
  height: calc(100% - 150px);
}
::v-deep {
  .el-table {
    height: 100%;
    width: 100%;
    .el-table__body-wrapper {
      width: 100% !important;
      height: calc(100% - 50px) !important; // 表格高度减去表头的高度
      overflow-y: scroll;
    }
  }
}
.text {
  cursor: pointer;
}
.red-text {
  color: red;
  margin-bottom: 5px;
}
</style>
