<template>
  <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="item.id"  :label="item.roleName" :value="item.id"></el-option>
  </el-select>
</template>

<script>
import selectComponentJs from '../select'
import { getRoleList } from '@/request/config'
import axios from 'axios'

const extObj = selectComponentJs()

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

extObj.computed = {
  ...extObj.computed,
  filterOptions() {
    if (!this.maxLeave) {
      return this.options
    } else {
      return this.options.filter(({id}) => Number(id) >= Number(this.maxLeave))
    }
  }
}

export default {
  ...extObj,

  async mounted() {
    let res = await axios.post(getRoleList, {})
    this.options = res.data.map(item => ({...item, id: item.id.toString()}))
    extObj.mounted.call(this)
  }
}
</script>