<template>
  <div class="dm-store__card">
    <!-- 左边 -->
    <div class="dm-store__left">
      <div class="dm-store__state">
        <el-select v-model="storeType" placeholder="请选择" class="w100" @change="selectStoreType">
          <el-option v-for="(v,i) in storeTypeOptions" :key="i" :label="v.label" :value="v.value"></el-option>
        </el-select>
        <span class="fz13">{{leftCheckList.length}}/{{leftTotal}}</span>
      </div>
      <div class="dm-store__search">
        <el-input v-model="leftValue" placeholder="请输入门店名称"  prefix-icon="el-icon-search" @change="leftSearch"></el-input>
      </div>
      <div class="dm-store__list" v-loading="leftLoading">
        <p class="dm-store__item">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全部</el-checkbox>
        </p>
        <el-checkbox-group v-model="leftCheckList" @change="handleCheckChange">
          <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="fz13 gray">{{v.storeCode}}</p>
            </el-checkbox>
            <i class="el-icon-arrow-right"></i>
          </p>
        </el-checkbox-group>
      </div>
    </div>
    <!-- 中间按钮区域 -->
    <div class="dm-store__center">
      <el-button type="primary" size="mini" icon="el-icon-arrow-right" :disabled="!leftCheckList.length" @click="saveToRight">转入</el-button>
      <el-button icon="el-icon-close" size="mini" :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" v-loading="rightLoading">
        <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>
      </el-checkbox-group>
    </div>
    <!-- 弹出框 -->
    <el-dialog title="门店选择" :visible.sync="dialogVisible" width="400px" :before-close="handleClose">
      <div style="margin:0 auto;position:relative;">
        <option-type v-if="storeType === 1" :uuid="newUuid"></option-type>
        <option-tags v-if="storeType === 2" :uuid="newUuid"></option-tags>
        <option-area v-if="storeType === 3" :uuid="newUuid"></option-area>
        <option-group v-if="storeType === 4" :uuid="newUuid"></option-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import qs from 'qs';
import { baseUrl } from './config';
import uuidv1 from 'uuid/v1';
import optionType from './options/option-type';
import optionArea from './options/option-area';
import optionTags from './options/option-tags';
import optionGroup from './options/option-group';
export default {
  name:'vue-gic-store-card',
  components:{
    'option-type':optionType,
    'option-area':optionArea,
    'option-tags':optionTags,
    'option-group':optionGroup
  },
  props:{
    uuid:{
      type:String,
      default:''
    }
  },
  data() {
    return {
      storeType:0,
      storeTypeOptions:[ // 一级列表
        {label:'所有门店',value:0},
        {label:'门店类型',value:1},
        {label:'门店标签',value:2},
        {label:'门店区域',value:3},
        {label:'门店分组',value:4},
        // {label:'部分门店',value:5}
      ],
      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，多个逗号分隔
      },
      isIndeterminate: false,
      checkAll:false,
      rightHoverIndex:null,
      rightTotal:0,
      leftTotal:0,
      newUuid:uuidv1().replace(/-/g,''),  // 生成uuid
      dialogVisible:false,
      leftLoading:false,
      rightLoading:false
    }
  },
  created() {
    this.newUuid = this.uuid || this.newUuid;
    if (!this.uuid) {
      this.$emit('update:uuid',this.newUuid);
    }
    this.initLeftList();
    this.getRightList();
  },
  methods:{
    //左侧搜索   如果是全部门店则调用init列表
    leftSearch() {
      if (this.storeType) {
        this.getLeftList();
      } else {
        this.initLeftList();
      }
    },
    // 左侧全选
    handleCheckAllChange(val) {
      console.log(val)
      this.leftCheckList = val ? this.leftList.map(v => v.storeId) : [];
      this.isIndeterminate = false;
    },
    // 左侧选择
    handleCheckChange(val) {
      let length = val.length;
      this.checkAll = length === this.leftList.length;
      this.isIndeterminate = length > 0 && length < this.leftList.length;
    },
    // 初始化左侧数据
    initLeftList() {
      this.leftLoading = true;
      this.axios.get(baseUrl + '/api-plug/query-store-by-code-name-new?requestProject=gic-web&pageSize=999&currentPage=1&searchParam='+this.leftValue).then(res => {
        this.leftList = (res.data.result && res.data.result.result) || [];
        this.leftTotal = (res.data.result && res.data.result.totalCount) || 0;
        this.leftLoading = false;
      }).catch(err => {
        this.leftLoading = false;
        console.log(err)
      })
    },
    // 拉取左侧数据
    getLeftList() {
      this.leftLoading = true;
      let params = {
        key:this.newUuid,
        search:this.leftValue,
        currentPage:1,
        pageSize:999
      }
      this.axios.post(baseUrl + '/api-plug/get-store-widget-store?requestProject=gic-web',qs.stringify(params)).then(res => {
        this.leftList = (res.data.result && res.data.result.result) || [];
        this.leftTotal = (res.data.result && res.data.result.totalCount) || 0;
        this.leftLoading = false;
      }).catch(err => {
        this.leftLoading = false;
        console.log(err)
      })
    },
    // 拉取右侧数据
    getRightList() {
      this.rightLoading = true;
      let params = {
        key:this.newUuid,
        selectType:5,
        search:this.rightValue,
        currentPage:1,
        pageSize:999
      }
      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;
        this.rightLoading = false;
      }).catch(err => {
        this.rightLoading = false;
        console.log(err)
      })
    },
    // 左侧数据移动到右侧
    saveToRight() {
      this.params.key = this.newUuid;
      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(',');
      }
      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.deleteRightItems(this.rightList.map(v => v.id).join(','));
    },
    // 删除右侧单选或者多选数据
    deleteRightItems(item) {
      this.rightLoading = true;
      let params = {
        key:this.newUuid,
        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 = [];
        this.rightLoading = false;
      }).catch(err => {
        this.rightLoading = false;
        console.log(err)
      })
    },
    // 关闭弹出框
    handleClose(){
      this.dialogVisible = false;
    },
    // 弹出框确认
    confirm() {
      this.getLeftList();
      this.dialogVisible = false;
    },
    // 选择门店类型
    selectStoreType() {
      if (this.storeType) {
        this.dialogVisible = true
      } else {
        this.initLeftList();
      }
    },

  }
}
</script>
<style lang="scss">
@import url('./index.css');
</style>
