<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">
          <div style="display: flex;align-items: center;flex-wrap: wrap">
            <i
              class="el-icon-star-on"
              style="
              height: 30px;
              line-height: 30px;
              font-size: 25px;
              margin-right: 7px;
            "
              v-show="btnShowHandle(interfaceList,true)"
              @click="cancellation(interfaceList)"
            ></i>
            <i
              class="el-icon-star-on"
              style="
              height: 30px;
              line-height: 30px;
              font-size: 25px;
              margin-right: 7px;
              color: #808080;
            "
              v-show="btnShowHandle(interfaceList,false)"
              @click="selectAllButton(interfaceList)"
            ></i>
            <el-checkbox v-model="item.check" v-for="item in interfaceList">{{ item.name }}</el-checkbox>
          </div>

        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { GetAllBilldata, GetAllBillDataPepedom } from "@/api/apis/jurisdiction";
import config from '@/views/doraChunk/config/indexChunkConfig'
export default {
  data() {
    return {
      tableData: [
        {
          billName: '数据权限控制',
          dataList: config.config.map((item) => {
            let obj = {
              id: item.componentName,
              name: item.name
            }
            return obj
          }),
          buttonList: [],

        }
      ],
      selectedList: [],
      interfaceList:[],

    };
  },

  created() {
    this.init();
  },

  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()
      })
    },
    async init() {
      console.log(this.tableData,'23')
    },
  },
};
</script>
<style scoped lang="scss"></style>
