<template>
  <div>
    <div style="background:#fff;padding:15px;">
      <h6>默认用法</h6>
      <bxs-button
        type="primary"
        @click="isShow=true"
        >
        选择地区
      </bxs-button>
      <div class="text">
        当前选中：{{ selectData.provinceName + selectData.cityName + selectData.countyName }}
      </div>
      <bxs-area
        v-model="isShow"
        :area-data="areaData"
        @confirm="confirm"
        :area-select="value"
        />
    </div>
    <div style="background:#fff;padding:15px;margin-top:15px;">
      <h6>默认选中地区</h6>
      <bxs-button
        type="primary"
        @click="isShow2=true"
        >
        选择地区
      </bxs-button>
      <div class="text">
        当前选中：{{ selectData2.provinceName + selectData2.cityName + selectData2.countyName }}
      </div>
      <bxs-area
        :area-select="value2"
        v-model="isShow2"
        :area-data="areaData"
        @confirm="confirm2"
        :show-district="showDistrict"
        :key-name="keyName"
        :value-name="valueName"
        :title="title"
        />
    </div>
    <div style="background:#fff;padding:15px;margin-top:15px;">
      <h6>只显示省市</h6>
      <bxs-button
        type="primary"
        @click="isShow3=true"
        >
        选择地区
      </bxs-button>
      <div class="text">
        当前选中：{{ selectData3.provinceName + selectData3.cityName + selectData3.countyName }}
      </div>
      <bxs-area
        v-model="isShow3"
        :area-data="areaData"
        @confirm="confirm3"
        :show-district="false"
        :area-select="value3"
        />
    </div>
  </div>
</template>
<script>
import { province, city, area } from './address'

export default {
  data() {
    return {
      isShow: false,
      isShow2: false,
      isShow3: false,
      areaData: {
        provinceList: province,
        cityList: city,
        countyList: area,
      },
      value: '',
      value2: '441900',
      value3: '',
      showDistrict: true,
      valueName: 'name',
      keyName: 'code',
      title: '修改标题',
      selectData: {
        provinceName: '',
        cityName: '',
        countyName: '',
      },
      selectData2: {
        provinceName: '',
        cityName: '',
        countyName: '',
      },
      selectData3: {
        provinceName: '',
        cityName: '',
        countyName: '',
      },
    }
  },
  methods: {
    confirm(data) {
      this.selectData = data
      this.value = data.countyCode || data.cityCode
    },
    confirm2(data) {
      this.selectData2 = data
      this.value2 = data.countyCode || data.cityCode
    },
    confirm3(data) {
      this.selectData3 = data
      this.value3 = data.cityCode
    },
  },
}
</script>
<style>
h6 {
  padding: 15px 0;
}
.text {
  font-size: 16px;
  margin-top: 15px;
}
</style>
