<template>
  <picker
    mode="multiSelector"
    :value="multiIndex"
    :range="multiArray"
    @change="handleValueChange"
    @columnchange="handleColumnChange"
  >
    <slot></slot>
  </picker>
</template>

<script>
import CHINA_REGIONS from './regions.json'

export default {
  props: {
    defaultRegions: {
      type: Array,
      default() {
        return []
      }
    },
    defaultRegionCode: {
      type: String
    },
    defaultRegion: [String, Array]
  },
  data() {
    return {
      cityArr: CHINA_REGIONS[0].childs,
      districtArr: CHINA_REGIONS[0].childs[0].childs,
      multiIndex: [0, 0, 0],
      isInitMultiArray: true
    }
  },
  computed: {
    multiArray() {
      return this.pickedArr.map((arr) => arr.map((item) => item.name))
    },
    pickedArr() {
      // 进行初始化
      if (this.isInitMultiArray) {
        return [CHINA_REGIONS, CHINA_REGIONS[0].childs, CHINA_REGIONS[0].childs[0].childs]
      }
      return [CHINA_REGIONS, this.cityArr, this.districtArr]
    }
  },
  watch: {
    defaultRegion: {
      handler(region, oldRegion) {
        if (Array.isArray(region)) {
          // 避免传的是字面量的时候重复触发
          oldRegion = oldRegion || []
          if (region.join('') !== oldRegion.join('')) {
            this.handleDefaultRegion(region)
          }
        } else if (region && region.length == 6) {
          this.handleDefaultRegion(region)
        } else {
          console.warn('defaultRegion非有效格式')
        }
      },
      immediate: true
    }
  },
  methods: {
    handleColumnChange(e) {
      // console.log(e);
      this.isInitMultiArray = false
      const that = this
      const col = e.detail.column
      const row = e.detail.value
      that.multiIndex[col] = row
      try {
        switch (col) {
          case 0:
            if (CHINA_REGIONS[that.multiIndex[0]].childs.length == 0) {
              that.cityArr = that.districtArr = [CHINA_REGIONS[that.multiIndex[0]]]
              break
            }
            that.cityArr = CHINA_REGIONS[that.multiIndex[0]].childs
            that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[that.multiIndex[1]].childs
            break
          case 1:
            that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[that.multiIndex[1]].childs
            break
          case 2:
            break
        }
      } catch (e) {
        // console.log(e);
        that.districtArr = CHINA_REGIONS[that.multiIndex[0]].childs[0].childs
      }
    },
    handleValueChange(e) {
      // 结构赋值
      const [index0, index1, index2] = e.detail.value
      const [arr0, arr1, arr2] = this.pickedArr
      const address = [arr0[index0], arr1[index1], arr2[index2]]
      // console.log(address);
      this.$emit('getRegion', address)
    },
    handleDefaultRegion(region) {
      const isCode = !Array.isArray(region)
      this.isInitMultiArray = false
      let children = CHINA_REGIONS
      for (let i = 0; i < 3; i++) {
        for (let j = 0; j < children.length; j++) {
          const condition = isCode
            ? children[j].code == region.slice(0, (i + 1) * 2)
            : children[j].name.includes(region[i])
          if (condition) {
            // 匹配成功进行赋值
            // console.log(i,j,children.length-1);
            children = children[j].childs
            if (i == 0) {
              this.cityArr = children
            } else if (i == 1) {
              this.districtArr = children
            }
            this.$set(this.multiIndex, i, j)
            // console.log(this.multiIndex);
            break
          } else {
            // 首次匹配失败就用默认的初始化
            // console.log(i,j,children.length-1);
            if (i == 0 && j == children.length - 1) {
              this.isInitMultiArray = true
            }
          }
        }
      }
    }
  }
}
</script>
