<!-- @desc:el-collapse-item的扩展，为了加上checkbox  @auth:周兴  @time:2022/12/29 14:40 -->
<template>
  <div>
    <el-collapse-item :title="title" :name="name" ref="collapseItem">
      <template slot="title">
        {{ title + '\u3000' }}
        <div @click.stop>
          <Checkbox style="margin-bottom: 0 !important;" v-model="checkedData" @on-change="handleChange"
                    :disabled="disabled"></Checkbox>
        </div>
      </template>
      <slot></slot>
    </el-collapse-item>
  </div>
</template>

<script>
export default {
  name: "dk-el-collapse-item",
  props: {
    title: {
      type: String,
    },
    name: {
      type: [String, Number],
    },
    id: {
      type: [String, Number],
    },
    checked: {
      type: Boolean,
      default: false
    },
    childFlag: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    checked(n, o) {
      this.checkedData = n;
      this.handleChange(n);
    }
  },
  data() {
    return {
      checkedData: false,
    }
  },
  methods: {
    /**
     * @desc   : 改变checkbox
     * @author : 周兴
     * @date   : 2022/12/29 16:50
     */
    handleChange(e) {
      this.$emit('on-change', e, this.id)
    },
  },
  mounted() {
  },
  created() {
    this.checkedData = this.checked;
  }
}
</script>

<style scoped>
.item-check-box {
  position: absolute;
}
</style>
