<template>
  <el-select
    clearable
    filterable
    :value="value"
    @change="changeHandle"
    v-if="noLabel"
  >
    <el-option
      v-for="(item, index) in areaList"
      :key="index"
      :value="item.id"
      :label="item.areaName"
    ></el-option>
  </el-select>
  <search-item
    label="所属区域"
    :size="size"
    v-else
  >
    <el-select
      clearable
      filterable
      :value="value"
      @change="changeHandle"
    >
      <el-option
        v-for="(item, index) in areaList"
        :key="index"
        :value="item.id"
        :label="item.areaName"
      ></el-option>
    </el-select>
  </search-item>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  name: 'area-select',
  props: {
    size: String,
    value: Number,
    noLabel: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    if (!this.areaList.length) {
      // this.fetchAreaList();
    }
  },
  computed: {
    ...mapGetters(['areaList']),
  },
  methods: {
    ...mapActions(['fetchAreaList']),
    changeHandle(val) {
      this.$emit('input', val);
    },
  },
};
</script>

