<template>
  <div>
    <el-dialog title="设置显示字段" custom-class="table-colum-dailog" :visible.sync="dialogVisible"
      @close="cancel" width="600px">
      <div class="checkwtip mBottom10">请选择您想显示的列表字段，最多勾选8个选项，已经勾选了 <span
          class="curcheck">{{ checkedFieldsCopy.length }}</span> 个</div>
      <el-checkbox-group v-model="checkedFieldsCopy" class="table-colum-wrap" :min="0" :max="8">
        <el-checkbox v-for="(item, index) in memberFields" class="table-colum-item" :key="index"
          :label="item.code" :disabled="item.code==='name'">{{item.name}}</el-checkbox>
      </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submitFields">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "tableColumDailog",
  props: {
    checkedFields: {
      type: Array,
      default: () => {
        return [];
      }
    },
    memberFields: {
      type: Array,
      default: () => {
        return [];
      }
    },
    dialogVisible: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      checkedFieldsCopy: []
    };
  },
  methods: {
    submitFields() {
      this.$emit('update:dialogVisible', false);
      this.$emit('submit', this.checkedFieldsCopy.join(","));
    },
    cancel() {
      this.checkedFieldsCopy = [].concat(this.checkedFields);
      this.$emit('update:dialogVisible', false);

    }
  },
  watch: {
    dialogVisible(n, o) {
      if (!!n)
        this.checkedFieldsCopy = [].concat(this.checkedFields);
    }
  }

};

</script>
<style lang="less" scoped>
.table-colum-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  .table-colum-item {
    flex: 25%;
    line-height: 35px;
  }
  .table-colum-item + .table-colum-item {
    margin-left: 0;
  }
}
</style>
<style lang="less">
// 去除dailog-footer上边框
.table-colum-dailog .el-dialog__footer {
  border-top: none !important;
}
.table-colum-dailog .el-checkbox:last-of-type {
  margin-right: 30px;
}
</style>