<template>
      <div class="item-ckeck-box">
        <div v-if="!isRadio" v-show="showButton" :style="{ borderBottom: '1px solid #E9E9E9' ,paddingLeft: '10px' }">
          <a-checkbox :disabled="disabled" :indeterminate="indeterminate" @change="onCheckAllChange" :checked="checkAll">
            全选
          </a-checkbox>
        </div>
        <div class="ckeck-box">
          <a-checkbox-group :disabled="disabled" :options="plainOptions" v-model="checkedList" @change="onChange" />
        </div>
      </div>
</template>

<script>

  export default {
    name: "itemCheckBoxCom",
    data() {
      return {
        insertList: [],
        deletedList: [],
        checkedList: [],
        indeterminate: true,
        checkAll: false,
        plainOptions: [],
        plainOptionsItem: [],
        checkBoxList: [],
        radioValue:null,
      }
    },
    props: {
      disabled: {
        type: Boolean,
        required: false
      },
      isCommunityList: {
        type: Boolean,
        required: false
      },
      onlyOnline: {
        type: Boolean,
        default: true,
        required: false
      },
      isRadio: {
        type: Boolean,
        default: false,
        required: false
      },
      // 是否显示全选按钮
      showButton: {
        type: Boolean,
        default: true,
        required: false
      },
      allItemList: {
        // 此为全部元素list,每个元素为对象，每个对象至少需要包含name和id两个属性
        type: Array,
        required: true
      },
      itemCheckedList: {
        // 此为初始选中项，为id的列表
        type: Array,
        required: false
      }
    },
    activated() {
      this.initData()
    },
    mounted() {
      this.initData()
    },
    watch: {
      itemCheckedList: {
        handler() {
          this.initCheckAllStatus()
        },
        deep: true
      }
    },
    methods: {
      initData() {
        this.checkedList = this.itemCheckedList
        this.radioValue = this.checkedList && this.checkedList.length>0 ? this.checkedList[0]:null
        //只显示上线状态的社区
        if (this.isCommunityList && this.onlyOnline) {
          this.checkBoxList = this.allItemList.filter(m => m.online == true);
          let unOnlineCommunityList = this.allItemList.filter(m => m.online == false);
          if (unOnlineCommunityList.length > 0) {
            unOnlineCommunityList.map(m => {
              this.checkedList = this.checkedList.filter(item => item != m.id)
            })

          }
        } else {
          this.checkBoxList = this.allItemList
        }
        this.plainOptions = []
        this.plainOptionsItem = []
        this.checkBoxList.map(m => {
          let option = {
            label: m.name,
            value: m.id
          }
          this.plainOptions.push(option)
          this.plainOptionsItem.push(m.id)
        })
        this.initCheckAllStatus();
        this.getInsetAndDeletedList(this.checkedList, this.itemCheckedList)
      },
      initCheckAllStatus() {
        this.indeterminate = !!this.checkedList.length && this.checkedList.length < this.plainOptions.length;
        this.checkAll = this.checkedList.length === this.plainOptions.length;
      },
      onChange(checkedList) {
        if (!this.isRadio){
          this.checkedList = checkedList
          this.initCheckAllStatus();
          this.getInsetAndDeletedList(this.checkedList, this.itemCheckedList)
        }else {
          //处理只能单选的情况
          if (checkedList.length > 1 ){
            this.checkedList = checkedList.filter(m => m != this.radioValue)
          }else {
            this.checkedList = checkedList
          }
          this.radioValue = this.checkedList[0]
        }

      },
      onCheckAllChange(e) {
        this.checkedList = []
        Object.assign(this, {
          checkedList: e.target.checked ? this.plainOptionsItem : [],
          indeterminate: false,
          checkAll: e.target.checked,
        });
        this.getInsetAndDeletedList(this.checkedList,this.itemCheckedList)
      },
      getInsetAndDeletedList(checkedList,itemList){
        this.insertList = checkedList.filter(m=> this.itemCheckedList.indexOf(m)=== -1)
        this.deletedList = itemList.filter(m=>this.checkedList.indexOf(m)===-1)
      },
    },
  };
</script>
<style>
  .item-ckeck-box .ant-checkbox-group label{
    margin-top: 5px;
    width: 150px;
    padding-left: 10px;
  }
</style>
