<template>
  <el-cascader
    :options="areaDY"
    :show-all-levels="showAllLevels"
    v-model="county"
    :filterable="filterable"
    :placeholder="placeholder"
    :disabled="disabled"
    :clearable="clearable"
  ></el-cascader>
</template>

<script>
import {mapGetters} from "vuex";

export default {
  props: {
    value: String,
    filterable: Boolean,
    placeholder: String,
    showAllLevels: {type: Boolean, default: true},
    disabled: Boolean,
    clearable: Boolean,
    splicer: {
      type: String,
      default: "-"
    },
    city: Boolean, // 12月3号修改 下拉从市区开始
    filterCity: Array
  },
  data() {
    return {
      options: [],
    };
  },
  created() {
    this.$store.dispatch("InitArea");
    console.log(this.areaDY)
  },
  watch: {},
  computed: {
    ...mapGetters(["area"]),
    areaDY: {
      get() {
        if (this.filterCity) {
          const [Province, city, district] = this.filterCity
          let nextProvince = this.area.labelData.find((area) => area.label === Province)
          if (city) {
            nextProvince.children = nextProvince.children.filter((area) => area.label === city)
          }
          if (district) {
            nextProvince.children[0].children = nextProvince.children[0].children.find((area) => area.label === district)
          }
          return this.city ? nextProvince.children : nextProvince
        }


        return this.area.labelData
      }
    },
    county: {
      get() {
        if (this.value) {
          console.log('enum', this.area)
          console.log('getvalue', this.value.split(this.splicer))
          return this.value.split(this.splicer).map((item) => item.replace(/\s+/g, ""));
        } else {
          return []
        }
      },
      set(val) {
        console.log('setvalue', val, val.join(this.splicer))
        this.$emit("input", val.join(this.splicer));
      },
    },
  },
};
</script>

<style>
</style>
