<template>
  <el-popover placement="bottom-start" width="420" trigger="click" v-model="popoverShow">
    <div class="store-area-content">
      <div class="store-area-left-content">
        <div v-for="(item, index) in areaList" :key="index" class="list-item" @click="getRightList(item, index)">
          <div>
            <el-checkbox :indeterminate="item.indeterminate" v-model="item.isCheck" @change="checkProvinceChange(item, index)"></el-checkbox>
            <span class="list-name"> {{ item.provinceName }}</span>
          </div>
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div class="store-area-right-content">
        <div v-if="currentCityList.length > 0">
          <div v-for="(v, i) in currentCityList" :key="i" class="list-item">
            <div>
              <el-checkbox :indeterminate="v.indeterminate" v-model="v.isCheck" @change="checkCityChange()"></el-checkbox>
              <span class="list-name"> {{ v.cityName }}</span>
            </div>
          </div>
        </div>
        <div v-else class="no-data-content">
          暂无数据
        </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">已选择 {{ totalProvince }} 个省 {{ totalCity }} 个市区</div>
  </el-popover>
</template>
<script>
import request from '../../service/request.js';
export default {
  props: {
    selectData: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      areaList: [],
      popoverShow: false,
      currentCityList: [],
      totalCity: 0,
      totalProvince: 0,
      currentIndex: 0
    };
  },
  watch: {
    areaList: {
      /* indeterminate isCheck
       * true true 半勾选
       * false false 不选
       * false true 全选
       */
      handler(val) {
        // 全选计算省数量
        this.totalProvince = this.areaList.filter(v => !v.indeterminate && v.isCheck).length;
        this.totalCity = 0;
        this.areaList.map(v => {
          // 半勾选计算市数量
          if (v.isCheck && v.children.length) {
            v.children.map(w => {
              if (w.isCheck) {
                this.totalCity++;
              }
            });
          }
        });
      },
      deep: true
    }
  },
  mounted() {
    this.getAreaList();
  },
  methods: {
    //获取左侧区域列表
    getAreaList() {
      request.get('/api-plug/dict-tree-store-widget').then(res => {
        if (res.data.errorCode === 0) {
          this.areaList = res.data.result.map(v => ({
            isCheck: false,
            indeterminate: false,
            label: v.provinceName,
            id: v.provinceId,
            ...v,
            children: v.children.map(w => ({
              isCheck: false,
              label: w.cityName,
              id: w.cityId,
              ...w
            }))
          }));
          if (this.selectData.length > 0) {
            let selectId = this.selectData.map(u => u.id);
            selectId.map(u => {
              this.areaList.map(v => {
                // 全选 市一起勾选
                if (u === v.provinceId) {
                  v.indeterminate = false;
                  v.isCheck = true;
                  v.children.map(w => {
                    w.isCheck = true;
                  });
                }
                // 半勾选
                v.children.map(w => {
                  if (u === w.cityId) {
                    w.isCheck = true;
                    v.indeterminate = true;
                    v.isCheck = true;
                  }
                });
              });
            });
          }
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    // 左侧选中
    checkProvinceChange(item, index) {
      this.currentIndex = index;
      item.children.map(v => {
        v.isCheck = item.isCheck;
      });
      if (item.children.length) {
        const isAllCheck = item.children.every(v => v.isCheck);
        const isSomeCheck = item.children.some(v => v.isCheck);
        item.isCheck = isSomeCheck;
        item.indeterminate = !isAllCheck && isSomeCheck;
      }
      this.totalProvince = this.areaList.filter(v => !v.indeterminate && v.isCheck).length;
      this.totalCity = 0;
      this.areaList.map(v => {
        // 半勾选计算市数量
        if (v.isCheck && v.children.length) {
          v.children.map(w => {
            if (w.isCheck) {
              this.totalCity++;
            }
          });
        }
      });
    },
    //获取右侧区域
    getRightList(item, index) {
      this.currentIndex = index;
      this.currentCityList = item.children;
    },
    // 左侧选中
    checkCityChange() {
      let item = this.areaList[this.currentIndex];
      const isAllCheck = item.children.every(v => v.isCheck);
      const isSomeCheck = item.children.some(v => v.isCheck);
      item.isCheck = isSomeCheck;
      item.indeterminate = !isAllCheck && isSomeCheck;
      this.totalProvince = this.areaList.filter(v => !v.indeterminate && v.isCheck).length;
      this.totalCity = 0;
      this.areaList.map(v => {
        // 半勾选计算市数量
        if (v.isCheck && v.children.length) {
          v.children.map(w => {
            if (w.isCheck) {
              this.totalCity++;
            }
          });
        }
      });
    },
    //保存
    submit() {
      // 获取所有选中的省份
      let selectProvince = this.areaList.filter(v => {
        return v.isCheck && !v.indeterminate;
      });
      for (let item of selectProvince) {
        item.type = 0;
      }
      //获取市选中的
      let cityList = this.areaList.filter(v => {
        return v.isCheck && v.indeterminate;
      });
      let selectCity = [];
      for (let item of cityList) {
        for (let v of item.children) {
          v.type = 1;
          if (v.isCheck) {
            selectCity.push(v);
          }
        }
      }
      let selectList = selectProvince.concat(selectCity);
      let selectArr = [];
      selectList.forEach(element => {
        selectArr.push({ id: element.id, label: element.label, type: element.type });
      });
      if (selectArr.length < 1) {
        this.$message.error('请至少选择一个区域');
        return false;
      }
      //处理数据过滤掉无用字段
      this.$emit('getSelectList', selectArr);
      this.popoverShow = false;
    },
    cancel() {
      this.areaList.forEach(i => {
        (i.isCheck = false), (i.indeterminate = false);
        i.children.forEach(v => {
          v.isCheck = false;
        });
      });
      this.$emit('getSelectList', []);
      this.popoverShow = false;
    }
  }
};
</script>
<style scoped>
.store-area-content {
  font-size: 0;
}
.store-area-left-content {
  font-size: 14px;
  width: 200px;
  display: inline-block;
  height: 400px;
  overflow-y: auto;
  border-radius: 4px;
  border: 1px solid rgba(228, 231, 237, 1);
  box-sizing: border-box;
}
.list-item {
  padding: 0 10px;
  height: 34px;
  line-height: 34px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-self: center;
}
.list-item:hover {
  background: #f5f7fa;
}
.list-name {
  vertical-align: middle;
  line-height: 16px;
  margin-left: 5px;
}
.el-icon-arrow-right {
  height: 34px;
  line-height: 34px;
}
.store-area-right-content {
  font-size: 14px;
  width: 200px;
  display: inline-block;
  margin-left: 15px;
  height: 400px;
  overflow-y: auto;
  border-radius: 4px;
  border: 1px solid rgba(228, 231, 237, 1);
}
.store-button {
  height: 22px;
  line-height: 34px;
  text-align: right;
}
.group-title {
  width: 240px;
  padding-left: 12px;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  color: #606266;
  border-radius: 4px;
  border: 1px solid rgba(228, 231, 237, 1);
}
.no-data-content {
  color: #909399;
  font-size: 14px;
  margin: 40px auto;
  text-align: center;
}
</style>
