<template>
  <span v-if="this.options.length" :key="key">
    <el-select v-model="value"  :placeholder="allText ? allText : '全部'" :disabled="disabled">
      <el-option :label="allText ? allText : '全部'" :value="''" v-if="showAll"></el-option>
      <el-option v-for="item in filterOptions" :key="filterOptions.length+'全部'+item.id"  :label="item.roleName" :value="item.id"></el-option>
    </el-select>
  </span>
</template>

<script>
import selectComponentJs from '../select'
import { getRoleList,getListByDeptId } from '@/request/config'
import axios from 'axios'
// import { $forceUpdate } from 'vue'

const extObj = selectComponentJs()

extObj.props = [...extObj.props, 'maxLeave', 'disabled','deptId']

extObj.computed = {
  ...extObj.computed,
  filterOptions() {
    console.log(this.options)
      return this.options
  }
}

extObj.watch = {
  ...extObj.watch,
    deptId() {
    this.value = ''
    this.getOptions()
  }
}

export default {
  ...extObj,

  async created() {
    console.log('mounted',this.deptId, this.key);
    if(this.deptId){
        this.getOptions()
    }else{
    let res = await axios.post(getRoleList, {})
    this.options = res.data.map(item => ({...item, id: item.id.toString()}))
    }
    console.log(this)
    // extObj.mounted.call(this)
  },
  
  methods:{
   ...extObj.methods,
  async getOptions(){
    let res = await axios.get(getListByDeptId, {params:{deptId:this.deptId}})
    this.options = res.data.map(item => ({...item, id: item.id.toString()}))
    setTimeout(() => {
    this.key = '2'
    }, 200)
  }
  }
}
</script>