<template>
  <div>
    <el-dialog
      title="设置显示字段"
      custom-class="table-colum-dailog"
      :visible.sync="visible"
      @close="cancel"
      width="600px"
    >
      <div class="checkwtip mBottom10">
        请选择您想显示的列表字段，最多勾选{{ max }}个选项，已经勾选了 <span
          class="curcheck"
        >{{ checkedFieldsCopy.length }}</span> 个
      </div>
      <el-checkbox-group
        v-model="checkedFieldsCopy"
        class="table-colum-wrap"
        :min="min"
        :max="max"
      >
        <el-checkbox
          v-for="(item, index) in fields"
          class="table-colum-item"
          :key="index"
          :label="item"
          :disabled="item.code==='name' || item.code==='memberName'"
        >
          {{ 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: 'ExportFieldsDialog',
  props: {
    min: 0,
    max: 8,
    fields: {
      type: Array,
      default: () => {
        return [];
      },
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data () {
    return {
      visible: false,
      checkedFieldsCopy: [],
    };
  },
  watch: {
    dialogVisible (n, o) {
      this.visible = n;
      if(!(this.fields && this.fields.length)){
        this.$message({
            message: "设置异常",
            type: "error"
          });
        return this.visible = false;
      }
      if (n) { 
        this.checkedFieldsCopy = this.fields.filter((item)=>{
          return item.check
        }); 
      }
    },
  },
  methods: {
    submitFields () {
      this.$emit('update:dialogVisible', false);
      this.$emit('submit', this.checkedFieldsCopy.map((item)=>{
        return item.code;
      }).join(','));
    },
    cancel () {
      this.$emit('update:dialogVisible', false);
    },
  },
};

</script>
<style lang="less" scoped>
.table-colum-wrap {
  display: flex;
  flex-wrap: wrap;
  width: 105%;
  .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>
