
<template>
  <div>
    <group>
      <x-address
        v-model="value"
        title="使用默认数据"
        show-name
        placeholder="请选择地址"
        inline-desc="可以设置placeholder"
        @on-change="handleChange($event, '选择省市区的')"
        @on-hide="logHide"
        @on-show="logShow"
      />
      <cell
        title="上面value值"
        :value="JSON.stringify(value)"
      />
      <x-address
        v-model="value2"
        title="手动设定"
        show-name
        :list="addressData"
      />
    </group>
    <br>
    <x-button
      type="primary"
      @click.native="changeData"
    >
      改变数据
    </x-button>
    <br>
    <group>
      <x-address
        v-model="value4"
        title="只显示省市"
        raw-value
        show-name
        :list="addressData"
        hide-district
      />
      <x-address
        v-model="value6"
        title="name只显示市"
        raw-value
        show-second-name
        :list="addressData"
        hide-district
      />
      <cell
        title="value值"
        :value="JSON.stringify(value4)"
      />
      <cell
        title="转换成文字值"
        :value="getName(value4)"
      />
    </group>

    <br>
    <group title="错误的地址将不能正确渲染">
      <x-address
        v-model="value5"
        title="广东省, 深圳 市, 南山区"
        show-name
        :list="addressData"
      />
    </group>
  </div>
</template>

<script>
import { Group, XAddress, XButton, Cell } from '../components/_index'
import { cvux as AddressChinaData, tools } from 'city-data/lib/mobile'
const value2name = tools.value2name

export default {
  components: {
    Group,
    XAddress,
    XButton,
    Cell
  },
  data () {
    return {
      value: [],
      value2: ['440000', '440300', '440305'],
      value3: ['海南省', '儋州市', '--'],
      addressData: AddressChinaData,
      value4: [],
      value5: ['440000', '440300', '440305'],
      value6: []
    }
  },
  methods: {
    changeData () {
      this.value2 = ['430000', '430400', '430407']
      // this.value2 = ['110000', '110100']
    },
    getName (value) {
      value = value || ['110000', '110100']
      return value2name(value, AddressChinaData)
    },
    logHide (str) {
      console.log('on-hide', str)
    },
    logShow (str) {
      console.log('on-show')
    },
    /**
     * 地址值变化
     * @param data
     */
    handleChange(data, type) {
      console.log(data, type)
    }
  }
}
</script>
