<template>
  <div class="cl-arst">
    <div class="cl-arst--fixed" style="z-index: 2222;">
      <div class="cl-arst__header cl-hairline--top-bottom" v-if="title">
        <div v-text="title"></div>
        <cl-icon class="cl-arst__header__icon" name="ios-close" @click.stop="$emit('cancel')"></cl-icon>
      </div>
      <div class="cl-arst__bar">
        <ul class="cl-arst__bar__ul">
          <li class="cl-arst__bar__li" v-for="(c, index) in areasChecked" :key="index" @click="changeAreaType(c, index)" :class="{'is-select': changeAreaName === c.name && changeAreaIndex === index}">{{c.name | shortenText}}</li>
          <li class="cl-arst__bar__li" :class="{'is-select': changeAreaName === ''}">请选择</li>
        </ul>
      </div>
    </div>
    
    <div class="cl-arst__body">
      <div class="cl-arst__content">
        <div class="cl-arst__province">
          <ul class="cl-arst__content__ul">
            <li class="cl-arst__content__li" v-for="(item, index) in areaObj[areaType]" :key="index" @click="handleAreaClick(item, areaType)" :class="{'is-select': changeAreaName === item.name}">{{item.name}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
/* const DEFAULT_TAB = {
  code: '-1',
  name: '请选择'
} */
const PROVINCE_TYPE = 'province'
const CITY_TYPE = 'city'
const COUNTY_TYPE = 'county'
export default {
  name: 'cl-areaselect',
  props: {
    title: String,
    value: {},
    label: {},
    areaList: Array,
    columnsNum: {
      type: [String, Number], // 省市区显示列数，3-省市区，2-省市，1-省
      default: 3
    },
    showToolbar: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      changeAreaName: '',
      changeAreaIndex: '',
      areasChecked: [],
      areaType: 'province',
      areaObj: {
        'province': [],
        'city': [],
        'county': []
      }
    }
  },
  beforeCreate () {},
  created () {
    this.areaObj.province = this.computedAreaList(PROVINCE_TYPE, '', '')
  },
  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: [].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: [].concat(this.computedAreaList(CITY_TYPE, curValue, curLabel)),
          className: 'cl-area__city',
          defaultIndex: this.getAreaIndex(CITY_TYPE, curValue, curLabel)
        })
      }
      if (+columnsNum > 2) {
        columns.push({
          values: [].concat(this.computedAreaList(COUNTY_TYPE, curValue, curLabel)),
          className: 'cl-area__county',
          defaultIndex: this.getAreaIndex(COUNTY_TYPE, curValue, curLabel)
        })
      }
      return columns
    }
  },
  filters: {
    shortenText (val) {
      if (val) {
        return val.length > 6 ? val.substr(0, 6) + '...' : val
      }
    }
  },
  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
    },
    handleAreaClick (values, type) {
      const code = values.code
      const name = values.name
      this.changeAreaName = ''
      this.changeAreaIndex = ''
      if (type === 'province') {
        this.areasChecked.splice(0, 3, values)
        this.areaObj.city = this.computedAreaList(CITY_TYPE, code, name)
        this.areaType = 'city'
      } else if (type === 'city') {
        this.areasChecked.splice(1, 2, values)
        this.areaObj.county = this.computedAreaList(COUNTY_TYPE, code, name)
        this.areaType = 'county'
      } else if (type === 'county') {
        this.areasChecked.splice(2, 1, values)
      }
      this.$emit('change', this.areasChecked)
    },
    changeAreaType (value, index) {
      this.changeAreaName = value.name
      this.changeAreaIndex = index
      let cType
      switch (index) {
        case 0:
          cType = 'province'
          break
        case 1:
          cType = 'city'
          break
        case 2:
          cType = 'county'
          break
        default:
          cType = 'province'
          break
      }
      this.areaType = cType
    },
    handleAreaConfirm (values) {
      this.$emit('confirm', values)
    },
    handleAreaCancel () {
      this.$emit('cancel')
    }
  },
  components: {
  }
}
</script>
<style>
</style>
