<template>
  <el-cascader :options="options" :props="props" @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 { State, Getter, Mutation, Action } from "vuex-class";
// let city = require('@/assets/citycode.json');
@Component({
  components: {},
})
export default class Home extends Vue {
  @Getter("signs") getsigns: any;
  @Prop({
    //父组件传来的值
    type: Array,
    default() {
      return [];
    },
  })
  public valueqv: any;

  @Prop(Boolean) param!: Boolean;
  @Provide() citytxt: any = [];
  @Provide() options: Object = [];
  @Provide() props: any = {
    value: "id",
    label: "label",
    children: "children",
  };
  //  @Watch("param") formChange(v: any) {
  //      this.citytxt = this.valueqv;
  //  }

  handleChange(v: any) {
    this.$emit("changeFun", v);
  }
  //获取省市县
  getCityData() {
    (this as any).$axios.get(`/district/getDistrictData`).then((res: any) => {
      this.options = res;
      if (localStorage.getItem("cityJson") == "undefined") {
        localStorage.setItem("cityJson", JSON.stringify(res));
      }
    });
  }
  created() {
    this.citytxt = this.valueqv;
    let cityData = localStorage.getItem("cityJson");
    console.log( cityData )
    if (cityData) {
      this.options = JSON.parse(cityData);
    } else {
      this.getCityData();
    }
  }
}
</script>
