<template>
  <el-select
    v-model="localLocationId"
    prop="toyBrandId"
    placeholder="请选择投放位置"
    filterable
    clearable
  >
    <el-option
      v-for="location in localLocationList"
      :key="location.id"
      :label="location.label"
      :value="location.id"
    />
  </el-select>
</template>

<script>
import { fetchAreaPage } from '@/api/system/sysLocationSetting'
import DictType from '@/utils/dict/DictType'

export default {
  name: 'SelectLocation',
  dicts: [DictType.kindergarten_location_type],
  model: {
    prop: 'locationId',
    event: 'update:locationId'
  },
  props: {
    loationId: String
  },
  data() {
    return {
      localLocationList: []
    }
  },
  computed: {
    localLocationId: {
      get() {
        return this.locationId
      },
      set(val) {
        this.$emit('update:locationId', val)
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      fetchAreaPage().then(({ data }) => {
        this.localLocationList = data && data.length > 0 ? data.map(item => {
          const type = this.locationTypeFormatter(item.type)
          return {
            ...item,
            label: `${type ? type + '/' : type}${item.name} / ${item.areaName}`
          }
        }) : []
      })
    },
    locationTypeFormatter(type) {
      const find = this.dict.type[DictType.kindergarten_location_type].find(item => item.value === type)
      return find ? find.label : ''
    }
  }
}
</script>
<style scoped lang="scss">

</style>
