<template>
    <!-- 公共蓝色下拉多选框 -->
    <div style="display: inline-block;">
  <div class="blue-select-checkbox">
    <input type="text" class="input_text" :value="labels.join('/')" placeholder="请选择" readonly="readonly" >
    <el-select  multiple v-model="selectValue"  >
      <el-option value="null" v-if="JSON.stringify(cityOptions) != JSON.stringify([])" >
        <el-checkbox  v-model="checked"  class="check-all" @change="handleCheckAllChange">全选</el-checkbox>
        <el-checkbox-group v-model="checkList" @change="selectBox" >
          <el-checkbox @change="objArrType($event,item)"  v-for="item in cityOptions" :label="item[option_value]+':'+item[option_label]" :key="item[option_value]">  {{if_show_as? getRIGHT_LIST_showAsName(item[option_label]) : item[option_label]}} </el-checkbox>
          <!-- <el-checkbox @change="objArrType($event,item)"  v-for="item in cityOptions" :label="item[option_value]+':'+item[option_label]" :key="item[option_value]">{{item[option_label]}}   </el-checkbox> -->
        </el-checkbox-group>
      </el-option>
    </el-select>

  </div>
  </div>
</template>

<script>
export default {
  name: 'BlueSelectCheckbox',
  watch:{
    value(val,oblval){
        if(JSON.stringify(val) === JSON.stringify([])){
          this.checkList=[]
          // this.values=[]
          this.labels=[]
        }
    },
    checkList(val){
      if(val.length == this.cityOptions.length){
        this.checked = true
      }else{
        this.checked = false
      }
    },
    RIGHT_LIST(val){
      this.$emit('item_obj_arrType', val)
    },
    values(val,oblvalue){
      this.$emit('input', val)
    }
  },
  methods:{
    objArrType(val,item){
      if(!val){
        this.RIGHT_LIST.splice(this.RIGHT_LIST.length-1,1)  //删除
      }else{
      this.RIGHT_LIST.push(item)  //添加

      }
    },
    handleCheckAllChange(val) {
      if(this.cityOptions.length == 0) return
      this.checkList = val ? this.cityOptions.map(item => {
        return item[this.option_value]+':'+item[this.option_label];
    }).join(',').split(',') : [];
    this.selectBox(this.checkList)
    //  this.RIGHT_LIST =  val? this.cityOptions:[]
 
    },
    selectBox(val){
	  	// 首先要初始化这两个数组，因为当取消checkbox的时候，数组中就不能有当前取消的值。
	    this.values = [];
	    this.labels= [];
      val.forEach(item=>{
        const value = item.split(':')[0];
        const label= item.split(':')[1];
        this.values.push(value);
        this.labels.push(label);
      });
    }
  },
  data() {
    return {
      selectValue: '', //没有用到selectvalue
      checkList:  [], 
      values : [],
	    labels: [],
      checked: false,
      checkAll: false, //是否全选
      RIGHT_LIST: [],   //RIGHT_LIST   1007接口的入参
      RIGHT_LIST_show: this.$store.state.rightDict
    };
  },
  computed:{
    getRIGHT_LIST_showAsName(){   //别名 下拉多选框加上RIGHT_LIST_show
      return (val)=>{
        for(let i = 0; i< this.RIGHT_LIST_show.length; i++){
          if(this.RIGHT_LIST_show[i].code == val.slice(6,8)){
            return this.RIGHT_LIST_show[i].label +val
          }
        }
      }
    },
  },
    props: {
      cityOptions:{
        type: Array,
        default(){
          return []
        }
      },
      value:{ //数据
        type: Array,
        default(){
          return []
        }
      },
      option_value: {
        type: String,
      },
      option_label:{
        type: String
      },
      if_show_as:{
        type: Boolean,
        default: false
      }
    },
 
}
</script>

<style scoped>
/* 下拉显示 */
 .el-select-dropdown__item{
  height: 100%;
  width: 100%;
  padding: 0 !important;
  /* padding: 0 ;
  margin: 0  !important; */
}
/* 将input显示默认样式隐藏 */
 .el-select >>> .el-select__tags{
  display: none ;
}
.el-select >>> .el-input--suffix{
  width: 238px;
  height: 30px;
}

.blue-select-checkbox >>> .el-input__inner { 
  display: none;
  /* display: none; */
  /* box-shadow:inset 1px 1px 1px rgba(77, 103, 186, 0.75); */
}
.blue-select-checkbox >>> .el-input__suffix-inner{
  height: 100% ;
}
.blue-select-checkbox >>> .el-select__caret{
  line-height: 30px;
}
.el-checkbox{
  display: block;
  margin: 0;
}
/* 对号框left距离 */
.el-checkbox >>> .el-checkbox__input{
  text-indent:28px ;

}
.check-all >>> .el-checkbox__input{
  text-indent:0;
}
.check-all{
  padding-left: 12px;
}
.el-checkbox >>> .el-checkbox__input .el-checkbox__inner{
  width: 16px;
  height: 16px;
}
/* 下拉多选框字体样式 */
.el-checkbox >>> .el-checkbox__label{
  font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000000;
line-height: 17px;
}
.el-checkbox >>> .el-checkbox__input .el-checkbox__inner::after{
      height: 9px;
    left: 5px;
}
.blue-select-checkbox{
  position: relative;
  vertical-align: middle;
  display: inline-block;
  width: 238px;
  height: 30px;
  line-height: 30px;
}
.input_text{
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  color: #fff;
  background: rgba(57, 75, 135, 0.7);
  border-radius: 2px;
  border: 1px solid rgba(77, 103, 186, 0.75);
  padding-left: 10px;
  /* 防止覆盖选择框logo图标 */
  
  padding-right: 30px;
  /* 超出隐藏变省略号 */
  text-overflow: ellipsis; 
  
}
 input::-webkit-input-placeholder{
  color: #fff;
  opacity: 0.5;
  font-size: 14px;
}

</style>