<template>
  <view
    class="Mall4j component-address-pocker animation-element-wrapper"
    :class="{show: showPicker}"
    @tap.stop="hiddenFloatView(0)"
  >
    <view
      class="animation-element"
      :class="{show: showPicker}"
      @tap.stop="nono"
    >
      <view
        class="right-bt"
        @tap.stop="hiddenFloatView"
      >
        确定
      </view>
      <view class="line" />
      <picker-view
        indicator-style="height: 80rpx;"
        :class="{show: showPicker}"
        :value="value"
        @change="bindChange"
        @tap.stop="nono"
      >
        <!--省-->
        <picker-view-column>
          <view
            v-for="(item, pIndex) in provArray"
            :key="pIndex"
          >
            {{ item.areaName }}
          </view>
        </picker-view-column>
        <!--地级市-->
        <picker-view-column>
          <view
            v-for="(item, cIndex) in cityArray"
            :key="cIndex"
          >
            {{ item.areaName }}
          </view>
        </picker-view-column>
        <!--区县-->
        <picker-view-column>
          <view
            v-for="(item, aIndex) in areaArray"
            :key="aIndex"
          >
            {{ item.areaName }}
          </view>
        </picker-view-column>
      </picker-view>
    </view>
  </view>
</template>
<script setup>

const props = defineProps({
  addrIds: {
    type: Array,
    default: () => [0, 0, 0]
  },
  showPicker: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['setAddressInfo'])

const value = ref([0, 0, 0])
let provinceId = 0
let cityId = 0
let areaId = 0
let province = ''
let city = ''
let area = ''
const provArray = ref([])
const cityArray = ref([])
const areaArray = ref([])
let index = [0, 0, 0]

onMounted(() => {
  initCityData(props.addrIds[0], props.addrIds[1], props.addrIds[2])
})

/**
 * 初始化地址数据
 */
const initCityData = (provinceId, cityId, areaId) => {
  const params = {
    url: '/tmerclub_order/area/list',
    method: 'GET',
    data: {}
  }
  if (!uni.getStorageSync('cloudProvArray')) {
    http.request(params).then(res => {
      provArray.value = res
      uni.setStorageSync('cloudProvArray', res)
      initAll(res, provinceId, cityId, areaId)
    })
  } else {
    provArray.value = uni.getStorageSync('cloudProvArray')
    initAll(uni.getStorageSync('cloudProvArray'), provinceId, cityId, areaId)
  }
}
/**
 * 处理省市区地址列表
 */
const initAll = (allData, provinceId, cityId, areaId) => {
  let _value = [0, 0, 0]
  if (provinceId) {
    for (const provinceIndex in allData) {
      if (allData[provinceIndex].areaId === provinceId) {
        _value = [Number(provinceIndex), _value[1], _value[2]]
        cityArray.value = allData[provinceIndex].areas
      }
    }
    for (const cityIndex in allData[_value[0]].areas) {
      if (allData[_value[0]].areas[cityIndex].areaId === cityId) {
        _value = [_value[0], Number(cityIndex), _value[2]]
        areaArray.value = allData[_value[0]].areas[cityIndex].areas
      }
    }
    for (const areaIndex in allData[_value[0]].areas[_value[1]].areas) {
      if (allData[_value[0]].areas[_value[1]].areas[areaIndex].areaId === areaId) {
        _value = [_value[0], _value[1], Number(areaIndex)]
      }
    }
    index = _value
  } else {
    cityArray.value = allData[0].areas
    areaArray.value = allData[0].areas[0].areas
  }
  setTimeout(() => {
    value.value = _value
  }, 0)
}

// 滑动事件
const bindChange = (e) => {
  if (!provArray.value.length) return
  const val = e.detail.value // 判断滑动的是第几个column
  // 若省份column做了滑动则定位到地级市和区县第一位
  if (index[0] != val[0]) {
    val[1] = 0
    val[2] = 0 // 更新数据
    cityArray.value = provArray.value[val[0]].areas
    areaArray.value = provArray.value[val[0]].areas[0].areas
  } else if (index[1] != val[1]) {
    // 若省份column未做滑动，地级市做了滑动则定位区县第一位
    if (index[1] != val[1]) {
      val[2] = 0
      areaArray.value = provArray.value[val[0]].areas[val[1]].areas
    }
  }
  index = val
  value.value = [val[0], val[1], val[2]]
  province = provArray.value[value.value[0]].areaName
  city = cityArray.value[value.value[1]].areaName
  area = areaArray.value[value.value[2]].areaName
  provinceId = provArray.value[value.value[0]].areaId
  cityId = cityArray.value[value.value[1]].areaId
  areaId = areaArray.value[value.value[2]].areaId
}

// 隐藏弹窗浮层
const hiddenFloatView = (isChange) => {
  // 选中的省市区名称及id
  const selectedAddrInfo = {
    area: area || provArray.value[index[0]].areas[index[1]].areas[index[2]].areaName,
    areaId: areaId || provArray.value[index[0]].areas[index[1]].areas[index[2]].areaId,
    city: city || provArray.value[index[0]].areas[index[1]].areaName,
    cityId: cityId || provArray.value[index[0]].areas[index[1]].areaId,
    province: province || provArray.value[index[0]].areaName,
    provinceId: provinceId || provArray.value[index[0]].areaId
  }
  emit('setAddressInfo', selectedAddrInfo, isChange)
}

/**
 * 空方法
 */
const nono = () => {

}

</script>

<style lang="scss" scoped>
@use './address-picker.scss';
</style>
