<template>
  <div>
  <el-form ref="form" :model="doctor" :rules="rules" label-width="120px">
    <el-form-item label="头像" prop="avatar">
     
    <img v-if="doctor.avatar" :src="doctor.avatar" class="avatar" width="200px">

    </el-form-item>
    <el-form-item label="平均操作时间">
      <span style="font-size: 20px; color: red;">{{ time }}</span>
    </el-form-item>
    <el-form-item label="拒方率">
      <span style="font-size: 20px; color: red;">{{ percentage }}%</span>
    </el-form-item>
    <el-form-item label="医生姓名" prop="doctorName">
      <el-input v-model="doctor.doctorName" maxlength="30" readonly />
    </el-form-item>
    <el-form-item label="联系电话" prop="mobile">
      <el-input v-model="doctor.mobile" maxlength="11" readonly/>
    </el-form-item>
    <el-form-item label="擅长领域" prop="speciality">
      <el-input v-model="doctor.speciality" maxlength="50" readonly/>
    </el-form-item>
    <el-form-item label="所属医院" prop="hospitalName">
      <el-input v-model="hospital.hospitalName" maxlength="50" readonly/>
    </el-form-item>
    <el-form-item label="所属科室" prop="deptName">
      <el-input v-model="department.deptName" maxlength="50" readonly/>
    </el-form-item>
    <el-form-item label="职称" prop="position">
      <el-input v-model="doctor.position" maxlength="50" readonly/>
    </el-form-item>
    <el-form-item label="标签" prop="tags">
      <el-input v-model="doctor.tags" maxlength="50" readonly/>
    </el-form-item>
    <el-form-item style="display: flex; justify-content: flex-end;">
      <el-button v-if="doctor.doctorCardUrl" type="success" @click="handleCard()" style="margin-right: 10px;">名片</el-button>
      <el-button type="primary" @click="handleDoctorDetails()" style="margin-right: 10px;">详情</el-button>
      <el-button type="danger"  @click="close">关闭</el-button>
    </el-form-item>
  </el-form>
  <el-drawer
      :with-header="false"
      size="75%"
      :visible.sync="doctorItem.open">
      <doctorDetails  ref="doctorDetails" :doctor="doctor" :hospital="hospital" :department="department"  />
    </el-drawer>
    <el-dialog :visible.sync="cardVisible"  width="30%">
      <img v-if="doctor.doctorCardUrl" :src="doctor.doctorCardUrl" style="width: 100%;" >
    </el-dialog>
  </div>
  
</template>

<script>
import doctorDetails from '../../components/doctor/doctorDetails.vue';
export default {
  props: {
    doctor: {},
    hospital:{},
    department:{},
    time:'',
    percentage:'',
  },
  components: { doctorDetails},
  data() {
    return {
      cardVisible: false,
      doctorItem:{
        open:false
      },
      uploadUrl:process.env.VUE_APP_BASE_API+"/common/uploadOSS",
            baseUrl: process.env.VUE_APP_BASE_API,
      // 表单校验
      rules: {
      }
    };
  },
  methods: {
    handleCard() {
      this.cardVisible = true;
    },
    handleDoctorDetails(){
      this.doctorItem.open = true;
    },

       handleAvatarSuccess(res, file) {
            if(res.code==200){
              this.doctor.logoUrl=res.url;
              self.$forceUpdate()
            }
            else{
              this.msgError(res.msg);
            }
        },
        beforeAvatarUpload(file) {
          const isLt1M = file.size / 1024 / 1024 < 1;
          if (!isLt1M) {
            this.$message.error('上传图片大小不能超过 1MB!');
          }
          return   isLt1M;
        },

    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          editData(this.doctor).then(response => {
            this.msgSuccess("修改成功");
          });
        }
      });
    },
    close() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({ path: "/index" });
    }
  }
};
</script>
