<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) {
          return this.value.split(this.splicer);
        } else {
          return []
        }
      },
      set(val) {
        this.$emit("input", val.join(this.splicer));
      },
    },
  },
};
</script>

<style>
</style>
