<template>
  <div>
    <span v-if="showonly" v-text="valueName"></span>
    <div v-if="!showonly">
      <kyb-btn :label="sheng?sheng:'选择省'" dropdown :click-action="getSheng">
        <q-list dense style="min-width: 50px" separator>
          <q-item
            clickable
            v-close-popup="!v.disabled&&!v.items"
            v-for="(v,index) in shengList"
            v-show="!v.hide"
            :class="v.disabled?'cursor-not-allowed text-grey-6':v.class"
            :key="index"
            :to="v.to"
            :active="v._id==shengId"
            @click="selectItem('sheng', v)"
          >
            <!-- <q-item-section avatar>
            <q-icon name="place" />
            </q-item-section>-->
            <q-item-section v-text="v.name"></q-item-section>
            <!-- <q-item-section side v-if="v.items">
            <q-icon name="keyboard_arrow_right" />
            </q-item-section>-->
          </q-item>
        </q-list>
      </kyb-btn>
      <q-icon name="keyboard_arrow_right" class="q-pa-md" size="1.4em" color="grey-7" />
      <kyb-btn :label="shi?shi:'选择市'" dropdown :click-action="getShi" :disabled="!shengId">
        <q-tooltip v-if="!shengId">请先选择省</q-tooltip>
        <q-list dense style="min-width: 50px" separator>
          <q-item
            clickable
            v-close-popup="!v.disabled&&!v.items"
            v-for="(v,index) in shiList"
            v-show="!v.hide"
            :class="v.disabled?'cursor-not-allowed text-grey-6':v.class"
            :key="index"
            :to="v.to"
            @click="selectItem('shi', v)"
          >
            <q-item-section v-text="v.name"></q-item-section>
          </q-item>
        </q-list>
      </kyb-btn>
      <q-icon name="keyboard_arrow_right" class="q-pa-md" size="1.4em" color="grey-7" />
      <kyb-btn :label="qu?qu:'选择区'" dropdown :click-action="getQu" :disabled="!shiId">
        <q-tooltip v-if="!shiId">选择市</q-tooltip>
        <q-list dense style="min-width: 50px" separator>
          <q-item
            clickable
            v-close-popup="!v.disabled&&!v.items"
            v-for="(v,index) in quList"
            v-show="!v.hide"
            :class="v.disabled?'cursor-not-allowed text-grey-6':v.class"
            :key="index"
            :to="v.to"
            @click="selectItem('qu', v)"
          >
            <q-item-section v-text="v.name"></q-item-section>
          </q-item>
        </q-list>
      </kyb-btn>
    </div>
  </div>
</template>
<script>
export default {
  name: 'kyb-area',
  model: {
    prop: 'value',
    event: 'input'
  },
  props: { value: String, showonly: Boolean },
  data() {
    return {
      valueInner: this.value,
      sheng: null,
      shi: null,
      qu: null,
      shengId: '',
      shiId: '',
      quId: '',
      shengList: null,
      shiList: null,
      quList: null
    }
  },
  watch: {
    async value(old) {
      this.valueInner = old
      await this.fixData()
    }
  },
  computed: {
    valueName() {
      return [this.sheng, this.shi, this.qu]
        .filter(item => item && item.length > 0)
        .join(',')
    }
  },
  async created() {
    await this.fixData()
  },
  methods: {
    async fixData() {
      if (!this.valueInner) return
      let vstr = '___in___' + this.valueInner.split(',')
      let re = await this.$axios.get(
        `/common/Area/query?orderBy=level&orderByAsc=1&__id=${vstr}`
      )
      let list = re.data.items
      if (list && re.data.items.length === 3) {
        this.sheng = list[0].name
        this.shengId = list[0]._id
        this.shi = list[1].name
        this.shiId = list[1]._id
        this.qu = list[2].name
        this.quId = list[2]._id
        this.sendAllValue()
      }
    },
    async getSheng() {
      this.shengList = await this.getAreaData('-1')
    },
    async getShi() {
      this.shiList = await this.getAreaData(this.shengId)
    },
    async getQu() {
      this.quList = await this.getAreaData(this.shiId)
    },
    async getAreaData(pid) {
      let re = await this.$axios.get(
        `/common/Area/query?pageSize=10000&_pid=${pid}`
      )
      return re.data.items
    },
    clearData(type) {
      this[type] = null
      this[type + 'Id'] = ''
      this[type + 'List'] = null
    },
    sendAllValue() {
      this.$emit('input', [this.shengId, this.shiId, this.quId].join(','))
      this.$emit('all-value', [
        { _id: this.shengId, name: this.sheng },
        { _id: this.shiId, name: this.shi },
        { _id: this.quId, name: this.qu }
      ])
    },
    async selectItem(type, item) {
      this[type] = item.name
      this[type + 'Id'] = item._id
      if (type === 'sheng') {
        this.clearData('shi')
        this.clearData('qu')
      } else if (type === 'shi') {
        this.clearData('qu')
      } else if (type === 'qu') {
      }
      this.sendAllValue()
    }
  }
}
</script>
