<template>
  <el-select
    ref="selectRef"
    v-model="localKindergartenId"
    placeholder="请选择"
    :filterable="true"
    clearable
    :disabled="disabled"
    @visible-change="val => $emit('visible-change', val)"
    @change="(val) => $emit('change', val)"
    @focus="onFocus"
  >
    <el-option
      v-for="tenant in tenantList"
      :key="tenant.id"
      :label="tenant.tenantName"
      :value="tenant.id"
    />
  </el-select>
</template>
<script>
import { fetchAllTenant } from '@/api/system/tenant'

export default {
  name: 'SelectTenant',
  model: {
    prop: 'tenantId',
    event: 'update:tenantId'
  },
  props: {
    tenantId: [String, Number],
    disabled: {
      type: Boolean,
      default: () => false
    }
  },
  data() {
    return {
      tenantList: []
    }
  },
  computed: {
    localKindergartenId: {
      get() {
        return this.tenantId
      },
      set(val) {
        this.$emit('update:tenantId', val)
      }
    }
  },
  created() {
    this.getTenantList()
  },
  methods: {
    getTenantList() {
      this.tenantList = []
      fetchAllTenant().then(({ data }) => {
        this.tenantList = data && data.length > 0 ? data : []
      })
    },
    blur() {
      this.$refs.selectRef.blur()
    },
    focus() {
      this.$refs.selectRef.focus()
    },
    onFocus() {
      this.$emit('on-focus')
    }
  }
}
</script>
<style scoped lang="scss">

</style>
