<template>
  <el-popover class="vertical-baseline" placement="bottom-start" width="490" height="378" trigger="click">
    <div class="dm-store__wrap" style="height: 378px;">
      <div class="dm-store__left">
        <div class="dm-store__state">
          <el-checkbox  v-model="params.isAll" :true-label="1" :false-label="0" @change="handleCheckAllChange">所有门店</el-checkbox>
          <span class="fz13">{{params.isAll?leftTotal:leftCheckList.length}}/{{leftTotal}}</span>
        </div>
        <div class="dm-store__search">
          <el-input  v-model="leftValue" placeholder="请输入门店名称"  prefix-icon="el-icon-search" @change="getLeftList"></el-input>
        </div>
        <el-checkbox-group v-model="leftCheckList" class="dm-store__list">
          <p v-for="(v,i) in leftList" :key="i" class="dm-store__item dm-store__item--52">
            <el-checkbox :label="v.storeId">
              <p>{{v.storeName}}</p>
              <p class="gray fz13">{{v.storeCode}}</p>
            </el-checkbox>
            <i class="el-icon-arrow-right"></i>
          </p>
        </el-checkbox-group>
      </div>
      <div class="dm-store__center">
        <el-button type="primary" icon="el-icon-arrow-right" circle :disabled="!leftCheckList.length" @click="saveToRight"></el-button>
        <el-button icon="el-icon-close" circle :disabled="!rightCheckList.length" @click="deleteRightItems(false)"></el-button>
      </div>
      <div class="dm-store__right">
        <div class="dm-store__state">
          <span>已选<span class="fz12 gray-color">（{{rightTotal}}个门店）</span></span>
          <el-button type="text" @click="deleteRightAll">全部清除</el-button>
        </div>
        <div class="dm-store__search">
          <el-input v-model="rightValue" placeholder="请输入门店名称" prefix-icon="el-icon-search" @change="getRightList"></el-input>
        </div>
        <el-checkbox-group v-model="rightCheckList" class="dm-store__list">
          <p v-for="(v,i) in rightList" :key="i" class="dm-store__item"  @mouseover="rightHoverIndex = i" @mouseout="rightHoverIndex = null">
            <el-checkbox :label="v.id">{{v.name}}</el-checkbox>
            <i class="el-icon-close" v-show="rightHoverIndex !== i"></i>
            <i class="el-icon-circle-close" v-show="rightHoverIndex === i" @click.stop="deleteRightItems(v.id)"></i>
          </p>
          <p class="dm-store__list--more"><el-button type="text" @click="loadMore">加载更多</el-button></p>
        </el-checkbox-group>

      </div>
    </div>
    <div class="el-input dm-store__reference w240" slot="reference">
      <div class="el-input__inner dm-store__inputtag">
        <el-tag size="small" v-for="v in rightList" :key="v.id" @close="deleteRightItems(v.id)" closable>{{v.name}}</el-tag>
        <span class="gray-color dm-store__inputtag--tips" v-show="rightList.length === 0">请选择门店</span>
      </div>
      <el-popover placement="top-start" popper-class="select-shop__popper" width="300" trigger="hover">
				<el-tag class="dm-store__total--tag"  v-for="v in rightList" :key="v.id" @close="deleteRightItems(v.id)" closable>
					{{v.name}}
				</el-tag>
				<span slot="reference" class="dm-store__inputtag--total" v-show="rightList.length">共{{rightTotal}}项</span>
			</el-popover>
    </div>
  </el-popover>
</template>
<script>
import qs from 'qs';
import { baseUrl } from '../config';
let loadMoreFlag = false;
export default {
  name:'options-part',
  props:{
    uuid:{
      type:String,
      default:''
    }
  },
  data() {
    return {
      leftList:[],
      rightList:[],
      leftValue:'',
      rightValue:'',
      leftCheckList:[],
      rightCheckList:[],
      params:{
        selectType:5,	// 是	int	下拉选择项
        key:'',	// 是	string	32位唯一值
        isAll:0,	// 是	int	是否勾选全部 1是 0否
        value:'',	 //否	string	isAll=0时，必填，选中项id，多个逗号分隔
        removeItems:'', //否	string	isAll=1，取消选中项的id，多个逗号分隔
      },
      rightParams:{
        key:this.uuid,
        selectType:5,
        search:this.rightValue,
        currentPage:1,
        pageSize:20
      },
      isIndeterminate: true,
      rightHoverIndex:null,
      rightTotal:0,
      leftTotal:0
    }
  },
  created() {
    this.getLeftList();
    this.getRightList();
  },
  methods:{
    // 拉取左侧数据
    getLeftList() {
      this.axios.get(baseUrl + '/api-plug/query-store-by-code-name-new?requestProject=gic-web&pageSize=20&currentPage=1&searchParams='+this.leftValue).then(res => {
        this.leftList = res.data.result.result || [];
        this.leftTotal = res.data.result.totalCount || 0;
      }).catch(err => {
        console.log(err)
      })
    },
    // 拉取右侧数据
    getRightList() {
      this.rightParams.key = this.uuid;
      this.rightParams.search = this.rightValue;
      this.axios.post(baseUrl + '/api-plug/list-right-data?requestProject=gic-web',qs.stringify(params)).then(res => {
        this.rightList = (res.data.result && res.data.result.result) || [];
        this.rightTotal = (res.data.result && res.data.result.totalCount) || 0;
      }).catch(err => {
        console.log(err)
      });
    },
    // 左侧数据移动到右侧
    saveToRight() {
      this.params.key = this.uuid;
      if (this.params.isAll) {
        this.params.removeItems = this.leftList.filter(v => {
          return this.leftCheckList.indexOf(v.storeId) < 0;
        }).map(v => v.storeId).join(',');
      } else {
        this.params.value = this.leftCheckList.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.getRightList();
      }).catch(err => {
        console.log(err)
      })
    },
    // 删除右侧全部
    deleteRightAll() {
      this.axios.get(baseUrl + '/api-plug/remove-allitems?requestProject=gic-web&key='+this.uuid).then(res => {
        if (res.data.errorCode === 0) {
          this.getRightList();
        } else {
          this.$message({type:'error',message:'清除全部失败'});
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 删除右侧单选或者多选数据
    deleteRightItems(item) {
      let params = {
        key:this.uuid,
        removeItems:item || this.rightCheckList.join(',')
      }
      this.params.value = this.leftCheckList.join(',');
      this.axios.post(baseUrl + '/api-plug/remove-items?requestProject=gic-web',qs.stringify(params)).then(res => {
        this.getRightList();
        this.rightCheckList = [];
      }).catch(err => {
        console.log(err)
      })
    },
    // 选中所有数据
    handleCheckAllChange(val) {
      this.leftCheckList = val ? this.leftList.map(v => v.storeId) : [];
    },
    // 加载更多
    loadMore() {
      this.rightParams.currentPage += 1;
    }
  }
}
</script>

