<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>
        <CheckboxGroup class="check-child"
                       v-model="checkAllSingleGroup"
                       @on-change="checkAllSingleGroupChange(checkAllSingleGroup, singleList.child)">
            <Checkbox v-for="single in singleList.child"
                      :disabled="disabled"
                      :key="single.id"
                      :label="single.id">
                <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>
        </CheckboxGroup>
    </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, // 全选绑定状态
      checkAllSingleGroup: [] // 孩子节点绑定值
    }
  },
  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
        let arr = []
        val.forEach(item => {
          arr.push(item.id)
        })
        this.checkAllSingleGroup = this.checkAll ? arr : []
      }
    },
    // 孩子节点点击处理(data为当前数据， origin为孩子节点源数据)
    checkAllSingleGroupChange (data, origin) {
      if (data.length === origin.length) {
        this.indeterminate = false
        this.checkAll = true
      } else if (data.length > 0) {
        this.indeterminate = true
        this.checkAll = false
      } else {
        this.indeterminate = false
        this.checkAll = false
      }
    },
    // 预先处理
    preHandle () {
      // 已绑定数据
      this.checkAll = false
      this.checkAllSingleGroup = []
      this.bindData.forEach(item => {
        if (this.singleList.id === item.id) {
          this.checkAll = true
        }
        this.checkAllSingleGroup.push(item.id)
      })
      // 默认绑定数据处理(27-我的面板（一级） 28-个人信息（二级） 29-个人信息（三级） 30-修改密码（三级）)
      if (this.singleList.id === '28') {
        this.disabledList = true
        this.checkAll = true
      }
      this.singleList.child.forEach(item => {
        if (item.id === '29' || item.id === '30') {
          this.disabled = true
          this.checkAllSingleGroup = ['29', '30']
        }
      })
    }
  },
  mounted () {
  },
  watch: {
    singleList (val) {
      // console.log('list发生改变', val)
    },
    bindData (val) {
      // console.log('绑定数据', val)
      this.preHandle()
    }
  }
}
</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>
