<template>
  <div class="singleLayersSelecte">
    <div class="selectBox">
      <div class="selectLeft">
        <div class="title">{{title}}</div>
        <div class="selectBox1">
          <span class="selectLists">
            <a-checkbox
              :indeterminate="indeterminate"
              :checked="checkAll"
              @change="onCheckAllChange"
            >全选</a-checkbox>
          </span>
          <a-checkbox-group
            v-model="checkedList"
            :options="plainOptions"
            @change="checkGroupChange"
            class="selectList"
          ></a-checkbox-group>
        </div>
      </div>
      <div class="selectRight">
        <div class="title">
          已选
          <a-button class="clearAllBtn" type="link" @click="clearAll">清空</a-button>
        </div>
        <div class="selectBox1">
          <span class="selectListitem" v-for="(item,index) in checkedShowList" :key="index">
            {{item}}
            <a-icon type="close" id="close" @click="deleteItem(item)" />
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
// const plainOptions = ['Apple', 'Pear', 'Orange','44','550','9982','5525'];
// const defaultCheckedList = ['Apple', 'Orange'];
export default {
  data() {
    return {
      //选择框
      checkedList: [],
      checkedShowList: [],
      indeterminate: false,
      checkAll: false,
      plainOptions: [],
      valueOptions: [],
    }
  },
  watch: {
    checkedList: {        
        handler(n,o){
            
                this.$emit('getCheckedList', this.checkedList)
            
        },
        deep: true,
        immediate: true,
    },
    listArr:{
        handler(n,o){
            this.plainOptions = this.listArr
            this.valueOptions=[];
            this.listArr.forEach((item) => {
                    this.valueOptions.push(item.value)
            })
        },
        deep: true,
        immediate: true,
    },
    checked: {
        handler(n, o) {     
            
                this.checkedList=[]
                this.checkedShowList=[];
                this.plainOptions = this.listArr
                this.valueOptions=[];
                this.listArr.forEach((item) => {
                    this.valueOptions.push(item.value)
                })
                 if (this.checked.length) {
                    this.checkedList = this.checked;
                    // console.log(this.checkedList,this.plainOptions)
                    this.checkedList.forEach((ele, i) => {
                        this.plainOptions.forEach((item, index) => {
                            if (item.value == ele) {
                                this.checkedShowList.push(item.label)
                            }
                        })
                    })
                    this.indeterminate = !!this.checkedList.length && this.checkedList.length < this.plainOptions.length
                    this.checkAll = this.checkedList.length === this.plainOptions.length
                   
                }             
                                     
        },
        deep: true,
        immediate: true,
    },
  },
  props: ['title', 'listArr', 'checked'],
  methods: {
    //手机品牌多选的事件
    checkGroupChange(checkedList) {
        this.checkedShowList = []
        // console.log(checkedList)
        this.indeterminate = !!checkedList.length && checkedList.length < this.plainOptions.length
        this.checkAll = checkedList.length === this.plainOptions.length
        checkedList.forEach((ele, i) => {
            this.plainOptions.forEach((item, index) => {
            if (item.value == ele) {
                this.checkedShowList.push(item.label)
            }
            })
        })
            //  this.$emit('getCheckedList', this.checkedList)

    },
    onCheckAllChange(e) {
    // console.log(e.target.checked,this.valueOptions)
      this.checkedList=[];
      this.checkedShowList=[];
      Object.assign(this, {
        checkedList: e.target.checked ? this.valueOptions : [],
        indeterminate: false,
        checkAll: e.target.checked,
      })
      this.checkedList.forEach((ele, i) => {
        this.plainOptions.forEach((item, index) => {
          if (item.value == ele) {
            this.checkedShowList.push(item.label)
          }
        })
      })
      if (!e.target.checked) {
        this.checkedShowList = []
      }
      // console.log(this.checkedList)
        // this.$emit('getCheckedList', this.checkedList)

    },

    deleteItem(item) {
      // console.log(item)
      let val = ''
      this.plainOptions.forEach((ele, index) => {
        if (ele.label == item) {
          val = ele.value
        }
      })
      this.checkedList = this.checkedList.filter((element, index) => {
        return element != val
      })
      this.checkedShowList = this.checkedShowList.filter((element, index) => {
        return element != item
      })
      if (this.checkedList.length == 0) {
        this.indeterminate = false
        this.checkAll = false
      }
            // this.$emit('getCheckedList', this.checkedList)

    },

    clearAll() {
      this.checkedList = []
      this.indeterminate = false
      this.checkAll = false
      this.checkedShowList = []
        // this.$emit('getCheckedList', this.checkedList)

    },
  },
  mounted() {
    this.plainOptions = this.listArr
    this.valueOptions=[];
    this.listArr.forEach((item) => {
      this.valueOptions.push(item.value)
    })
    
    // if (this.checked.length) {
    //     this.checkedList = this.checked
    //     this.checkedList.forEach((ele, i) => {
    //         this.plainOptions.forEach((item, index) => {
    //         if (item.value == ele) {
    //             this.checkedShowList.push(item.label)
    //         }
    //         })
    //     })
    //     this.indeterminate = !!this.checkedList.length && this.checkedList.length < this.plainOptions.length
    //     this.checkAll = this.checkedList.length === this.plainOptions.length
    // }else{
    //     this.checkedList = []
    // }
    
    
  },
}
</script>

<style lang="scss" scoped>
.singleLayersSelecte {
  margin-top: 20px;
  .selectBox {
    display: flex;
    .title {
      background: #f9f9f9;
      font-size: 14px;
      font-weight: 700;
      padding: 0 15px;
      border-bottom: 1px solid #ddd;
      text-align: left;
      position: relative;
      border-radius: 5px 5px 0 0;
      .clearAllBtn{
        position: absolute;
        top: 3px;
        right: 0;
      }
    }
    .selectLeft {
      width: 40%;
      margin-right: 2%;
      border: 1px solid #ddd;
      border-radius: 5px;
    }
    .selectRight {
      width: 20%;
      border: 1px solid #ddd;
      border-radius: 5px;
    }
    .selectBox1 {
      height: 250px;
      overflow: auto;

      .selectList {
        display: block;
        width: 100%;
        // padding: 0 15px;
        // padding: 3px 0;
      }
      .selectLists {
        display: block;
        width: 100%;
        padding: 0 15px;
      }
      .selectLists:hover {
        background-color: rgba(0, 0, 0, 0.1);
      }
      .selectListitem {
        display: block;
        height: 25px;
        line-height: 25px;
        background-color: #eee;
        border-radius: 5px;
        padding: 0 10px;
        margin: 8px 10px;
        position: relative;
        #close {
          font-size: 12px;
          position: absolute;
          right: 10px;
          top: 5px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>