<template>
  <el-select v-model="val" filterable placeholder="请选择" @change="handleChange">
    <el-option
      v-for="item in buildings"
      :key="item.buildingId"
      :label="item.buildingName"
      :value="item.buildingId">
    </el-option>
  </el-select>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'SelectBuilding',
  props: [ 'value' ],
  data () {
    return {
      cacheVal: null,
    }
  },
  computed: {
    ...mapState({
      buildings: s => s.buildings || [],
    }),
    val: {
      get() {
        return this.value || this.cacheVal
      },
      set (nw) {
        this.cacheVal = nw
        this.$emit('input', nw)
      }
    },
  },
  created () {
    if (!this.buildings || !this.buildings.length) {
      this.getBuildings()
    }
  },
  methods: {
    ...mapActions([
      'getBuildings',
    ]),
    handleChange(e) {
      this.$emit('change', e)
    }
  },
}
</script>

