<template>
  <div>
    <el-cascader
      :options="area.data"
      :show-all-levels="showAllLevels"
      v-model="model"
      :filterable="filterable"
      :placeholder="placeholder"
      :disabled="disabled"
      :clearable="clearable"
      v-if="type !== 'view'"
    ></el-cascader>
    <div v-else>
      {{ model2 }}
    </div>
  </div>
</template>

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

function getProv(code) {
  return code.substring(0, 2) + "0000";
}

function getCity(code) {
  return code.substring(0, 4) + "00";
}

export default {
  props: {
    value: String,
    filterable: Boolean,
    placeholder: String,
    showAllLevels: {type: Boolean, default: true},
    disabled: Boolean,
    clearable: Boolean,
    type: {
      default: 'custom',
    }
  },
  data() {
    return {
      options: [],
    };
  },
  created() {
    this.$store.dispatch("InitArea");
  },
  watch: {},
  computed: {
    ...mapGetters(["area"]),
    prov() {
      if (this.county && this.county != -1) {
        return getProv(this.county);
      } else {
        return "";
      }
    },
    city() {
      if (this.county && this.county != -1) {
        return getCity(this.county);
      } else {
        return "";
      }
    },
    county: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
        return val;
      },
    },
    model: {
      set(val) {
        if (val.length > 2) {
          this.county = val[2];
        } else {
          this.county = undefined;
        }
      },
      get() {
        if (this.county && this.county != -1) {
          return [this.prov, this.city, this.county];
        }
        return null;
      },
    },
    model2: {
      get() {
        if (this.county && this.county != -1) {
          return `${this.area.dic[this.prov].label}-${this.area.dic[this.city].label}-${this.area.dic[this.county].label}`
        }
        return null;
      },
    },
  },
};
</script>

<style>
</style>
