<template>
  <sv-picker
    :is-popup="true"
    :slots="slots"
    @cancel="cancel"
    @confirm="confirm"
    @sliding="handlePickerSliding"
    @close="handlePickerClose"
    ref="svPickerRef">
  </sv-picker>
</template>

<script type="es6">
  import distData from './city'

  import svPicker from '../Picker'
  export default {
    name: 'sv-dist-picker',
    components: {
      svPicker
    },
    data () {
      return {
        currentValue: []
      }
    },
    props: {
      value: {
        type: Array,
        default () {
          return []
        }
      },
      level: {
        type: Number,
        default: 3,
        validator (val) {
          if (val !== 1 && val !== 2 && val !== 3) {
            console.error('prop "level" value can only be 1,2 or 3')
            return false
          }
          return true
        }
      }
    },
    computed: {
      slots () {
        let slots = []
        for (let i = 0; i < this.level; i++) {
          slots.push(
            {
              values: []
            }
          )
        }
        return slots
      }
    },
    watch: {
      value (val) {
        this.currentValue = val
      },
      currentValue (val) {
        this.$emit('input', val)
      }
    },
    methods: {
      cancel (event) {
        this.$emit('cancel', event)
      },
      confirm (values) {
        this.$emit('confirm', values)
        this.$emit('input', values)
      },
      open () {
        if (this.level !== 1 && this.level !== 2 && this.level !== 3) {
          return
        }
        this.setProvinces()
        this.$refs.svPickerRef.open()

        this.$nextTick(() => {
          if (this.value && this.value.length > 0) { // 设置默认选中的区域
            if (this.slots[0].values.indexOf(this.value[0]) < 0) {
              console.warn(`"${this.value[0]}"省不存在，请查证`)
              return
            }

            this.$refs.svPickerRef.setSlotCheckedValue(0, this.value[0])
            this.slots.length > 1 && this.setCities(this.slots[0].values.indexOf(this.value[0]))

            if (!this.value[1]) {
              return
            } else {
              if (this.slots.length === 1) {
                console.warn('您当前设置的级别为1级，故第二个，第三个默认值会被忽略')
                return
              }

              if (this.slots[1].values.indexOf(this.value[1]) < 0) {
                console.warn(`"${this.value[1]}"市(直辖市)不存在或不隶属于"${this.value[0]}"省，请查证`)
                return
              }

              if (this.slots.length ===3) {
                this.setDistricts(this.slots[0].values.indexOf(this.value[0]), this.slots[1].values.indexOf(this.value[1]))
              }

              this.slots.length > 1 && this.$refs.svPickerRef.setSlotCheckedValue(1, this.value[1])
            }

            if (!this.value[2]) {
              return
            } else {
              if (this.slots.length === 2) {
                console.warn('您当前设置的级别为2级，故第三个默认值会被忽略')
                return
              }
              if (this.slots[2].values.indexOf(this.value[2]) < 0) {
                console.warn(`"${this.value[2]}"区(县)不存在或不隶属于"${this.value[1]}"市(直辖市)，请查证`)
                return
              }

              this.$refs.svPickerRef.setSlotCheckedValue(2, this.value[2])
            }
          }
        })
      },
      setProvinces () {
        let provinceValues = []
        let provinceTexts = []
        distData.forEach(dist => {
          provinceValues.push(dist.name)
          provinceTexts.push(dist.name)
        })
        this.slots[0].values = provinceValues
        this.slots[0].texts = provinceTexts

        this.slots.length > 1 && this.setCities(0)
        this.slots.length === 3 && this.setDistricts(0, 0)
      },
      setCities (provinceIndex) {
        let cityTexts = []
        let cityValues = []
        distData[provinceIndex].cities.forEach(city => {
          cityValues.push(city.name)
          cityTexts.push(city.name)
        })

        this.slots[1].values = cityValues
        this.slots[1].texts = cityTexts
      },
      setDistricts (provinceIndex, cityIndex) {
        let districtTexts = []
        let districtValues = []

        distData[provinceIndex].cities[cityIndex].districts.forEach(district => {
          districtTexts.push(district.name)
          districtValues.push(district.name)
        })

        this.slots[2].values = districtValues
        this.slots[2].texts = districtTexts
      },
      handlePickerClose () {
      },
      handlePickerSliding (picker, slotIndex, isSlidingEnd) {
        switch (slotIndex) {
          case 0:
            if (this.slots.length === 2) {
              if (isSlidingEnd) {
                picker.setSlotCheckedIndex(1, 0)
              }
              this.setCities(picker.getSlotCheckedIndex(slotIndex))
            }
            if (this.slots.length === 3) {
              if (isSlidingEnd) {
                picker.setSlotCheckedIndex(2, 0)
              }
              this.setCities(picker.getSlotCheckedIndex(slotIndex))
              this.setDistricts(picker.getSlotCheckedIndex(slotIndex), 0)
            }
            break
          case 1:
            if (isSlidingEnd && this.slots.length=== 3) {
              picker.setSlotCheckedIndex(2, 0)
            }
            this.slots.length=== 3 && this.setDistricts(picker.getSlotCheckedIndex(slotIndex - 1), picker.getSlotCheckedIndex(slotIndex))
            break
        }
      }
    },
    mounted () {
      this.setProvinces()
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss"></style>
