<template>
<confirm-popup class="address-popup" :visible="popup_visible" @cancel="onClickCancel" @confirm="onClickConfirm">
  <div class="address-popup__body">
    <!-- scroll-select-list 应用 v-if，确保显示时才初始化内部的 scroller，避免计算元素位置、大小不正确 -->
    <scroll-select-list
      v-if="popup_visible"
      class="address-popup__column"
      :value="selected_province_index"
      :list="province_list"
      @input="onProvinceChange"
    />
    <scroll-select-list
      v-if="popup_visible"
      class="address-popup__column"
      :value="selected_city_index"
      :list="selected_province[2]"
      @input="onCityChange"
    />
    <scroll-select-list
      v-if="popup_visible"
      class="address-popup__column"
      v-model="selected_county_index"
      :list="selected_city[2]"
    />
  </div>
</confirm-popup>
</template>

<script>
/* global china_address_data */
/**
 * 通过页面注入方式引入依赖模块和数据，包括：
 */
if (!window.china_address_data) {
  throw new Error('地址组件无法初始化，请先引入地址相关数据！')
}

import ConfirmPopup from '../ConfirmPopup'
import ScrollSelectList from './ScrollSelectList'

export default {
  data() {
    return {
      item_height: 34,
      selected_province_index: 0,
      selected_city_index: 0,
      selected_county_index: 0,
      popup_visible: false // 外部调用接口
    }
  },
  components: {
    ConfirmPopup,
    ScrollSelectList
  },
  created() {
    this.province_list = china_address_data
  },
  computed: {
    selected_province() {
      return this.province_list[this.selected_province_index]
    },
    selected_city() {
      const selected_province = this.selected_province
      if (selected_province) return selected_province[2][this.selected_city_index]
    },
    selected_county() {
      const selected_city = this.selected_city
      if (selected_city) return selected_city[2][this.selected_county_index]
    }
  },
  methods: {
    onProvinceChange(i) {
      if (i === this.selected_province_index) return // 避免不必要地更新地市、县区
      this.selected_province_index = i
      this.selected_city_index = 0
      this.selected_county_index = 0
    },
    onCityChange(i) {
      if (i === this.selected_city_index) return // 避免不必要地更新县区
      this.selected_city_index = i
      this.selected_county_index = 0
    },
    onCountyChange(i) {
      this.selected_county_index = i
    },
    // 外部调用接口
    set_data(province, city, county) {
      const province_index = indexOf(this.province_list, province)
      this.selected_province_index = province_index > -1 ? province_index : 0

      const city_index = indexOf(this.selected_province[2], city)
      this.selected_city_index = city_index > -1 ? city_index : 0

      const county_index = indexOf(this.selected_city[2], county)
      this.selected_county_index = county_index > -1 ? county_index : 0
    },
    get_data() {
      const prov = this.selected_province
      const city = this.selected_city
      const cont = this.selected_county
      return {
        address: [prov[0], city[0], cont[0]],
        address_desc: [prov[1], city[1], cont[1]],
        address_data: [prov, city, cont]
      }
    },
    // 事件处理
    onClickConfirm() {
      this.$emit('confirm', this.get_data())
    },
    onClickCancel() {
      this.$emit('cancel')
    },
    onClickMask() {
      this.$emit('cancel')
    }
  }
}

function indexOf(list, code_or_name) {
  for (let i = 0, len = list.length, item; i < len; i++) {
    item = list[i]
    if (code_or_name === item[0] || code_or_name === item[1]) return i
  }
  return -1
}
</script>

<style lang="less">
.address-popup {
  &__body {
    display: flex;
    height: 240px;
    background: #eee;
  }
  &__column {
    flex: 1;
    position: relative;
    height: 240px;
    overflow: hidden;
  }

  /* 过渡动效 */
  &-animate-mask-leave-active {
    opacity: 1;
  }
  &-animate-content-enter,
  &-animate-content-leave-active {
    transform: translate3d(0, 100%, 0);
  }
}
</style>
