<template>
  <div class="custom-box inner-custom-box">
    <div class="flex-up-down mt-20 ml-35">
      <div class="blue-block" />
      <el-checkbox v-model="allCheck">列表展示内容</el-checkbox>
    </div>
    <div class="mt-18 ml-50">
      <el-row v-for="(item, index) in chunks"
        :key="'p_' + index"
        type="flex"
        :gutter="10"
      >
        <el-col v-for="(i, k) in item" :key="k" :span="span">
          <el-checkbox v-model="i.value">{{ i.label }} </el-checkbox>
        </el-col>
      </el-row>
    </div>
    <div class="bottom-box flex-box">
      <button
        class="save-btn blue-btn"
        @click="onSave"
      >
        保存
      </button>
      <button
        class="reset-btn gray-btn ml-27"
        @click="allCheck=false"
      >
        重置
      </button>
    </div>
  </div>
</template>

<script>
/**
 * 设置列表显示、隐藏字段表单
 */
export default {
  name: 'CustomFieldForm',
  props: {
    customField: {
      type: Object,
      default: () => {}
    },
    column: {
      type: Number,
      default: 4
    },
    span: {
      type: Number,
      default: 6
    }
  },
  data() {
    return {
      allCheck: false,
      localCustomField: this.$lodash.cloneDeep(this.customField)
    }
  },
  computed: {
    chunks() {
      return this.$lodash.chunk(Object.values(this.localCustomField), this.column)
    }
  },
  watch: {
    allCheck(n) {
      Object.keys(this.localCustomField).map(key => {
        this.localCustomField[key].value = n
      })
      this.$emit('on-change', this.localCustomField)
    }
  },
  created() {
    let flag = true
    Object.keys(this.localCustomField).forEach((item) => {
      console.log(this.localCustomField[item].value)
      if (this.localCustomField[item].value === false) {
        flag = false
      }
    })
    this.allCheck = flag
  },
  methods: {
    onChange() {
      this.$emit('on-change', this.localCustomField)
    },
    onSave() {
      this.$emit('on-save')
    }
  }
}
</script>

<style scoped lang="scss">
.inner-custom-box {
  overflow: hidden !important;
}
.bottom-box {
  margin-top: 26px;
  margin-bottom: 18px;
}
.el-row {
  margin-bottom: 10px;
}
</style>
