<template>
  <div>
    <el-button @click="setHandler">设置</el-button>
    <el-dialog
      :close-on-click-modal="false"
      class="pub_dialog"
      title="超级表头设置"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <el-container>
        <el-header height="45px" style="text-align:right;padding:5px">
          <el-button type @click="addRow">添加</el-button>
          <el-button type @click="delHandler">删除</el-button>
        </el-header>
        <el-main>
          <el-table
            ref="tableColSuperHeader"
            :data="dataList"
            style="width: 100%"
            highlight-current-row
            @selection-change="handleSelectionChange"
          >
            <el-table-column label="选择" width="60" align="center" type="selection"></el-table-column>
            <el-table-column label="名称" width="230" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.name"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="宽度占几列" width="220" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.cols"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="第几行" width="230" align="center">
              <template slot-scope="scope">
                <el-select v-model="scope.row.rows">
                  <el-option
                    v-for="item in lineOpts"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
        <el-footer height="45px" style="text-align:center;padding:5px">
          <el-button type="primary" @click="okHandler" size="mini">保存</el-button>
          <el-button @click="dialogVisible = false" size="mini">取消</el-button>
        </el-footer>
      </el-container>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "TableColSuperHeader",
  props: {
    dictCode: String,
    modelData: String,
  },
  data() {
    return {
      dialogVisible: false,
      multipleSelection: [],
      lineOpts: [
        {
          value: "first",
          label: "第一行",
        },
        {
          value: "second",
          label: "第二行",
        },
        {
          value: "third",
          label: "第三行",
        },
        {
          value: "fourth",
          label: "第四行",
        },
        {
          value: "fifth",
          label: "第五行",
        }
      ],
      dataList: []
    };
  },
  computed: {
  },
  methods: {
    getId() {
      return (
        "_" +
        Number(Math.random().toString().substr(3, 3) + Date.now()).toString(36)
      );
    },
    handleSelectionChange(value) {
      console.log("before :>> ", this.multipleSelection);
      this.multipleSelection = value;
      console.log("after :>> ", this.multipleSelection);
    },
    addRow() {
      this.dataList.push({
        id: this.getId(),
        name: '',
        rows: 'first',
        cols: ''
      });
    },
    okHandler() {
      let result = [];
      let firstResult = [], secondResult = [], thirdResult = [], fourthResult = [], fifthResult = [];
      for (let i in this.dataList) {
        switch (this.dataList[i].rows){
          case 'first':
            firstResult.push({
              name: this.dataList[i].name,
              rows: this.dataList[i].rows,
              cols: this.dataList[i].cols
            });
            break;
          case 'second':
            secondResult.push({
              name: this.dataList[i].name,
              rows: this.dataList[i].rows,
              cols: this.dataList[i].cols
            });
            break;
          case 'third':
            thirdResult.push({
              name: this.dataList[i].name,
              rows: this.dataList[i].rows,
              cols: this.dataList[i].cols
            });
            break;
          case 'fourth':
            fourthResult.push({
              name: this.dataList[i].name,
              rows: this.dataList[i].rows,
              cols: this.dataList[i].cols
            });
            break;
          case 'fifth':
            fifthResult.push({
              name: this.dataList[i].name,
              rows: this.dataList[i].rows,
              cols: this.dataList[i].cols
            });
            break;
        }
      }
      if(firstResult.length > 0) result.push(firstResult);
      if(secondResult.length > 0) result.push(secondResult);
      if(thirdResult.length > 0) result.push(thirdResult);
      if(fourthResult.length > 0) result.push(fourthResult);
      if(fifthResult.length > 0) result.push(fifthResult);
      this.$emit("set-value", this.dictCode, JSON.stringify(result));
      this.dialogVisible = false;
    },
    setHandler() {
      this.dialogVisible = true;
      this.dataList = this.initDataList();
    },
    initDataList() {
      let result = [];
        if (this.modelData) {
        let modelDataObj = eval(this.modelData);
        for (var i in modelDataObj) {
         for(var j in modelDataObj[i]){
           result.push({
             id: this.getId(),
             "name": modelDataObj[i][j].name,
             "rows": modelDataObj[i][j].rows,
             "cols": modelDataObj[i][j].cols,
           });
         }
        }
      }
      return result;
    },
    delHandler() {
      let me = this;
      if (!this.multipleSelection || this.multipleSelection.length == 0) {
        this.$message.warning("请选择要删除的记录！");
        return;
      }

      me.multipleSelection.forEach(function (item) {
        for (let i = 0; i < me.dataList.length; i++) {
          if (me.dataList[i].id == item.id) {
            me.dataList.splice(i, 1);
            i--;
          }
        }
      });

      me.multipleSelection = [];
      this.$refs.tableColSuperHeader.clearSelection();
    },
  },
};
</script>
<style lang="scss">
.pub_dialog {
  display: flex;
  justify-content: center;
  align-items: Center;
  overflow: hidden;
  .el-dialog {
    margin: 0 auto !important;
    height: 90%;
    overflow: hidden;
    .el-dialog__body {
      position: absolute;
      left: 0;
      top: 54px;
      bottom: 0;
      right: 0;
      padding: 0;
      z-index: 1;
      overflow: hidden;
      overflow-y: auto;
    }
  }
}
</style>
