<template>
    <div class="eContainer-table-block">
      <div style="text-align: left" v-if="showButtonFlg" class="buttonDiv">
        <c-button
          icon="el-icon-s-tools"
          @click="clounmSetting"
          style="margin-right: 20px;margin-top: 10px;"
        ></c-button>
      </div>
      <el-table
        ref="table"
        :data="
          tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        style="width: 100%"
        class="eContainer-table"
        @selection-change="handleSelectionChange"
        :row-key="getRowKey"
        :header-cell-style="{
          background: 'rgb(235, 235, 235)',
          color: 'rgb(51, 51, 51)',
        }"
        :highlight-current-row="true"
        @row-click="rowClick"
        :border="true"
        max-height="380"
      >
        <el-table-column
          type="selection"
          width="55"
          v-if="showSelection"
          :reserve-selection="true"
        ></el-table-column>
  
        <c-table-column
          v-for="(item, key) in tableColumns"
          :key="key"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          sortable
        >
          <template v-slot="{ scope }">
            <!-- <template slot-scope="{ scope }"> -->
            <span>{{
              !item.render ? scope.row[item.prop] : item.render(item, scope)
            }}</span>
          </template>
        </c-table-column>
        <slot></slot>
      </el-table>
  
      <el-dialog
        class="showColumnDialog"
        :visible.sync="setColumnFlg"
        :title="'自定义列属性'"
        appenD-to-body
        v-if="showButtonFlg"
      >
        <el-form-item label-width="0" style="display: flex;
      align-items: center;">
          <el-checkbox-group v-model="columnGroup" @change="handleColumnChange">
            <el-checkbox
              class="selectColumnClass checkbox-left"
              style="margin-right:45px;"
              v-for="item in tableColumnsOrigin"
              :key="item.label"
              :label="parseInt(item.index)"
              >{{ item.label }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <span slot="footer" style="display: flex;
      align-items: center;">
          <el-checkbox
            class="selectAllClass checkbox-left"
            :indeterminate="
              columnGroup.length > 0 &&
              columnGroup.length < tableColumnsOrigin.length
            "
            v-model="selectAll"
            @change="setAll"
            >全选</el-checkbox
          >
          <el-button type="primary" @click="saveColumnEvent" style="margin-left:10px;">保存</el-button>
        </span>
      </el-dialog>
      <c-col :span="16">
      </c-col>
    </div>
  </template>
  
  
  <script>
  import CodeTable from "~/config/CodeTable";
  
  export default {
    props: {
      columns: {
        type: Array,
        default: () => {
          return [];
        },
      },
      list: {
        type: Array,
        default: () => {
          return [];
        },
      },
      showSelection: {
        type: Boolean,
        default: false,
      },
      paginationShow: {
        type: Boolean,
        required: false,
        default: true,
      },
      showButtonFlg: {
        type: Boolean,
        required: false,
        default: false,
      },
    },
    watch: {
      columns() {
        this.generateColumns();
      },
    },
    computed: {
      tableData() {
        // return this.list.map((row) => {
        // 	const res = {}
        //   const vals = row.split("\t");
        // 	for (let i = 0; i < vals.length; i++) {
        // 		res[`${i}`] = vals[i];
        // 	}
        // 	return res;
        // });
        const arr = [];
        for (let i = 0; i < this.list.length; i++) {
          const d = this.list[i];
          const items = d.split("\t");
          const it = {};
          for (let j = 0; j < this.tableColumns.length; j++) {
            const column = this.tableColumns[j];
            it[column["prop"]] = column.children
              .map((c) => items[c["idx"]] || " ")
              .join("\n");
          }
          it["IDX"] = i;
          it["INR"] = items[0];
          if (it["INR"].length < 8) {
            it["INR"] = items[1];
          }
          it.srcStr = d;
          arr.push(it);
        }
        this.currentPage = 1;
        return arr;
      },
    },
    data() {
      return {
        tableColumnsOrigin: [],
        tableColumns: [],
        currentPage: 1,
        pageSizes: [5, 10, 20, 30, 40, 50, 100],
        pageSize: 10,
        selectAll: true,
        columnGroup: [],
        setColumnFlg: false,
        codes: {
          ...CodeTable,
        },
      };
    },
    mounted() {
      this.generateColumns();
    },
    methods: {
      generateColumns() {
        const columnArr = [];
        const lines = this.columns;
        const etyReg = /\"([^\"]*)\"/;
        const obj = {};
        for (let i = 0; i < lines.length; i++) {
          const line = lines[i];
          if (typeof line === "object") {
            //如果是对象，支持自定义处理
            //{width,position,index,label,pattern,render}
            let { width, position, index, label, pattern, render, ...rest } =
              line;
            position += "";
            if (!obj[position]) {
              obj[position] = [];
            }
            obj[position].push({
              idx: index,
              prop: label,
              // width:width+'px',
              width: width === "auto" ? width : width + "px",
              pattern,
              render,
              ...rest,
            });
            continue;
          }
          if (etyReg.test(line)) {
            const gs = line.match(etyReg);
            const columnName = gs[1];
            const newLine = line.replace(gs[0], "_");
            const colPropArr = newLine.split(" ");
            const positionArr = colPropArr[1].split(":");
            if (!obj[positionArr[0]]) {
              obj[positionArr[0]] = [];
            }
            obj[positionArr[0]].push({
              idx: colPropArr[0],
              prop: columnName,
              // width: colPropArr[3] + 'px',
              width:
                colPropArr[3] === "auto" ? colPropArr[3] : colPropArr[3] + "px",
            });
          }
        }
        for (const k in obj) {
          if (Object.hasOwnProperty.call(obj, k)) {
            const o = obj[k];
            const tableColumn = o.map((item) => item.prop).join("\n");
            let colInfo = {
              prop: tableColumn,
              label: tableColumn,
              width: o[0].width,
              // width: "auto",
              index: k,
              children: o,
            };
            //支持自定义处理
            if (o.length == 1) {
              if (o[0].pattern && this[o[0].pattern]) {
                colInfo.render = this[o[0].pattern];
                colInfo.code = o[0].code;
              } else if (o[0].render) {
                colInfo.render = o[0].render;
              }
            }
            columnArr.push(colInfo);
          }
        }
        const arr = columnArr.sort((a, b) => {
          return parseInt(a.index) - parseInt(b.index);
        });
        this.tableColumnsOrigin = arr;
        this.tableColumns = arr;
        this.columnGroup = arr.map((item) => parseInt(item.index));
        return arr;
      },
      sizeChange(size) {
        this.pageSize = size;
      },
      currentChange(currentPage) {
        this.currentPage = currentPage;
      },
      handleSelectionChange(val) {
        this.$emit("multipleSelect", this.getSelectedRowIndex(val));
      },
      getRowKey(row) {
        return row["IDX"];
      },
      getSelectedRowIndex(val) {
        const indexArr = [];
        for (let j = 0; j < val.length; j++) {
          const v = val[j];
          for (let i = 0; i < this.tableData.length; i++) {
            const data = this.tableData[i];
            if (v["IDX"] === data["IDX"]) {
              indexArr.push(i);
            }
          }
        }
        return indexArr;
      },
      // 行点击，设置高亮
      rowClick(row, column, event) {
        this.$refs.table.setCurrentRow(row);
        this.$emit("chooseRowEvent", row);
      },
      clounmSetting() {
        this.setColumnFlg = true;
      },
      saveColumnEvent() {
        this.setColumnFlg = false;
        const arr = this.columnGroup.map((idx) => parseInt(idx));
        arr.sort((a, b) => a - b);
        this.columnGroup = arr;
        this.tableColumns = this.columnGroup.map(
          (index) => this.tableColumnsOrigin[parseInt(index) - 1]
        );
      },
      setAll(val) {
        this.columnGroup = val
          ? this.tableColumnsOrigin.map((item) => parseInt(item.index))
          : [];
      },
      handleColumnChange() {
        this.selectAll =
          this.tableColumnsOrigin.length === this.columnGroup.length;
      },
  
      //补充自定义列处理函数
      //去掉日期的时分秒毫秒
      date(item, scope) {
        let value = scope.row[item.prop];
        if (!value) {
          return "";
        }
        let idx = value.indexOf(" ");
        if (idx > 0) return value.substring(0, idx);
        return value;
      },
      //code映射
      code(item, scope) {
        let value = scope.row[item.prop];
        let code = item.code;
        if (typeof code == "string") {
          code = this.codes[code];
        }
        if (!value || !code) {
          return "";
        }
        let em = code.find((item) => item.value.trim() == value.trim());
        if (!em) {
          return value;
        }
        return em.label;
      },
      //去掉时间的毫秒
      time(item, scope) {
        let value = scope.row[item.prop];
        if (!value) {
          return "";
        }
        let idx = value.indexOf(".");
        if (idx > 0) return value.substring(0, idx);
        return value;
      },
      //日期格式化
      dateFormat(item, scope) {
        let value = scope.row[item.prop];
        if (!value) {
          return "";
        }
        return (
          value.substring(0, 4) +
          "-" +
          value.substring(4, 6) +
          "-" +
          value.substring(6)
        );
      },
    },
  };
  </script>
  
  <style scoped>
  .eContainer-table-block {
    margin-top: 15px;
    position: relative;
  }
  .eContainer-table-block .paginationLable {
    font-size: 12px;
    color: #808080;
    height: 26px;
    line-height: 26px;
    float: right;
    /* margin-top: 20px; */
  }
  .eContainer-table-block .el-table__body-wrapper {
    overflow: auto;
  }
  .el-table .warning-row {
    background: oldlace;
  }
  .el-table .success-row {
    background: #f0f9eb;
  }
  .selectColumnClass .el-checkbox__label {
    width: 67px;
    font-size: 13px;
  }
  .selectAllClass .el-checkbox__label {
    width: 30px;
    font-size: 13px;
    padding-left: 5px;
  }
  .eContainer-table-block >>> .el-table .cell {
    white-space: pre-wrap;
  }
  .eContainer-table-block >>> .el-dialog .el-dialog__footer {
    display: flex;
      justify-content: center;
  }
  .buttonDiv {
    text-align: left;
    display: inline-block;
    margin: 0;
    margin-top: -3px;
    position: absolute;
    z-index: 999;
    right: 5px;
    padding-top: 3px;
  }
  </style>