<template>
  <div class="w200">
    <el-cascader
      :props="{ checkStrictly: true }"
      ref="AddressSelector"
      v-model="tempValue"
      :options="menuOptions"
      v-bind="$props"
      clearable
      placeholder="请选择..."
      :size="size"
    />
  </div>
</template>

<script>
import { useMallStore } from '@/store/modules/mall';
export default {
  name: 'AddressSelector',
  props: ['modelValue', 'props', 'size'],
  computed: {
    areaSelect: {
      get() {
        return useMallStore().state.areaSelect;
      }
    },
    tempValue: {
      get() {
        return this.modelValue;
      },
      set(v) {
        this.$emit('update:modelValue', v);
      }
    },
    menuOptions() {
      if (!this.areaSelect || this.areaSelect.length === 0) {
        return [];
      } else {
        const afterHandled = this.recurs(this.areaSelect);
        return afterHandled;
      }
    }
  },
  created() {
    useMallStore().loadAreaSelect();
  },
  methods: {
    recurs(list) {
      return list.map((it) => {
        const resItem = {
          ...it,
          label: it.name,
          value: it.name
        };
        if (it.children) {
          resItem.children = this.recurs(it.children);
        }
        return resItem;
      });
    }
  }
};
</script>
<style></style>
