<template>
    <div>
        <CheckboxGroup class="check-style">
            <Checkbox :indeterminate="indeterminate"
                      :value="checkAll"
                      :label="singleList.id"
                      :disabled="disabledList"
                      @click.prevent.native="handleCheckAll(singleList.child)">
                <span>{{singleList.name}}</span>
            </Checkbox>
        </CheckboxGroup>
        <div class="check-child">
            <Checkbox v-for="single in singleList.child"
                      v-model="single.flag"
                      :disabled="disabled"
                      :key="single.id"
                      @on-change="handleChild(single)">
                <span v-if="single.end_flag === 0">{{single.name}}</span>
                <del v-if="single.end_flag === 1">{{single.name}}</del>
                <span class="out-time" v-if="single.end_flag === 1">（已过期）</span>
            </Checkbox>
        </div>
    </div>
</template>

<script>
export default {
  name: 'checkList',
  props: {
    bindData: {
      type: Array,
      default: () => {
        return []
      }
    },
    singleList: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      disabled: false, // 孩子节点不可选中
      disabledList: false, // 全选不可选中
      indeterminate: false, // 全选按钮有孩子选中时样式状态
      checkAll: false
    }
  },
  methods: {
    // 点击全选时处理
    handleCheckAll (val) {
      // 针对预绑定数据不可选中的处理（防止取消全选）
      let flag = true
      val.forEach(item => {
        if (item.id === '29' || item.id === '30') {
          flag = false
        }
      })
      if (flag) {
        this.checkAll = this.indeterminate ? false : !this.checkAll
        this.indeterminate = false
        this.singleList.flag = this.checkAll
        val.forEach(item => {
          item.flag = this.singleList.flag === true
        })
      }
    },
    handleChild (data) {
      let count = 0
      this.singleList.child.forEach(item => {
        if (item.flag === true) {
          count++
        }
      })
      if (count === this.singleList.child.length) {
        this.indeterminate = false
        this.checkAll = true
        this.singleList.flag = true
      } else if (count > 0) {
        this.indeterminate = true
        this.checkAll = false
        this.singleList.flag = true
      } else {
        this.indeterminate = false
        this.checkAll = false
        this.singleList.flag = false
      }
    },
    // 预先处理
    preHandle () {
      // 初始化
      this.checkAll = false
      this.indeterminate = false
      this.singleList.flag = false
      this.singleList.child.forEach(item => {
        item.flag = false
      })
      // 已绑定数据处理
      this.bindData.forEach(item => {
        // 二级节点
        if (this.singleList.id === item.id) {
          // console.log('找到', this.singleList.name)
          this.checkAll = true
          this.singleList.flag = true
        }
        // 三级节点
        this.singleList.child.forEach(itemChild => {
          if (itemChild.id === item.id) {
            // console.log('找到', itemChild.name)
            itemChild.flag = true
          }
        })
      })
      // 默认绑定数据处理(27-我的面板（一级） 28-个人信息（二级） 29-个人信息（三级） 30-修改密码（三级）)
      if (this.singleList.id === '28') {
        this.disabledList = true
        this.checkAll = true
        this.singleList.flag = true
      }
      this.singleList.child.forEach(item => {
        if (item.id === '29' || item.id === '30') {
          this.disabled = true
          item.flag = true
        }
      })
    }
  },
  mounted () {
    // console.log('初始化')
  },
  watch: {
    bindData (val) {
      this.preHandle()
      // console.log('数据', this.singleList)
    }
  }
}
</script>

<style scoped>
    .check-style {
        border-bottom: 1px solid #e9e9e9;
        padding-bottom: 6px;
        margin-bottom: 6px;
    }

    .check-child {
        margin-bottom: 25px;
    }

    .out-time {
        color: red;
    }
</style>
