<template>
  <el-select
    v-model="localToyBrandId"
    prop="toyBrandId"
    placeholder="请选择玩具品牌"
    filterable
    clearable
  >
    <el-option
      v-for="brand in localBrandList"
      :key="brand.id"
      :label="brand.brandName"
      :value="brand.id"
    />
  </el-select>
</template>

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

export default {
  name: 'SelectToyBrand',
  model: {
    prop: 'toyBrandId',
    event: 'update:toyBrandId'
  },
  props: {
    toyBrandId: String
  },
  data() {
    return {
      localBrandList: []
    }
  },
  computed: {
    ...mapState(['brandList', 'settings']),
    localToyBrandId: {
      get() {
        if (this.localBrandList && this.localBrandList.length > 0) {
          return this.localBrandList.find(item => item.id === this.toyBrandId) ? this.toyBrandId : null
        } else {
          return null
        }
      },
      set(val) {
        this.$emit('update:toyBrandId', val)
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    ...mapActions(['GetBrandList']),
    loadData() {
      this.localBrandList = this.brandList
      this.GetBrandList().then(data => {
        this.localBrandList = data
      })
    }
  }
}
</script>
<style scoped lang="scss">

</style>
