<template>
  <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
    <div style="padding: 20px; background-color: #fff;">
      医生详情
    </div>
<div class="content" >
  <div class="desct">
    医生信息
  </div>
 <el-descriptions title="" :column="3" border >
     <el-descriptions-item label="医生姓名"    >
         <span v-if="doctor!=null">{{doctor.doctorName}}</span>
     </el-descriptions-item>
     <el-descriptions-item label="职称" >
         <span v-if="doctor!=null"><dict-tag :options="positionOptions" :value="doctor.position"/></span>
     </el-descriptions-item>
     <el-descriptions-item label="工作照" >
       <el-image v-if="doctor!=null"
           style="width: 100px"
           :src="doctor.avatar"
           :preview-src-list="[doctor.avatar]">
       </el-image>
     </el-descriptions-item>
     <el-descriptions-item label="所属医院" >
         <span v-if="hospital!=null">{{hospital.hospitalName}}</span>
     </el-descriptions-item>
     <el-descriptions-item label="科室名称" >
         <span v-if="department!=null">{{department.deptName}}</span>
     </el-descriptions-item>
     <el-descriptions-item label="余额" >
         <span v-if="doctor!=null">{{doctor.balance}}</span>
     </el-descriptions-item>
     <el-descriptions-item label="状态" >
      <span v-if="doctor!=null">
            <dict-tag :options="statusOptions" :value="doctor.status"/>
      </span>
       </el-descriptions-item>
       <el-descriptions-item label="所属省市区" >
           <span v-if="doctor!=null">{{doctor.province}}{{doctor.city}}{{doctor.district}}</span>
       </el-descriptions-item>
     <el-descriptions-item label="标签" >
         <span v-if="doctor!=null">{{doctor.tags}}</span>
     </el-descriptions-item>

     <el-descriptions-item label="评分" >
         <span v-if="doctor!=null">
         <el-rate
           v-model="doctor.pingStar"
           disabled
           show-score
           text-color="#ff9900"
           score-template="{value}">
         </el-rate>
</span>
     </el-descriptions-item>
     <el-descriptions-item label="咨询量" >
         <span v-if="doctor!=null">{{doctor.orderNumber}}</span>
     </el-descriptions-item>
     <el-descriptions-item label="平均响应速度" >
         <span v-if="doctor!=null">{{doctor.speed}}</span>
     </el-descriptions-item>
      <el-descriptions-item label="手机号" >
         <span v-if="doctor!=null">{{doctor.mobile}}</span>
     </el-descriptions-item>
    <el-descriptions-item label="性别" >
      <dict-tag :options="sexOptions" :value="doctor.sex"/>
    </el-descriptions-item>
    <el-descriptions-item label="出生年月" >
        <span v-if="doctor!=null">{{doctor.bitthday}}</span>
    </el-descriptions-item>
    <el-descriptions-item label="登录账号" >
        <span v-if="doctor!=null">{{doctor.account}}</span>
    </el-descriptions-item>
    <el-descriptions-item label="医生签名" >
     <el-popover v-if="doctor.signUrl!=null"
                 placement="right"
                 title=""
                 trigger="hover">
                 <img slot="reference" :src="doctor.signUrl" width="50px">
                 <img :src="doctor.signUrl" style="max-width: 200px;">
      </el-popover>
    </el-descriptions-item>

    <el-descriptions-item label="是否推荐" >
      <dict-tag :options="orOptions" :value="doctor.isTui"/>
    </el-descriptions-item>
    <el-descriptions-item label="是否专家" >
      <dict-tag :options="orOptions" :value="doctor.isExpert"/>
    </el-descriptions-item>
    <el-descriptions-item label="接诊状态" >
        <dict-tag :options="statusOptions" :value="doctor.workStatus"/>
    </el-descriptions-item>
    <el-descriptions-item label="是否自营" >
      <dict-tag :options="orOptions" :value="doctor.isSelf"/>
    </el-descriptions-item>
    <el-descriptions-item label="是否处方医生" >
        <dict-tag :options="orOptions" :value="doctor.isPrescribeDoctor"/>
    </el-descriptions-item>
    <el-descriptions-item label="套餐包" >
      <span v-if="doctor!=null">{{doctor.packageName}}</span>
    </el-descriptions-item>
    <el-descriptions-item label="审核时间" >
        <span v-if="doctor!=null">{{doctor.auditTime}}</span>
    </el-descriptions-item>
    <el-descriptions-item label="审核状态" >
      <dict-tag :options="isauditOptions" :value="doctor.isAudit"/>
    </el-descriptions-item>
    <el-descriptions-item label="创建时间" >
        <span v-if="doctor!=null">{{doctor.createTime}}</span>
    </el-descriptions-item>
    <el-descriptions-item label="医生简介" span="6">
        <span v-if="doctor!=null">{{doctor.introduction}}</span>
    </el-descriptions-item>
     <el-descriptions-item label="擅长领域"  span="6" >
         <span v-if="doctor!=null" style="width: 100px;">{{doctor.speciality}}</span>
     </el-descriptions-item>
 </el-descriptions>
</div>
<div class="content" >
 <div class="desct">
   证件信息
 </div>
<el-descriptions title="" :column="3" border>
  <el-descriptions-item label="身份证号">
    <span v-if="doctor!=null">{{doctor.idCard}}</span>
  </el-descriptions-item>

  <el-descriptions-item label="身份证正面">
    <el-image v-if="doctor.idCardFrontUrl!=null"
        style="width: 100px"
        :src="doctor.idCardFrontUrl"
        :preview-src-list="[doctor.idCardFrontUrl]">
    </el-image>
  </el-descriptions-item>

  <el-descriptions-item label="身份证反面">
    <el-image v-if="doctor.idCardBackUrl!=null"
        style="width: 100px"
        :src="doctor.idCardBackUrl"
        :preview-src-list="[doctor.idCardBackUrl]">
    </el-image>
  </el-descriptions-item>

  <el-descriptions-item label="资格证编号" >
    <span v-if="doctor!=null">{{doctor.certificateCode}}</span>
  </el-descriptions-item>

  <el-descriptions-item label="资格证">
     <el-image v-for="img in certificateImages" :key="img"
         style="width: 100px"
         :src="img"
         :preview-src-list="[img]">
     </el-image>


  </el-descriptions-item>
  <el-descriptions-item label="执业证编号">
    <span v-if="doctor!=null">{{doctor.practiseCode}}</span>
  </el-descriptions-item>
  <el-descriptions-item label="执业证">
    <el-image v-for="img in practiseImages" :key="img"
        style="width: 100px"
        :src="img"
        :preview-src-list="[img]">
    </el-image>
  </el-descriptions-item>
</el-descriptions>
</div>
</div>
</template>
<script>
  export default {
    name: "doctordetails",
    props:{
      doctor: {},
      hospital:{},
      department:{}
    },
    data() {
      return {
        orOptions: [],
        isauditOptions: [],
        positionOptions: [],
        statusOptions: [],
        sexOptions: [],
        certificateImages:"",
        practiseImages:"",
      }
    },
    created() {
      this.getImgs();
      this.getDicts("sys_company_isaudit").then(response => {
        this.isauditOptions = response.data;
      });
     this.getDicts("sys_company_or").then(response => {
       this.orOptions = response.data;
     });
     this.getDicts("sys_doc_position").then(response => {
       this.positionOptions = response.data;
     });
     this.getDicts("sys_company_status").then(response => {
       this.statusOptions = response.data;
     });
     this.getDicts("sys_sex").then(response => {
       this.sexOptions = response.data;
     });
    },
    methods: {
        getImgs(){
          if (this.doctor.certificateImages) {
              this.certificateImages = this.doctor.certificateImages.split(",");
          }
          if (this.doctor.practiseImages) {
              this.practiseImages = this.doctor.practiseImages.split(",");
          }
        }
      },
    }
  
</script>
<style>
  .content{
    height: 100%;
    background-color: #fff;
    padding: 0px 20px 20px;
    margin: 20px;
  }
  .desct{
    padding-top: 20px;
    padding-bottom: 20px;
    color: #524b4a;
    font-weight: bold;
  }
</style>
