<template>
  <div class="cl-area">
    <cl-picker ref="picker" :columns="areaColumns" value-key="name" :show-toolbar="showToolbar" @change="handleAreaChange" @confirm="handleAreaConfirm" @cancel="handleAreaCancel"></cl-picker>
  </div>
</template>
<script>
import ClPicker from '../picker'
const DEFAULT_PROVINCE = {
  code: '-1',
  name: '选择省份'
}
const DEFAULT_CITY = {
  code: '-1',
  name: '选择城市'
}
const DEFAULT_COUNTY = {
  code: '-1',
  name: '选择地区'
}
const PROVINCE_TYPE = 'province'
const CITY_TYPE = 'city'
const COUNTY_TYPE = 'county'
export default {
  name: 'cl-areapicker',
  props: {
    value: {},
    label: {},
    areaList: Array,
    columnsNum: {
      type: [String, Number], // 省市区显示列数，3-省市区，2-省市，1-省
      default: 3
    },
    showToolbar: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {

    }
  },
  beforeCreate () {},
  created () {},
  mounted () {},
  computed: {
    areaColumns () {
      const areaList = this.areaList
      if (!areaList || areaList.length === 0) return []
      const columns = []
      const curValue = this.value || ''
      const curLabel = this.label || ''
      columns.push({
        values: [DEFAULT_PROVINCE].concat(this.computedAreaList(PROVINCE_TYPE, curValue, curLabel)),
        className: 'cl-area__province',
        defaultIndex: this.getAreaIndex(PROVINCE_TYPE, curValue, curLabel)
      })
      const columnsNum = this.columnsNum
      if (+columnsNum > 1) {
        columns.push({
          values: [DEFAULT_CITY].concat(this.computedAreaList(CITY_TYPE, curValue, curLabel)),
          className: 'cl-area__city',
          defaultIndex: this.getAreaIndex(CITY_TYPE, curValue, curLabel)
        })
      }
      if (+columnsNum > 2) {
        columns.push({
          values: [DEFAULT_COUNTY].concat(this.computedAreaList(COUNTY_TYPE, curValue, curLabel)),
          className: 'cl-area__county',
          defaultIndex: this.getAreaIndex(COUNTY_TYPE, curValue, curLabel)
        })
      }
      return columns
    }
  },
  methods: {
    /**
     * 根据省市县类型和对应的`code`获取对应列表
     * @param {string} type 省市县类型
     * @param {string} code 对应code
     */
    computedAreaList (type, code, name) {
      const result = []
      let areaList = []
      if (type === PROVINCE_TYPE) {
        areaList = this.areaList
      }
      if (code) {
        if (code === '-1') return []
        if (type === CITY_TYPE) {
          const province = this.areaList.filter(item => {
            return item.id.slice(0, 2) === code.slice(0, 2)
          })
          const city = province[0].child
          areaList = city
        } else if (type === COUNTY_TYPE) {
          for (let i = 0, iLen = this.areaList.length; i < iLen; i++) {
            for (let j = 0, jLen = this.areaList[i].child.length; j < jLen; j++) {
              if (this.areaList[i].child[j].id.slice(0, 2) === code.slice(0, 2) && this.areaList[i].child[j].name === name) {
                areaList = this.areaList[i].child[j].child
              } else {
                for (let n = 0, nLen = this.areaList[i].child[j].child.length; n < nLen; n++) {
                  if (this.areaList[i].child[j].child[n].id.slice(0, 4) === code.slice(0, 4) && this.areaList[i].child[j].child[n].name === name) {
                    areaList = this.areaList[i].child[j].child
                  }
                }
              }
            }
          }
        }
      }
      areaList.forEach((v, i, a) => {
        result.push({
          code: v.id,
          name: v.name
        })
      })
      return result
    },
    /**
     * 获取对应省市县在列表中的索引
     * @type {Object}
     */
    getAreaIndex (type, code, name) {
      const compareNum = type === PROVINCE_TYPE ? 2 : (type === CITY_TYPE ? 4 : 6)
      const areaList = this.computedAreaList(type, code, name)
      for (let i = 0; i < areaList.length; i++) {
        if (+areaList[i].code.slice(0, compareNum) === +code.slice(0, compareNum)) {
          return i + 1
        }
      }
      return 0
    },
    handleAreaChange (picker, values, index) {
      const code = values[index].code
      const name = values[index].name
      if (index === 0) {
        picker.setColumnValues(1, [DEFAULT_CITY].concat(this.computedAreaList(CITY_TYPE, code, name)))
        // picker.setColumnValues(2, [DEFAULT_COUNTY].concat(this.computedAreaList(COUNTY_TYPE, code, name)))
      } else if (index === 1) {
        picker.setColumnValues(2, [DEFAULT_COUNTY].concat(this.computedAreaList(COUNTY_TYPE, code, name)))
      }
      this.$emit('change', values)
    },
    handleAreaConfirm (values) {
      this.$emit('confirm', values)
    },
    handleAreaCancel () {
      this.$emit('cancel')
    }
  },
  components: {
    ClPicker
  }
}
</script>
<style>
</style>
