<template>
  <el-popover
    placement="bottom-start"
    width="420"
    trigger="click"
    v-model="popoverShow"
  >
    <div class="store-group-content">
      <div class="store-group-left-content">
        <div class="title">
          选择
        </div>
        <div class="search-content">
          <el-input
            placeholder="请输入门店名称"
            v-model="search"
            clearable
            class="w-180 border-radius20"
            @keyup.enter.native="getTreeContent"
            @clear="getTreeContent"
          />
        </div>
        <div class="tree-content">
          <el-tree
            ref="tree"
            check-strictly
            @check-change="checkChange"
            :data="leftList"
            :default-expand-all="true"
            show-checkbox
            node-key="storeGroupId"
            :props="defaultProps"
          />
        </div>
      </div>
      <div class="store-group-right-content">
        <div class="title">
          <p>
            已选<span class="group-num">（{{ selectLeftList.length }}个分组）</span>
          </p>
          <el-button type="text" @click="clearAll">
            全部清除
          </el-button>
        </div>
        <div class="search-content">
          <el-input
            placeholder="请输入门店名称"
            v-model="searchValue"
            clearable
            class="w-180 border-radius20"
            @keyup.enter.native="getRightList"
            @clear="getRightList"
          />
        </div>
        <div class="list-content">
          <div v-if="selectRightList.length > 0">
            <div class="list-item" v-for="(item, index) in selectRightList" :key="index">
              <span class="storeGroup-name">{{ item.storeGroupName }}</span>
              <span class="el-icon-close" @click="removeSelect(item, index)" />
            </div>
          </div>
          <div v-else class="no-data-content">
            暂无数据
          </div>
        </div>
      </div>
    </div>
    <div class="store-button">
      <el-button type="text" style="color:#303133" @click="cancel">
        取消
      </el-button>
      <el-button type="text" @click="submit">
        确定
      </el-button>
    </div>
    <div slot="reference" class="group-title">
      已选择 {{ selectLeftList.length }} 个分组
    </div>
  </el-popover>
</template>
<script>
import request from '../../service/request.js';
import copy from '../../utils/clone';
export default {
  props: {
    selectData: {
      type: Array,
      default () {
        return [];
      },
    },
  },
  data () {
    return {
      popoverShow: false,
      selectLeftList: [],
      search: '',
      leftList: [],
      defaultProps: {
        id: 'storeGroupId',
        label: 'storeGroupName',
        children: 'children',
      },
      searchValue: '',
      selectIdList: [],
      selectRightList: [],
      refash: false,
    };
  },
  mounted () {
    this.getTreeContent();
    this.selectLeftList = this.selectData;
    this.selectRightList = this.selectData;
    for (const item of this.selectData) {
      if (
        !this.selectIdList.find(i => {
          return i === item.storeGroupId;
        })
      ) {
        this.selectIdList.push(item.storeGroupId);
      }
    }
  },
  methods: {
    getTreeContent () {
      const params = {
        search: this.search,
      };
      request.get('/api-plug/store-group-list', { params }).then(res => {
        if (res.data.errorCode === 0) {
          this.leftList = res.data.result || [];
          this.handleDataStatus(this.leftList, this.selectLeftList);
          for (const item of this.selectLeftList) {
            if (
              !this.selectIdList.find(i => {
                return i === item.storeGroupId;
              })
            ) {
              this.selectIdList.push(item.storeGroupId);
            }
          }
          this.$refs.tree.setCheckedKeys(this.selectIdList);
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    // 处理已选中数据不可取消
    handleDataStatus (arr, list) {
      for (const item of arr) {
        if (
          list.find(i => {
            return i.storeGroupId === item.storeGroupId;
          })
        ) {
          this.$nextTick(() => {
            this.$set(item, 'disabled', true);
          });
        } else {
          this.$nextTick(() => {
            this.$set(item, 'disabled', false);
          });
        }
        if (item.children.length) {
          this.handleDataStatus(item.children, list);
        }
      }
    },
    // 选中事件
    checkChange (data, checked, ins) {
      data.disabled = true;
      this.selectIdList = [];
      for (const item of this.selectLeftList) {
        this.selectIdList.push(item.storeGroupId);
      }
      const selectList = this.$refs.tree.getCheckedNodes();
      for (const item of selectList) {
        if (
          !this.selectLeftList.find(i => {
            return i.storeGroupId === item.storeGroupId;
          })
        ) {
          this.selectLeftList.push(item);
        }
      }
      this.selectRightList = copy(this.selectLeftList);

      /*********************
      if (checked) {
        this.selectIdList = this.$refs.tree.getCheckedKeys();
        let selectList = this.$refs.tree.getCheckedNodes();
        for (let item of copy(selectList)) {
          if (
            !this.selectLeftList.find(i => {
              return i.storeGroupId === item.storeGroupId;
            })
          ) {
            this.selectLeftList.push(item);
          }
        }
        this.selectRightList = copy(this.selectLeftList);
      } else {
        //取消选中
        this.selectLeftList.splice(this.selectLeftList.findIndex(i => i.storeGroupId === data.storeGroupId), 1);
        this.selectRightList.splice(this.selectRightList.findIndex(i => i.storeGroupId === data.storeGroupId), 1);
      }
      ************** */
    },
    // 通过id得到选择的数组对象
    // handleData(selectArr, arr) {
    //   for (let i of arr) {
    //     if (
    //       selectArr.find(item => {
    //         return item === i.storeGroupId;
    //       })
    //     ) {
    //       this.selectLeftList.push({
    //         storeGroupId: i.storeGroupId,
    //         storeGroupName: i.storeGroupName
    //       });
    //     }
    //     if (i.children.length) {
    //       this.handleData(selectArr, i.children);
    //     }
    //   }
    // },
    // 右侧移除删除
    removeSelect (item, index) {
      // item.disabled = false;
      // this.$set(this.leftList, 'item', false);
      this.selectRightList.splice(copy(this.selectRightList).findIndex(i => i.storeGroupId === item.storeGroupId), 1);
      this.selectLeftList.splice(this.selectLeftList.findIndex(i => i.storeGroupId === item.storeGroupId), 1);
      this.selectIdList = [];
      for (const item of this.selectLeftList) {
        this.selectIdList.push(item.storeGroupId);
      }
      this.searchValue = '';
      this.$refs.tree.setCheckedKeys(this.selectIdList);
      this.handleDataStatus(this.leftList, this.selectLeftList);
    },
    // 全部清除
    clearAll () {
      this.$refs.tree.setCheckedKeys([]);
      this.selectRightList = [];
      this.selectLeftList = [];
      this.selectIdList = [];
      this.handleDataStatus(this.leftList, this.selectLeftList);
    },
    // 右侧搜索
    getRightList () {
      const newData = this.selectLeftList.filter(item => {
        if (item.storeGroupName.indexOf(this.searchValue) > -1) {
          return item;
        }
        return newData;
      });

      this.selectRightList = newData;
    },
    // 取消选中
    cancel () {
      this.selectRightList = [];
      this.selectLeftList = [];
      this.$refs.tree.setCheckedKeys([]);
      this.handleDataStatus(this.leftList, this.selectLeftList);
      this.$emit('getSelectList', this.selectLeftList);
      this.popoverShow = false;
    },
    // 提交
    submit () {
      if (this.selectLeftList.length < 1) {
        this.$message.error('请至少选择一个分组');
        return false;
      }
      // 过滤数据只保留部分有用字段
      this.selectLeftList.forEach(v => {
        delete v.children;
        delete v.parentGroupId;
        delete v.groupLevel;
        delete v.value;
        delete v.key;
        delete v.disabled;
      });
      this.$emit('getSelectList', this.selectLeftList);
      this.popoverShow = false;
    },
  },
};
</script>
<style scoped>
.group-title {
  width: 240px;
  padding-left: 12px;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  color: #606266;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  box-sizing: border-box;
}
.store-group-content {
  font-size: 0px;
}
.store-group-left-content {
  width: 200px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  display: inline-block;
}
.store-group-right-content {
  width: 200px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  display: inline-block;
  margin-left: 15px;
  vertical-align: top;
}
.store-group-content .title {
  display: flex;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;
  background: #f5f7fa;
  padding: 0 10px;
  font-size: 16px;
  color: #303133;
}
.group-num {
  font-size: 12px;
  color: #909399;
}
.search-content {
  margin: 10px;
}

.border-radius20 /deep/ input {
  border-radius: 20px;
}
.tree-content {
  margin-bottom: 10px;
  height: 210px;
  overflow-y: auto;
}
.list-content {
  margin-bottom: 10px;
  height: 210px;
  overflow-y: auto;
  font-size: 14px;
}
.list-item {
  display: flex;
  justify-content: space-between;
  color: #606266;
  font-size: 14px;
  margin-bottom: 14px;
  padding: 0 10px;
  line-height: 16px;
}
.list-item .el-icon-close {
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
  font-size: 14px;
}
.list-item .el-icon-close:hover {
  background: #909399;
  color: #fff;
}
.storeGroup-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 150px;
}
.store-button {
  height: 22px;
  line-height: 34px;
  text-align: right;
}
.tree-content /deep/ .el-tree-node__label {
  text-overflow: ellipsis;
  overflow: hidden;
}
.no-data-content {
  color: #909399;
  font-size: 14px;
  margin: 40px auto;
  text-align: center;
}
</style>
