<template>
  <el-collapse-item :name="keyName">
    <template slot="title">
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">{{title}}</el-checkbox>
    </template>
    <el-checkbox-group v-if="options.length > 0" v-model="value" @change="handleCheckedItemChange">
      <el-checkbox v-for="dataItem in options" :label="dataItem.value?dataItem.value:dataItem.label" :key="dataItem.value">{{dataItem.label}}</el-checkbox>
    </el-checkbox-group>
  </el-collapse-item>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
@Component
export default class OrderCheckbox extends Vue {
  value:Array<any>=[]
  activeNames:Array<any>=[1]
  checkAll= false
  isIndeterminate= false

  @Prop()
  title:string|undefined

  @Prop()
  options!:Array<any>

  @Prop()
  keyName:any

  @Prop()
  retType?:string

  clear(){
    this.value = []
  }

  getValue(){
    if(this.retType == 'string'){
      let n='';
      for(const item of this.value){
        if(!n){
          n = n + ',' + item
        }else{
          n = item
        }
      }
      return n;
    }else{
      return this.value;
    }
  }

  emitFun(){
    let v:any = this.getValue();
    this.$emit('checkboxChange',v);
  }

  handleCheckAllChange(val:any){
    this.value = []
    if(val && this.options){
      for(const item of this.options){
        this.value.push(item.value)
      }
    }
    this.isIndeterminate = false;
    this.emitFun();
  }

  handleCheckedItemChange(value:any,config:any){
    let checkedCount = value.length;
    this.checkAll = checkedCount === this.options.length;
    this.isIndeterminate = checkedCount > 0 && checkedCount < this.options.length;
    this.emitFun();
  }

}
</script>

<style lang="scss" scoped>

</style>