<template>
  <el-cascader
    :options="area.labelData"
    :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: "-"
    }
  },
  data() {
    return {
      options: [],
    };
  },
  created() {
    this.$store.dispatch("InitArea");
  },
  watch: {},
  computed: {
    ...mapGetters(["area"]),
    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>
