<template>
	<view>
    <uni-popup ref="selectAreaPopup" type="bottom" @change="selectAreaStatusChange">
      <view class="select-area-popup">
        <picker-view :indicator-style="`height: 100rpx;`" :value="value" @change="changeArea" 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: '',
      area_index: '',
      street_index: '',
      province_list: [],
      city_list: [],
      area_list: [],
      street_list: [],
      selected_info: {},
    };
  },
  watch: {
    isShow: {
      handler(newValue) {
        // console.log('状态变更',newValue)
        if(newValue) this.$refs.selectAreaPopup.open('bottom');
        else this.$refs.selectAreaPopup.close();
      },
      deep: true
    },
    province_index: {
      handler(newValue) {
        let areaInfo = this.province_list[this.province_index] || {};
        this.city_index = 0;
        this.changeSelectContent(areaInfo, 'province');
      },
      deep: true
    },
    city_index: {
      handler(newValue) {
        let areaInfo = this.province_list[this.province_index] || {};
        this.area_index = 0;
        this.changeSelectContent(areaInfo, 'city');
      },
      deep: true
    },
    area_index: {
      handler(newValue) {
        let areaInfo = this.province_list[this.province_index] || {};
        this.street_index = 0;
        this.changeSelectContent(areaInfo, 'area');
      },
      deep: true
    },
    street_index: {
      handler(newValue) {
        let areaInfo = this.province_list[this.province_index] || {};
        this.changeSelectContent(areaInfo, 'street');
      },
      deep: true
    },
  },
  mounted() {
    this.$nextTick(function() {
      this.getAreaList(0);
    })
  },
  methods: {
    // 关闭弹框
    selectAreaStatusChange(e){
      let status = e.show || false;
      if(!status) this.$emit("close");
    },
    // 获取地区列表
    getAreaList(pid){
      let _this = this;
      getCityV2(pid).then(res => {
        if (Number(res.status) === 200) {
          let data = res.data || {};
          let singleInfo = data[0] ?? {};
          switch (Number(singleInfo.level)) {
            case 1:
              _this.province_list = data;
              _this.changeSelectContent(singleInfo, 'province');
              break;
            case 2:
              _this.city_list = data;
              _this.changeSelectContent(singleInfo, 'city');
              break;
            case 3:
              _this.area_list = data;
              _this.changeSelectContent(singleInfo, 'area');
              break;
            case 4:
              _this.street_list = data;
              _this.changeSelectContent(singleInfo, 'street');
              break;
          }

          _this.$forceUpdate();
        }
      }).catch(err => {
        console.log('地区获取失败', err)
      });
    },
    // 地区选择器 - 地区改变
    changeArea(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('changeArea',{
        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 {
    height: 100rpx!important;
    line-height: 100rpx!important;
    text-align: center;
  }
}
</style>
