<template>
  <el-cascader
    :disabled="disabled"
    :options="options"
    :props="props"
    placeholder="请选择区域"
    @change="handleChange"
    v-model="citytxt"
  ></el-cascader>
</template>
<style lang="scss" scoped>
.el-cascader {
  width: 100%;
}
</style>
<script lang="ts">
import { Component, Vue, Provide, Prop, Watch } from "vue-property-decorator";
import METHOD from "@/utils/methods";
// let city = require('@/assets/citycode.json');
@Component({
  components: {}
})
export default class Home extends Vue {
  @Prop({
    //父组件传来的值
    type: Array,
    default() {
      return [];
    }
  })
  public valueqv: any;

  @Prop(Boolean) param!: Boolean;
  @Prop(Boolean) disabled!: Boolean;

  @Provide() citytxt: any = [];
  @Provide() options: any = [];

  @Provide() props: any = {
    value: "id",
    label: "label",
    children: "children"
  };
  @Watch("valueqv") formChange(v: any) {
    this.citytxt = this.valueqv;
  }
  getTreeData() {
    let that = this;
    METHOD.axiosGet(that, `/district/getDistrictData`, function(res: any) {
      if (res.code == 0) {
        that.options = res.data;
        sessionStorage.setItem("cityJson", JSON.stringify(res.data));
      }
    });
  }
  handleChange(v: any) {
    this.$emit("changeFun", v);
  }
  created() {
    this.citytxt = this.valueqv;
    let cityData = sessionStorage.getItem("cityJson");
    if (cityData) {
      this.options = JSON.parse(cityData);
    } else {
      this.getTreeData();
    }
  }
}
</script>