<template>
  <div class="merge-table">
    <table class="table table-bordered el-table el-table--fit el-table--scrollable-x el-table--enable-row-hover el-table--enable-row-transition">
      <thead class="is-group has-gutter">
        <tr v-for="(row, index) in tableHeader" :key="index">
          <th
            v-for="(cell, i) in row"
            :key="i"
            :rowspan="cell.rowspan"
            :colspan="cell.colspan"
            class="el-head-cell"
          >{{ cell.text }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item,index) in bodyData" :key="index" class="el-table__row">
          <template v-for="(score, i) in item.td">
            <td v-if="typeof(score)=='string'" :key="i" :style="{ height: (28 * item.rowspan) + 'px', textAlign: 'center'}" class="el-table__cell">
              {{ score }}
            </td>
            <slot v-else-if="score.custom" name="own-td" />
          </template>

        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'SplitTable',

  props: {
    tableHeader: {
      type: Array,
      default: () => []
    },

    bodyData: {
      required: true,
      type: Array,
      default: () => []
    },

    checkFlag: {
      type: Boolean,
      default: true
    },

    tableEditFlag: {
      type: Boolean,
      default: true
    },

    operFlag: {
      type: Boolean,
      default: true
    }
  },

  data() {
    return {
      checkTotal: false,
      checkArr: [],
      multipleData: [],
      multipleIndex: []
    }
  },

  created() {
  },

  methods: {
  // 总的check切换
    checkTotalSwitch(val) {
      setTimeout(() => {
        this.checkArr.map((item, index) => {
          this.$set(this.checkArr, index, this.checkTotal)
        })
        // 判断是否全选
        if (this.checkTotal) {
          this.multipleData = this.bodyData
        } else {
          this.multipleData = []
        }
        // 将multipleData值传入父组件
        this.$emit('multipleData', this.multipleData)
      }, 2)
    },

    // 单个check切换
    checkSwitch(val, valIndex) {
      setTimeout(() => {
        this.checkTotal = val.every(item => {
          return item === true
        })
        // 将选中的项取出来,通过索引取项
        if (val[valIndex]) {
          this.multipleIndex.push(valIndex)
          this.multipleIndex = this.multipleIndex.sort()
        } else {
          this.multipleIndex.splice(valIndex, 1)
        }
        this.multipleIndex.map((item, index) => {
          this.$set(this.multipleData, index, this.bodyData[item])
        })
        // 将multipleData值传入父组件
        this.$emit('multipleData', this.multipleData)
      }, 0)
    },

    // 编辑失焦
    blurEditInp(index, key, arrIndex, e) {
      if (arrIndex !== false) {
        this.$set(this.bodyData[index][key], arrIndex, e.target.value)
      } else {
        this.bodyData[index][key] = e.target.value
      }
      // 将编辑的值传入父组件
      this.$emit('editData', this.bodyData)
    }
  }

}
</script>

<style scoped>
.merge-table {
  table {
    border-spacing: 0;
    border-collapse: collapse;
  }
  td {
    border: 1px solid;
    height: 28px;
    padding: 0 4px;
  }
  .table-bordered > thead > tr > th,
  .table-bordered > tbody > tr > th,
  .table-bordered > tfoot > tr > th,
  .table-bordered > thead > tr > td,
  .table-bordered > tbody > tr > td,
  .table-bordered > tfoot > tr > td {
    border-color: #d2d6de;
  }
  table thead th.el-head-cell {
    border: 1px solid;
    background-color: #F5F7FA;
    padding: 0 4px;
    height: 28px;
    border-color:#d2d6de;
  }
}
</style>
