<template>
  <div class="container">
    <el-tabs v-model="activeName" style="background-color: #EEEEEE;" @tab-click="handleClick">
      <el-tab-pane
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :name="item.value"
      >
        <doctor-page :doctor-type="item.value" :dept-options="deptList" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import page from './page'
import { getDeptList } from '@/model/doctor'
import EMITKEY from '@/const/emitNameKey'
import MODULETYPE from '@/const/moduleType'

export default {
  name: 'DoctorManagement',

  components: {
    'doctor-page': page
  },

  data() {
    return {
      activeName: 'ALL',
      deptList: [],
      options: MODULETYPE.DOCTOR_MODAL_TYPE
    }
  },

  created() {
    this.loadDeptOptions()
    this.bus.$on(EMITKEY.DOCTORRELOAD, this.loadDeptOptions)
  },

  beforedestroy() {
    this.bus.$off(EMITKEY.DOCTORRELOAD, this.loadDeptOptions)
  },

  methods: {
    async loadDeptOptions() {
      const { success, data, msg } = await getDeptList()
      if (success) {
        this.deptList = data.map(x => ({
          label: x,
          value: x
        }))
        this.deptList.unshift({
          label: '全部',
          value: null
        })
      } else {
        this.$message.error(msg)
      }
    },
    handleClick(e) {
    }
  }
}
</script>

<style scoped>
.btn-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
