<template>
  <el-popover class="fl" placement="bottom-start" width="176" trigger="click">
    <el-checkbox-group v-model="newChecked">
      <div v-for="(v,i) in typeList" :key="i">
        <el-checkbox :label="v.value">{{v.label}}</el-checkbox>
      </div>
    </el-checkbox-group>
      <div class="el-input dm-store__type__inner w200" slot="reference">
        <div placeholder="请选择" class="el-input__inner block">
          <div class="dm-store__tag__wrap">
            <el-tag v-for="(v,i) in newChecked" size="mini" :key="i" closable @close="delTag(i)">{{filterLabel(v)}}</el-tag>
          </div>
          <el-popover v-if="newChecked.length" class="dm-store__tag__count" placement="top-start" title="已选择" width="200" trigger="hover">
            <div>
              <el-tag v-for="(v,i) in newChecked" size="mini" :key="i" closable @close="delTag(i)">{{filterLabel(v)}}</el-tag>
            </div>
            <span slot="reference">共{{newChecked.length}}项</span>
          </el-popover>
        </div>
    </div>
  </el-popover>
</template>
<script>
export default {
  name:'options-type',
  props:{
    checked:{
      type:Array,
      default() {
        return [];
      }
    }
  },
  watch: {
    newChecked(val) {
      this.$emit('get-emit',val);
    }
  },
  data() {
    return {
      typeList:[
        {label:'自营',value:0},
        {label:'联营',value:1},
        {label:'代理',value:2},
        {label:'代销',value:3},
        {label:'托管',value:4},
        ],
      newChecked:this.checked
    }
  },
  methods:{
    init() {
      this.newChecked = this.checked;
      console.log(this.newChecked)
    },
    delTag(index){
      this.newChecked.splice(index,1);
    },
    filterLabel(val) {
      let result = '';
      this.typeList.map( v => {
        if (val === v.value) {
          result = v.label;
        }
      })
      return result;
    }
  }
}
</script>


<style lang="scss">
.w200 {
  width: 200px;
}
</style>
