<template>
  <el-select v-model="categoryId" :placeholder="placeholder" @change="changeCategory">
    <el-option
      v-for="item in categoryList"
      :key="item.categoryId"
      :label="item.categoryName"
      :value="item.categoryId">
      <span >{{ item.categoryName }}</span>
<!--      <span style="float: right; color: #8492a6; font-size: 13px">{{ item.deptNo }}   {{deptId}}</span>-->
    </el-option>
  </el-select>
</template>

<script>
  import { getCategoryList} from "@/api/business/category/category";
  import { getSelectObj } from '@/utils'

  export default {
    name: 'categorySelect',
    model: {
      prop: 'defaultId', //指定自己的v-model属性接受数值
      event: 'changeDefaultId'//指定自己的event1事件回送数据给父组件
    },
    props: {
      defaultId: String,
      placeholder: String,
    },
    data() {
      return {
        categoryId: this.defaultId,
        categoryList: []
      }
    },
    mounted() {
      this.fetchCategoryList()
    },
    watch:{
      defaultId(newVal,oldVal){
        this.categoryId = newVal
      }
    },
    methods:{
      fetchCategoryList(){
        getCategoryList().then(response=>{
          this.categoryList = response.data
        })
      },
      changeCategory(e){
        const category = getSelectObj(e,this.categoryList,'categoryId')
        this.$emit('changeDefaultId',e)
        this.$emit('changeSelect',category)
      }
    }
  }
</script>

<style scoped>

</style>
