<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24"> <!-- 增加span宽度 -->
    <el-card > <!-- 调整卡片样式 -->
        <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" name="doctorInfo">
              <doctorInfo ref="doctorInfoRef"/>
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="resetPwd">
              <resetPwd :doctor="doctor" />
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
    <el-drawer
      :with-header="false"
      size="75%"
      :visible.sync="doctorItem.open">
      <doctorDetails  ref="doctorDetails" :doctor="doctor" :hospital="hospital" :department="department"  />
    </el-drawer>
  </div>
</template>
<script>

import doctorInfo from "./doctorInfo";
import resetPwd from "./resetPwd";
import doctorDetails from '../../components/doctor/doctorDetails.vue';
import { getDoctorDetails,getInfo,editPwd } from "@/api/doctor.js";
export default {
  name: "Profile",
  components: { doctorDetails,doctorInfo,resetPwd},
  data() {
    return {
      activeTab: "doctorInfo",
      doctorItem:{
        open:false
      },
      doctor: {},
      hospital:{},
      department:{},

      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    getInfo() {
      getInfo().then(response => {
        this.doctor = response.doctor;
        this.hospital = response.hospital;
        this.department = response.department;
        this.$nextTick(()=>{
          this.$refs.doctorInfoRef.loadData(response);
        })
      });
    },
  }
};
</script>
