<template>
<el-form
    :label-position="tPosition"
    :label-width="tWidth">
  <el-form-item :label="title">
      <el-checkbox
        v-for="(item, index) in cCheckList"
        :key="index"
        :checked="item.checked"
        :disabled="item.disable"
        :label="item.value"
        @change="onChange(item, index)"
      ></el-checkbox>
  </el-form-item>
</el-form>
</template>
<script>
export default {
  name: "HmElementCheckbox",
  props: {
    /**
     * 标题
     */
    title: {
      type: String,
      default: "标题:",
    },
    /**
     * 标题宽度
     */
    tWidth: {
      type: String,
      default: "80px",
    },
    /**
     * 标题位置
     * @type Enum
     * @options ["top","left","right"]
     */
    tPosition: {
      type: String,
      default: "right",
    },
    /**
     * 数据内容
     */
    checkList: {
      type: Array,
      default: function () {
        return [
          {
            key: 1,
            checked: true,
            disable: false,
            value: "A",
          },
          {
            key: 2,
            checked: false,
            disable: false,
            value: "B",
          },
        ];
      },
    },
  },
  data() {
    return {
      cCheckList: [
        {
          id: 1,
          checked: true,
          disable: false,
          value: "A",
        },
        {
          id: 2,
          checked: false,
          disable: false,
          value: "B",
        },
      ],
    };
  },
  watch: {
    checkList(value) {
      this.cCheckList = value;
    },
  },
  mounted() {
    this.cCheckList = this.checkList;
  },
  methods: {
    onChange: function (e, index) {
      this.value=e.value;
      this.$emit("update:value", this.value);
      this.$emit("onChange", e, index);
      console.log("e", e, index);
      this.cCheckList[index].checked = !this.cCheckList[index].checked;
    },
  },
};
</script>