<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      style="width: 100%"
      :show-header="false"
    >
      <el-table-column prop="billName" label="模块" width="120">
      </el-table-column>
      <el-table-column prop="dataList" label="字段">
        <template slot-scope="scope">
          <i
            class="el-icon-star-on"
            style="
              height: 30px;
              line-height: 30px;
              font-size: 25px;
              margin-right: 7px;
            "
            v-show="btnShowHandle(homeList,true)"
            @click="cancellation(homeList)"
          ></i>
          <i
            class="el-icon-star-on"
            style="
              height: 30px;
              line-height: 30px;
              font-size: 25px;
              margin-right: 7px;
              color: #808080;
            "
            v-show="btnShowHandle(homeList,false)"
            @click="selectAllButton(homeList)"
          ></i>
          <el-checkbox v-model="item.check" v-for="item in homeList">{{ item.name }}</el-checkbox>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import config from '@/views/doraChunk/config/indexChunkConfig.js'
import { mapMutations } from 'vuex'

export default {
  data() {
    return {
      tableData: [
        {
          billName: '首页拖拽模块',
          dataList: config.config.map((item) => {
            let obj = {
              id: item.componentName,
              name: item.name
            }
            return obj
          }),
          buttonList: []

        }
      ],
      selectedList: '',
      homeList: []
    }
  },

  created() {
  },

  components: {},

  computed: {},

  mounted() {
  },

  beforeUpdate() {
    this.handleTabClick()
  },

  methods: {
    //判断全选是否显示
    btnShowHandle(list, flag = false) {
      if (!list.length) return false
      let flagResult = list.every(item => {
        return item.check
      })
      if (flag) {
        return flagResult
      } else {
        return !flagResult
      }
    },
    selectAllButton(item) {
      console.log(item)
      item.forEach(item => {
        item.check = true
      })
    },
    cancellation(item) {
      item.forEach(item => {
        item.check = false
      })
    },
    handleTabClick() {
      this.$nextTick(() => {
        this.$refs.multipleTable && this.$refs.multipleTable.doLayout()
      })
    }
  },
  watch: {
    selectedList(newV, oldV) {
      let tempArr = newV.split(',')
      this.tableData[0].buttonList = tempArr
    }
  }
}
</script>
<style scoped lang="scss"></style>
