<template>
	<view>
    <uni-popup ref="selectAreaPopup" type="bottom" @change="selectAreaStatusChange">
      <view class="select-area-popup">
        <picker-view :indicator-style="`height: 100rpx;`" :value="value" @change="changeAddress" class="picker-view">
          <picker-view-column v-if="is_show_province">
            <view class="item" v-for="(item,index) in province_list" :key="index">{{ item.name }}</view>
          </picker-view-column>
          <picker-view-column v-if="is_show_city">
            <view class="item" v-for="(item,index) in city_list" :key="index">{{ item.name }}</view>
          </picker-view-column>
          <picker-view-column v-if="is_show_area">
            <view class="item" v-for="(item,index) in area_list" :key="index">{{ item.name }}</view>
          </picker-view-column>
          <picker-view-column v-if="is_show_street">
            <view class="item" v-for="(item,index) in street_list" :key="index">{{ item.name }}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
	</view>
</template>

<script>
import {getCityV2} from "@/api/api";
export default {
  props: {
    // 是否显示
    isShow: {
      type: Boolean,
      default: false
    },
    // 是否显示省
    is_show_province:{
      type: Boolean,
      default: true
    },
    // 是否显示市
    is_show_city:{
      type: Boolean,
      default: true
    },
    // 是否显示 区/县
    is_show_area:{
      type: Boolean,
      default: true
    },
    // 是否显示 镇/街道
    is_show_street:{
      type: Boolean,
      default: true
    }
  },
  components: {},
  data() {
    return {
      value: [],
      province_index: 0,
      city_index: 0,
      area_index: 0,
      street_index: 0,
      province_list: [],
      city_list: [],
      area_list: [],
      street_list: [],
      selected_info: {},
    };
  },
  watch: {
    isShow: {
      handler(newValue) {
        // console.log('状态变更',newValue)
        if(newValue) {
          this.getAreaList(0);
          this.$refs.selectAreaPopup.open('bottom');
        }
        else {
          this.$refs.selectAreaPopup.close();
        }
      },
      deep: true
    },
    province_index: {
      handler(newValue) {
        this.value[0] = this.province_index || 0;
        let areaInfo = this.province_list[this.province_index] || {};
        this.changeSelectContent(areaInfo, 'province');
      },
      deep: true
    },
    city_index: {
      handler(newValue) {
        this.value[1] = this.city_index || 0;
        let areaInfo = this.city_list[this.city_index] || {};
        this.changeSelectContent(areaInfo, 'city');
      },
      deep: true
    },
    area_index: {
      handler(newValue) {
        this.value[2] = this.area_index || 0;
        let areaInfo = this.area_list[this.area_index] || {};
        this.changeSelectContent(areaInfo, 'area');
      },
      deep: true
    },
    street_index: {
      handler(newValue) {
        this.value[3] = this.street_index || 0;
        let areaInfo = this.street_list[this.street_index] || {};
        this.changeSelectContent(areaInfo, 'street');
      },
      deep: true
    },
  },
  mounted() {},
  methods: {
    // 关闭弹框
    selectAreaStatusChange(e){
      let status = e.show || false;
      if(!status) this.$emit("close");
    },
    // 获取地区列表
    async getAreaList(pid){
      let _this = this;
      await getCityV2(pid).then(res => {
        if (Number(res.status) === 200) {
          let data = res.data || {};
          let singleInfo = data[0] ?? {};
          switch (Number(singleInfo.level)) {
            case 1:
              if(!_this.is_show_province) return false;
              _this.province_list = data;
              if(Number(_this.city_index) > 0) {
                _this.getAreaList(singleInfo.id);
              } else {
                _this.changeSelectContent(singleInfo, 'province');
              }
              break;
            case 2:
              if(!_this.is_show_city) return false;
              _this.city_list = data;
              if(Number(_this.city_index) > 0){
                _this.city_index = 0;
              }else{
                if(Number(_this.area_index) > 0) {
                  _this.getAreaList(singleInfo.id);
                } else {
                  _this.changeSelectContent(singleInfo, 'city');
                }
              }
              break;
            case 3:
              if(!_this.is_show_area) return false;
              _this.area_list = data;
              if(Number(_this.area_index) > 0){
                _this.area_index = 0;
              }else{
                if(Number(_this.street_index) > 0) {
                  _this.getAreaList(singleInfo.id);
                } else {
                  _this.changeSelectContent(singleInfo, 'area');
                }
              }
              break;
            case 4:
              if(!_this.is_show_street) return false;
              _this.street_list = data;
              if(Number(_this.street_index) > 0){
                _this.street_index = 0;
              }else{
                if(Number(_this.street_index) <= 0) {
                  _this.changeSelectContent(singleInfo, 'street');
                }
              }
              break;
          }

          _this.$forceUpdate();
        }
      }).catch(err => {
        console.log('地区获取失败', err)
      });
    },
    // 地区选择器 - 地区改变
    changeAddress(e){
      let indexArr = e.detail.value || e.target.value;
      this.province_index = indexArr[0] || 0;
      this.city_index = indexArr[1] || 0;
      this.area_index = indexArr[2] || 0;
      this.street_index = indexArr[3] || 0;
    },
    // 改变选中内容
    changeSelectContent(areaInfo, type){
      if(type != 'street') this.getAreaList(areaInfo.id);
      this.$emit('changeAddress',{
        type: type,
        value: areaInfo
      });
    },
  }
}
</script>

<style scoped lang="scss">
.select-area-popup{
  min-height: 80vh!important;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  background: #FFFFFF;

  .picker-view {
    width: 100vw!important;
    height: 80vh!important;
    margin-top: 20rpx;
  }
  .item {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
