<!-- 地区选择器 -->
<template>
  <div>
    <el-cascader size="small" v-model="selectedOption" class="wd100" clearable :props="defaultProps" :options="areaTree"></el-cascader>
  </div>
</template>

<script>

export default {
  name: '',
  props: {
    value: {
      type: [Array, Number, String, null],
      default: null 
    },
  },
  watch: {
    selectedOption(newValue) {
      this.$emit("input", newValue)
    },
    value(newValue) {
      console.log('newValue..', newValue);
      this.selectedOption = newValue
    },
  },
  data() {
    return {
      selectedOption: this.value,
      defaultProps: {
        children: "children",
        label: "name",
        value: 'id',
        emitPath: false,
        checkStrictly: false
      },
    }
  },
  computed: {
    areaTree() {
      return this.$store.getters.areaTree
    }
  },

}

</script>
<style lang='scss' scoped>
</style>