<!-- 代替树形的checkbox 左右半联动 具体看组件使用页 (沈博 2022年12月19日12:57:44) -->
<template>
  <div class="out-div">
    <div class="item-div">
      <div style="display: flex;align-items: center;justify-content: right">
        {{ item[name] }}
        <Checkbox style="margin-bottom: 0 !important;padding-left: 5px;" v-model="checkedData" @on-change="changeMaster"
                  :disabled="disabled"></Checkbox>
      </div>
      <div></div>
      <div style="padding:5px;">
        <div v-for="(fItCld,fIndexCld) in data" :key="fIndexCld" style="width: 135px;height: 26px">
          <Checkbox v-model="fItCld.checked" @on-change="changeItem" :disabled="disabled">{{
              fItCld[name]
            }}
          </Checkbox>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'master-slave-checkbox',
  props: {
    item: {
      type: Object,
      default: {}
    },
    childData: {
      type: Array,
      default: () => []
    },
    name: {
      type: String,
    },
    checked: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      data: [],
      itemData: null,
      checkedData: false,
      clickItemFlag: false,  // 是否点击子项
    }
  },
  watch: {
    data: {
      handler(val) {
        this.data = val
        this.$emit('input', val)
        this.$emit('on-change')
      },
      deep: true
    },
    checked(n, o) {
      this.checkedData = n;
      if (!this.clickItemFlag) {
        // 需要把对应的子级勾上
        this.data.update(this.itemData, 'id', 'checked', 'parentId')
        this.$forceUpdate()
      }
    },
  },
  methods: {
    /**
     * @desc   : 选择主项事件
     * @author : 周兴
     * @date   : 2022/12/29 10:50
     */
    changeMaster(flag) {
      this.itemData.checked = flag;
      this.data.update(this.itemData, 'id', 'checked', 'parentId')
      this.$forceUpdate()
    },
    /**
     * @desc   : 选择子项事件
     * @author : 周兴
     * @date   : 2022/12/29 11:03
     */
    changeItem(flag) {
      // 勾上子项，父级也要勾上
      if (flag) {
        this.clickItemFlag = true;
        this.itemData.checked = true;
        this.$forceUpdate()
      }
    }
  },
  mounted() {
    this.data = this.childData;
    this.itemData = this.item;
    this.checkedData = this.checked;
  }
}
</script>

<style scoped>
.out-div {
  /*border: 1px solid #b6b6b6;*/
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.item-div {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #b6b6b6;
  overflow-y: hidden;
}


.item-div:nth-child(1n) {
  background: #f8f8f9;
}

.item-div:nth-child(2n) {
  background: #fff;
}


.item-div > div:nth-child(1) {
  width: 12%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-div > div:nth-child(2) {
  width: 1%;
  border-right: 1px solid #b6b6b6;
  margin-left: -1.7%;
}

.item-div > div:nth-child(3) {
  width: 86%;
  display: flex;
  flex-wrap: wrap;
}
</style>
