<template>
  <el-popover class="vertical-baseline" placement="bottom-start" width="214" trigger="click" v-model="popoverShow">
    <el-checkbox-group v-model="checkedList">
      <div class="dm-store__type__item" v-for="(v,i) in typeList" :key="i">
        <el-checkbox :label="v.value">{{v.label}}</el-checkbox>
      </div>
    </el-checkbox-group>
    <div class="dm-store__btn dm-store__btn--border">
      <span class="dm-store__btn--cancel" @click="popoverShow = false">取 消</span>
      <el-button class="dm-store__btn--cancel" type="text" @click="saveToRight">确 定</el-button>
    </div>
    <div class="el-input dm-store__reference w240" slot="reference">
      <div class="el-input__inner dm-store__inputtag">
        <el-tag v-for="(v,i) in checkedList" size="small" :key="i" closable @close="delItem(v)">{{filterLabel(v)}}</el-tag>
        <span class="gray-color dm-store__inputtag--tips" v-show="checkedList.length === 0">请选择门店</span>
      </div>
      <el-popover placement="top-start" popper-class="select-shop__popper" width="300" trigger="hover">
        <el-tag v-for="(v,i) in checkedList" class="dm-store__total--tag" size="small" :key="i" closable @close="delItem(i)">{{filterLabel(v)}}</el-tag>
				<span slot="reference" class="dm-store__inputtag--total" v-show="checkedList.length">共{{checkedList.length}}项</span>
			</el-popover>
    </div>
  </el-popover>
</template>
<script>
import qs from 'qs';
import { baseUrl } from '../config';
export default {
  name:'options-type',
  props:{
    uuid:{
      type:String,
      default:''
    }
  },
  created() {
    this.getRightList();
  },
  data() {
    return {
      typeList:[
        {label:'自营',value:'0'},
        {label:'联营',value:'1'},
        {label:'代理',value:'2'},
        {label:'代销',value:'3'},
        {label:'托管',value:'4'},
        ],
      checkedList:[],
      popoverShow:false,
      params:{
        selectType:1,	// 是	int	下拉选择项
        key:'',	// 是	string	32位唯一值
        isAll:0,	// 是	int	是否勾选全部 1是 0否
        value:'',	 //否	string	isAll=0时，必填，选中项id，多个逗号分隔
        removeItems:'', //否	string	isAll=1，取消选中项的id，多个逗号分隔
      },
    }
  },
  methods:{
    // label 的filter
    filterLabel(val) {
      let result = '';
      this.typeList.map( v => {
        if (val === v.value) {
          result = v.label;
        }
      })
      return result;
    },
     // 拉取右侧数据
    getRightList() {
      let params = {
        key:this.uuid,
        selectType:1,
        search:'',
        currentPage:1,
        pageSize:20
      }
      this.axios.post(baseUrl + '/api-plug/list-right-data?requestProject=gic-web',qs.stringify(params)).then(res => {
        if (res.data.errorCode === 0) {
          this.checkedList = ((res.data.result && res.data.result.result) || []).map(v => v.id);
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 保存
    saveToRight() {
      this.params.key = this.uuid;
      let valueList = [];
      this.params.value = this.checkedList.join(',');
      if (!this.params.value) {
        this.$message({type:"warning",message:"门店选择不能为空"});
        return;
      }
      this.axios.post(baseUrl + '/api-plug/save-store-widget?requestProject=gic-web',qs.stringify(this.params)).then(res => {
        this.popoverShow = false;
      }).catch(err => {
        console.log(err)
      })
    },
    // 删除右侧单选或者多选数据
    delItem(v) {
      let params = {
        key:this.uuid,
        removeItems:v,
        value:''
      }
      this.axios.post(baseUrl + '/api-plug/remove-items?requestProject=gic-web',qs.stringify(params)).then(res => {
        this.getRightList();
      }).catch(err => {
        console.log(err)
      })
    },
  }
}
</script>

