<template>
  <van-popup
    v-model="show"
    v-shwo="show"
    position="bottom"
    round
    @close="close"
  >
    <van-picker
      ref="picker"
      :columns="columns"
      show-toolbar
      :loading="loading"
      value-key="name"
      @confirm="confirm"
      @change="change"
      @close="close"
      @cancel="close"
    >
      <template #title>
        <div class="picker-area-title">
          选择省市区
        </div>
      </template>
      <template #confirm>
        <div class="picker-area-buttons">
          <van-icon
            name="cross"
            size="20"
          />
        </div>
      </template>
      <template #cancel>
        <div class="picker-area-buttons" />
      </template>
      <template #columns-bottom>
        <div class="picker-area-bottom">
          <div
            class="area-bottom-left"
            @click="close"
          >
            取消
          </div>
          <div
            class="area-bottom-right"
            @click="sbumit"
          >
            确定
          </div>
        </div>
      </template>
    </van-picker>
  </van-popup>
</template>

<script>
import { getProvinceList, getCityList, getCountyList } from './api';
import store from 'storejs';
export default {
  props: {
    show: {
      type: Boolean,
      default:() => false
    },
    locationAreaCode: {
      type: Array,
      default:() => []
    },
    projectEquityNo: {
      type: String,
      default:() => ''
    }
    // CX202302091000154321
  },
  data() {
    return {
      columns: [

      ],
      provinceList: [],
      cityList: [],
      countyList:[],
      loading: true,
      result: null,
      values:[]
    };
  },
  watch: {
    locationAreaCode:{
      async handler(nv, ov) {
        console.log('locationAreaCode', nv, ov);
        if (nv) {
          this.result = store.get('geolocation');
          this.provinceList = await this.getProvinceList();
          this.cityList = await this.getCityList(nv[0]);
          this.countyList = await this.getCountyList(nv[1]);
          if(this.cityList) {
            const provinceIndex = this.provinceList.findIndex(ele => ele.id === nv[0]);
            const cityIndex = this.cityList && this.cityList.findIndex(ele => ele.id === nv[1]);
            const countyIndex = this.countyList && this.countyList.findIndex(ele => ele.id === nv[2]);
            this.columns = [{ values: this.provinceList, defaultIndex:provinceIndex}, { values: this.cityList, defaultIndex:cityIndex}, { values: this.countyList, defaultIndex:countyIndex }];
            console.log('locationAreaCode', this.provinceList, provinceIndex);
            const data = [this.provinceList[provinceIndex], this.cityList[cityIndex], this.countyList[countyIndex]];
            if (this.result) {
              this.$emit('confirm', data);
            }
          }
        }
      },
      deep:true,
      immediate:true
    },
    projectEquityNo: {
      handler(nv) {
        console.log('projectEquityNo', nv);
        this.initData();
      }
    }

  },
  created() {
    this.result = store.get('geolocation');
  },
  methods: {
    // 提交
    sbumit() {
      const values = this.$refs.picker.getValues();
      console.log('sbumit', values);

      this.$emit('confirm', values);
    },
    // 初始化 省市县信息
    async initData() {
      this.provinceList = await this.getProvinceList();
      console.log('this.provinceList1', this.provinceList);
      this.cityList = await this.getCityList(this.provinceList[0].id);
      this.countyList = await this.getCountyList(this.cityList[0].id);
      this.columns = [{ values: this.provinceList }, { values: this.cityList }, { values: this.countyList }];
      const data = [this.provinceList[0], this.cityList[0], this.countyList[0]];
      console.log('initData', data);
      if (this.result) {
        this.$emit('confirm', data);
      }
    },

    // 获取省列表
    getProvinceList() {
      const datas = {projectEquityNo:this.projectEquityNo};
      return new Promise((resolve, rejects) => {
        getProvinceList(datas).then(res => {
          this.hideLoading();
          const data = res.data.provinceList.map(ele => {
            return {
              name: ele.provinceName,
              id:ele.provinceId
            };
          });
          resolve(data);
        }).catch(err => {
          rejects(err);
        });
      }).finally(this.hideLoading);
    },
    // 获取省列表下市区
    getCityList(provinceId) {
      console.log('this.provinceList', provinceId);
      if (!provinceId) {
        return;
      }
      return new Promise((resolve, rejects) => {
        getCityList({ provinceId:provinceId, projectEquityNo:this.projectEquityNo }).then(res => {
          this.hideLoading();
          const data = res.data.cityList.map(ele => {
            return {
              name: ele.cityName,
              id:ele.cityId
            };
          });
          resolve(data);
        }).catch(err => {
          rejects(err);
        });
      }).finally(this.hideLoading);
    },
    // 获取市区县区
    getCountyList(cityId) {
      if (!cityId) {
        return;
      }
      return new Promise((resolve, rejects) => {
        this.hideLoading();
        getCountyList({ cityId, projectEquityNo:this.projectEquityNo}).then(res => {
          const data = res.data.countyList.map(ele => {
            return {
              name: ele.countyName,
              id:ele.countyId
            };
          });
          resolve(data);
        }).catch(err => {
          rejects(err);
        });
      }).finally(this.hideLoading);
    },
    // hideloading loading 琐住选择区域，防止重复操作
    hideLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 300);
    },
    // 确定按钮
    confirm(value, valueIndex) {
      console.log(value, valueIndex);
      // this.values = value;
      this.$emit('close', 'showArea');
    },
    // 滑动选择的change
    async change(picker, columnsIndex, currentChangeIndex) {
      console.log(picker, columnsIndex, currentChangeIndex);
      switch (currentChangeIndex) {
        case 0:
          this.loading = true;
          this.cityList = await this.getCityList(columnsIndex[currentChangeIndex].id);
          this.$refs.picker.setColumnValues(currentChangeIndex + 1, this.cityList);
          this.$refs.picker.setColumnIndex(currentChangeIndex + 1, 0);

          this.countyList = await this.getCountyList(this.cityList[0].id);
          this.$refs.picker.setColumnValues(currentChangeIndex + 2, this.countyList);
          this.$refs.picker.setColumnIndex(currentChangeIndex + 2, 0);
          this.hideLoading();
          break;
        case 1:
          this.loading = true;
          this.countyList = await this.getCountyList(columnsIndex[currentChangeIndex].id);
          this.$refs.picker.setColumnValues(currentChangeIndex + 1, this.countyList);
          this.hideLoading();
          break;
        case 2:
          this.hideLoading();
          break;
        default:
          this.hideLoading();
          break;
      }
    },
    // 关闭
    close() {
      this.$emit('close', 'showArea');
    }

  }
};
</script>

<style lang="scss" scoped>
.picker-area-title{
  height: 18px;
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #02120F;
  line-height: 18px;
}
.picker-area-buttons{
  width: 30px;
  height: 30px;
  display: flex;
  justify-items: center;
  align-items: center;
  color: #999999;
}
.picker-area-bottom{

  height: 49px;
  padding:5px 12px 21px 12px;
  display: flex;
  justify-content: space-between;
  box-shadow: inset 0px 1px 0px 0px #E9E9E9;

}
.area-bottom-left,.area-bottom-right{
  width: 170px;
  height: 40px;
  border-radius: 20px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 40px;
  text-align: center;
}
.area-bottom-left{
  border: 1px solid #C0C0C0;
  color: #212121;

}
.area-bottom-right{
  background: #00BDA5;
  color: #fff;
}
</style>
