<template>
  <el-dialog :visible="visible" title="选择推荐医生" center width="80%" :before-close="onBeforeClose">
    <el-form size="small" :inline="true">
      <el-form-item label="院区">
        <el-select v-model="formParams.wardId" filterable clearable @change="onChangeWardId">
          <el-option label="全部" value=""></el-option>
          <el-option
            v-for="item in wardList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="科室">
        <TreeDept
          v-model="formParams.deptId"
          clearable
          style="width: 240px"
          :options="deptList"
          :autoFetch="false"
          :props="{ emitPath: false }"
        />
      </el-form-item>
      <el-form-item label="医生">
        <el-input
          v-model="formParams.userName"
          placeholder="请输入员工姓名"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleSearch"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearch" :disabled="loading">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="handleReset" :disabled="loading">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="tableData" border>
      <el-table-column align="center" label="院区" prop="wardName" :show-overflow-tooltip="true" />
      <el-table-column align="center" label="科室" prop="deptName" :show-overflow-tooltip="true" />
      <el-table-column align="center" label="医生姓名" prop="doctorName" :show-overflow-tooltip="true" />
      <el-table-column align="center" width="55px">
        <template slot-scope="{row}">
          <el-radio v-model="selectDoctorId" :label="row.id" :disabled="isDisableCheck(row.id)" @input="(val) => onCheckDoctor(val,row)">
            <span></span>
          </el-radio>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="pageable.total"
      :page.sync="pageable.pageNum"
      :limit.sync="pageable.pageSize"
      @pagination="getList"
    />
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button :disabled="!selectDoctorId" type="primary" @click="onSubmit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { TableMixin } from '@/mixins/tableMixin'
import { staffPageList, getAllHospital, getTreeHospDept } from "@/api/admin";
import TreeDept from "@/components/TreeDept";
export default {
  name: "SelectRecommend",
  components: {
    TreeDept
  },
  mixins: [TableMixin],
  props: ["list"],
  data() {
    return {
      visible: false,
      apiMethod: staffPageList,
      formParams: {
        wardId: '',
        deptId: '',
        userName: ''
      },
      wardList: [],
      deptList: [],
      selectDoctorId: null,
      selectDoctor: null
    };
  },
  methods: {
    async openDialog(doctor) {
      this.handleReset()
      this.visible = true;
    },
    async loadWardList() {
      const res = await getAllHospital()
      this.wardList = res.data || []
    },
    isDisableCheck(id) {
      return this.list.findIndex(item => item.doctorId === id) >= 0
    },
    async getDeptList() {
      const res = await getTreeHospDept({
        wardId: this.formParams.wardId || undefined
      })
      this.deptList = res.data || []
    },
    onChangeWardId() {
      this.formParams.deptId = ''
      this.getDeptList()
    },
    onCheckDoctor(val, row) {
      console.log('val=', val, row)
      this.selectDoctor = row
    },
    async loadOptions() {
      await this.loadWardList()
      await this.getDeptList()
    },
    paramsCallback() {
      const { wardId, deptId, userName } = this.formParams
      const params = {
        ...this.pageable,
        wardId,
        deptId,
        userName
      }
      return params
    },
    handleSearch() {
      this.selectDoctorId = null
      this.selectDoctor = null
      this.onSearch()
    },
    handleReset() {
      this.pageable.pageNum = 1
      this.formParams = {
        wardId: '',
        deptId: '',
        userName: ''
      }
      this.selectDoctorId = null
      this.selectDoctor = null
      this.onSearch()
    },
    onBeforeClose(done) {
      this.visible = false
      done()
    },
    onSubmit() {
      console.log('点击确定')
      this.visible = false
      this.$emit('onOk', this.selectDoctor)
    }
  },
  mounted() {
    this.loadOptions()
    console.log("this.props", this.list)
  }
};
</script>
