<template>
  <div class="xd-checkbox-box">
    <el-checkbox-group
      v-model="check"
      @input="handleChange"
      :disabled="disabled"
    >
      <el-checkbox
        v-for="(item,index) in checkList"
        :key="index"
        :label="item.value"
        :disabled="item.disabled || false"
      ><span v-html="item.label"></span></el-checkbox>
    </el-checkbox-group>
  </div>

</template>

<script>
  /**
   * @description 复选框-多选选项
   * 依赖于 element-ui
   * 参考网站如下：
   * https://element.eleme.io/#/zh-CN/component/checkbox
   * 文档：https://www.npmjs.com/package/gxd-helper
   *
   * @property {Array} defauleValue 已经选中数据 （选填） 默认：[]
   * @property {Object| Array| null} list 列表显示数据 （必选） 默认：null
   * @property {Boolean} disabled 是否禁用 （必选） 默认：false
   *
   * @event {Function} change 选中改变事件 参数：(value， select)
   */

  import emitter from 'element-ui/src/mixins/emitter';
  export default {
    name: "XdCheckList",
    props:{
      defaultValue:{
        type: Array,
        default(){
          return []
        },
      },
      list: {
        type: Object| Array| null,
        default: null
      },
      isSort:{
        type:Boolean,
        default:false
      },
      disabled: {
        type: Boolean,
        default: false,
      },
    },
    mixins:[
      emitter
    ],
    data(){
      return {
        checkList: [],
        check: [],
        testData: [
          {"label": "中国电信", "value": 1},
          {"label": "中国移动", "value": 2},
          {"label": "中国联通", "value": 3},
        ]
      }
    },
    created() {
      this.init();
    },


    watch:{
      list(){
        this.init();
      },
    },



    methods:{
      init(){
        if (this.list === null) this.checkList = this.$xdHelper.cloneDeep(this.testData);
        else this.checkList = this.$xdHelper.cloneDeep(this.list);
        if(this.$xdHelper.checkVarType(this.defaultValue) === 'array') this.check = this.defaultValue;
        console.log('init',this.checkList, this.defaultValue );
        if(this.checkList.length > 0) this.handleChange();
      },

      checkParams() {
        //按照选中数据进行返回
        if(this.isSort === false) {
          return this.check.filter(value=>{
            return this.checkList.filter(item=>{
              return value === item.value;
            }).length > 0
          });
        }
        //按照列表顺序返回数据
        else {
          return this.checkList.filter(item=>{
            return this.check.includes(item.value)
          }).map(item=>item.value);
        }

      },

      handleChange(){
        console.log(this.checkList, this.checkParams())
        debugger
        this.$emit('input', this.checkParams());
        this.$emit('change', this.checkParams());
        if (this.$parent.$options['componentName'] === 'ElFormItem') {
          this.dispatch('ElFormItem', 'el.form.change', [this.checkParams()]);
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  .xd-checkbox-box {
    line-height: 36px;
    & ::v-deep .el-checkbox-group {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
    }
  }

</style>
