<template>
  <el-dialog title="提示" width="535px" :visible.sync="dialogVisible" @closed="close">
    <div class="el-transfer" v-loading="loading">
      <!-- 左侧 -->
      <div class="el-transfer-panel">
        <div class="el-transfer-panel__header">
          <label class="el-checkbox">
            门店列表
            <span class="fr mr10">{{ leftSelect.length }}/{{ leftList.length }}</span>
          </label>
        </div>
        <div class="search">
          <el-input type="text" v-model="listParams.searchParam" clearable placeholder="请输入门店名称" @change="search" />
        </div>
        <div class="el-transfer-panel__body">
          <div class="el-transfer-panel__list" v-infinite-scroll="leftScrollLoad" :infinite-scroll-disabled="!shouldLeftLoad" style="overflow:auto">
            <!-- eslint-disable -->
            <el-checkbox-group v-model="leftSelect">
              <el-checkbox
                class="el-transfer-panel__item"
                v-for="item in leftList.filter( v => { return !v.select; })"
                :label="item.key"
                :key="item"
              >{{ item.name }}</el-checkbox>
            </el-checkbox-group>
            <p class="text-center" v-if="shouldLeftLoad">
              <el-button class="gray" type="text">{{ leftLoading ? '加载中...' : '加载更多' }}</el-button>
            </p>
            <p class="text-center" v-else><el-button class="fz12" type="text" disabled>无更多数据</el-button></p>
            <!-- eslint-disable -->
          </div>
        </div>
      </div>
      <!-- 中间按钮区域 -->
      <div class="center-button">
        <el-button class="mb10" type="primary" size="mini" icon="el-icon-arrow-right" :disabled="!leftSelect.length" @click="saveToRight">转入</el-button>
        <br />
        <el-button icon="el-icon-close" size="mini" :disabled="!rightSelect.length" @click="deleteRightItems(false)">移除</el-button>
      </div>
      <!-- 右侧 -->
      <div class="el-transfer-panel">
        <div class="el-transfer-panel__header">
          <label class="el-checkbox">
            已选({{ rightList.length }}个门店)
            <span class="fr mr10">{{ rightSelect.length }}/{{ rightList.length }}</span>
          </label>
        </div>
        <div class="search">
          <el-input type="text" v-model="rightFilter" clearable placeholder="请输入门店名称" />
        </div>
        <div class="el-transfer-panel__body">
          <div class="el-transfer-panel__list">
            <el-checkbox-group v-model="rightSelect">
              <el-checkbox class="el-transfer-panel__item" v-for="item in rightList.filter(v => { return v.name.indexOf(rightFilter) !== -1})" :label="item.key" :key="item.key">{{ item.name }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleSave()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { openEdxStoreSearch, openEdxStore } from '@/service/api/ewashApi';
const pageSize = 20; // 分页数
export default {
  name: 'ewash-store-child',
  props: ['dialogVisible'],
  data() {
    return {
      loading: false,
      leftLoading: false, // 左侧列表加载
      shouldLeftLoad: true, // 左侧是否可以滚动触发加载
      leftList: [],
      leftSelect: [],
      rightList: [],
      rightSelect: [],
      listParams: {
        pageSize,
        currentPage: 1,
        searchParam: ''
      },
      rightFilter: '' // 右侧过滤数据
    };
  },
  methods: {
    // 移至右侧
    saveToRight() {
      // 右侧push左侧数据
      this.rightList = this.rightList.concat(
        this.leftList.filter(v => {
          return this.leftSelect.includes(v.key);
        })
      );
      // 左侧只保留未被选择的
      const rightIds = this.rightList.map(v => {
        return v.key;
      }); // 右侧选中的ids
      this.leftList = this.leftList.map(v => {
        v.select = rightIds.includes(v.key);
        return v;
      });
      // 重置左侧已选
      this.leftSelect = [];
    },
    // 移除右侧
    deleteRightItems() {
      // 移除右侧
      this.rightList = this.rightList.filter(v => {
        return !this.rightSelect.includes(v.key);
      });
      // 左侧数据去除disable
      this.leftList = this.leftList.map(v => {
        // 被选择且右侧选中移除
        if (v.select && this.rightSelect.includes(v.key)) {
          v.select = false;
        }
        return v;
      });
      // 清除右侧数据
      this.rightSelect = [];
    },
    // 获取左侧列表数据
    getLeftList() {
      if (this.leftLoading) {
        return;
      }
      this.leftLoading = true;
      openEdxStoreSearch(this.listParams).then(res => {
        this.leftLoading = false;
        if (res.result.result && res.result.result.length < pageSize) {
          this.shouldLeftLoad = false; // 不可以加载更多
        }
        const _leftList =
          res.result.result.map(v => {
            return {
              key: v.storeId,
              name: v.storeName,
              select: false
            };
          }) || [];
        this.leftList = this.leftList.concat(_leftList);
      });
    },
    // 滚动加载触发
    leftScrollLoad() {
      this.listParams.currentPage += 1;
      this.getLeftList();
    },
    // 查询
    search() {
      this.listParams.currentPage = 1;
      this.leftSelect = [];
      this.leftList = [];
      this.getLeftList();
    },
    close() {
      this.$emit('update:dialogVisible', false);
      // 重置数据
      this.shouldLeftLoad = true;
      this.leftList = [];
      this.rightList = [];
      this.leftSelect = [];
      this.rightSelect = [];
      this.listParams.currentPage = 1;
      this.listParams.searchParam = '';
    },
    // 保存子账户
    handleSave() {
      const storeIds = this.rightList
        .map(v => {
          return v.key;
        })
        .join();
      if (storeIds === '') {
        this.$tips({ message: '请选择门店', type: 'error' });
        return;
      }
      this.loading = true;
      openEdxStore({ storeIds })
        .then(res => {
          this.loading = false;
          console.log(res);
          this.$tips({ message: res.message || '保存成功' });
          this.close();
        })
        .catch(() => {
          this.loading = false;
        });
    },
    /**  父组件调用  **/
    /**  左侧列表重置 加载  **/
    reload() {
      this.shouldLeftLoad = true;
      this.leftList = [];
      this.rightList = [];
      this.leftSelect = [];
      this.rightSelect = [];
      this.listParams.currentPage = 1;
      this.listParams.searchParam = '';
      this.getLeftList();
    }
  }
};
</script>

<style lang="scss" scoped>
.search {
  margin: 8px 10px;
}
.center-button {
  display: inline-block;
  margin: 0 3px 0 5px;
}
</style>
