<template>
  <div>
    <!--<Cascader-->
    <!--:data="casData"-->
    <!--:load-data="loadData"-->
    <!--@on-change="_casChange"-->
    <!--placeholder="请选择省、市、区"-->
    <!--clearable-->
    <!--v-model="value"-->
    <!--:name="name"-->
    <!--transfer></Cascader>-->
    <Cascader
      :data="casData"
      :load-data="loadData"
      @on-change="_casChange"
      transfer
      change-on-select>
      <Input
        v-model="value"
        @on-change="_clear"
        placeholder="请选择省、市、区"
        readonly
        clearable
      />
    </Cascader>
  </div>
</template>
<script>
import { meterEntrust } from '../../api'
/**
 * 省、市、县 级联选择
 */
export default {
  props: {
    value: null,
    name: null
  },
  data() {
    return {
      casData: []
    }
  },
  mounted() {
    this._getProvince()
  },
  methods: {
    _getProvince: async function(data) {
      // 获取省份
      const result = await meterEntrust.getProvince()
      // this.$store.dispatch('SysProvince/getProvince').then(() => {
      //   const result = this.$store.state.SysProvince.list
      const casData = []
      for (let i = 0; i < result.length; i++) {
        casData.push({
          label: result[i].label,
          value: result[i].label,
          valueName: result[i].value,
          children: [],
          loading: false
        })
      }
      this.casData = casData
      // })
    },
    loadData: async function(item, callback) {
      const val = item.__value
      item.loading = true
      if (val.length <= 1) {
        // 不存在逗号
        const result = await meterEntrust.getCity(item.valueName)
        if (result === undefined) {
        }
        const cityData = []
        for (let i = 0; i < result.length; i++) {
          cityData.push({
            label: result[i].label,
            value: result[i].label,
            valueName: result[i].value,
            children: [],
            loading: false
          })
        }
        item.children = cityData
        item.loading = false
        callback()
      } else {
        const result = await meterEntrust.getArea(item.valueName)
        const areaData = []
        for (let i = 0; i < result.length; i++) {
          areaData.push({
            label: result[i].label,
            value: result[i].label,
            valueName: result[i].value
          })
        }
        item.children = areaData
        item.loading = false
        callback()
      }
    },
    // 省、市、区都可选
    _casChange(value, selectedData) {
      const tempData = {
        value: value,
        selectedData: selectedData
      }
      switch (selectedData.length) {
        case 1:
          selectedData[1] = { label: '', value: '' }
          selectedData[2] = { label: '', value: '' }
          value[1] = ''
          value[2] = ''
          break
        case 2:
          selectedData[2] = { label: '', value: '' }
          value[2] = ''
          break
      }
      this.$emit('on-result-change', this.name, tempData)
    },
    // 数据改变(删除数据的时候用)
    _clear() {
      const tempData = {
        value: ['', '', '']
      }
      this.$emit('on-result-change', this.name, tempData, 'clear')
    }
  }
}
</script>
<style>
.ivu-cascader-transfer {
  z-index: 1160;
}
</style>
