<template>
  <el-select
    v-model="temp"
    placeholder="未选择医师或医生已下线"
    style="width: 300px;"
    @change="onchange"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script>
import { getDoctortList } from '@/model/doctor'

export default {
  name: 'DoctorSelect',

  props: {
    value: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      temp: this.value,
      options: []
    }
  },

  watch: {
  },

  mounted() {
    this.loadOption()
  },

  methods: {
    async loadOption() {
      const { success, data, msg } = await getDoctortList()
      if (success) {
        this.options = data
      } else {
        this.$message.error(msg)
      }
    },

    onchange(val) {
      this.$emit('input', val)
    }
  }
}
</script>

<style scoped>
.mt-60 {
  margin-top: 60px;
}
.btn-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.mcol-20 .el-row {
  font-size: 14px;
  line-height: 1.7;
  padding-top: 14px;
}
.search-box {
  border: 1px #DCDEE2 solid;
  padding: 5px;
}
.search-box .search-input {
  margin: 0 5px;
  max-width: 200px;
}
</style>
