<template>
  <div class="appAddressSelection">
    <el-cascader style="width:100%" :disabled="disabled || readonly" size="medium" v-model="CurrentVal" :options="city">
    </el-cascader>
  </div>
</template>

<script lang='ts'>
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component({})
export default class AppAddressSelection extends Vue {

  /**
    * 传入值
    * @type {any}
    * @memberof AppAddressSelection
    */
  @Prop() value?: any;

  /**
   * 是否禁用
   * @type {boolean}
   * @memberof AppAddressSelection
   */
  @Prop() disabled?: boolean;

  /**
   * 只读模式
   * 
   * @type {boolean}
   */
  @Prop({ default: false }) readonly?: boolean;

  /**
   * 当前值
   *
   * @memberof AppAddressSelection
   */
  get CurrentVal() {
    return this.value;
  }

  /**
    * 值变化
    *
    * @memberof AppAddressSelection
    */
  set CurrentVal(val: any) {
    this.$emit("change", val);
  }

  /**
    * 城市数据
    *
    * @memberof AppAddressSelection
    */
  city: any = [];

  /**
    * 数据格式化
    *
    * @memberof AppAddressSelection
    */
  format(data: any) {
    let town = JSON.parse(JSON.stringify(data).replace(/city/g, 'children'))
    let county = JSON.parse(JSON.stringify(town).replace(/name/g, 'label'))
    let city = JSON.parse(JSON.stringify(county).replace(/area/g, 'children'))
    let province = JSON.parse(JSON.stringify(city).replace(/code/g, 'value'))
    this.city = province;
  }

}
</script>

<style lang='less'>
@import './app-address-selection.less';
</style>