<!--  用户病例查看模块-->
<template>
  <div v-if="viewSpecialCase==false">
<!--    显示所有病例大致信息-->
    <el-table :data="allMedicalRecord" stripe style="width: 100%" >
      <el-table-column prop="msg" label="主治医师" />
      <el-table-column prop="data.recordtime" label="就诊时间" sortable />
      <el-table-column prop="data.diagnose" label="诊断结果" />
      <el-table-column prop="data.mid" label="病例号" />
      <el-table-column label="Operations">
        <template #default="scope">
          <el-button @click="viewSpecificCase(scope.row)">查看详情</el-button>
          <el-popconfirm title="确定要删除该条记录吗?" @confirm="deleteCase(scope.row)">
            <template #reference>
              <el-button >删除记录</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
<!--具体病例查看  -->
  <div v-else>
    <div style="border-bottom: #FFE211;border-bottom-style: solid;padding: 10px"><h1 >病例详情:</h1></div>
    <div class="common-layout" style="padding: 20px">
      <el-icon></el-icon>
      <div style=" min-width: 82vw;border-style: groove ;">
<!--        病症概况-->
        <el-descriptions :column="4" border>
          <el-descriptions-item label="患者姓名" label-align="center" align="center"><span>{{username}}</span></el-descriptions-item>
          <el-descriptions-item label="性别" label-align="center" align="center"><span>{{gender}}</span></el-descriptions-item>
          <el-descriptions-item label="年龄" label-align="center" align="center"><span>{{age}}</span></el-descriptions-item>
          <el-descriptions-item label="就诊时间" label-align="center" align="center"><span>{{visiting_time}}</span></el-descriptions-item>
          <el-descriptions-item label="病症描述" label-align="center" align="center" span="4">{{description_of_case}}</el-descriptions-item>
          <el-descriptions-item label="诊断结果" label-align="center" align="center" span="4">{{resul_of_case}}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div style="border-style: groove;padding: 20px;min-width: 82vw">
<!--        处方信息-->
        <el-table :data="prescription" style="">
          <el-table-column prop="name" label="药品名"  />
          <el-table-column prop="specification" label="规格" width="100" />
          <el-table-column prop="number" label="数量" width="100" />
          <el-table-column prop="way" label="用法" />
          <el-table-column prop="dosage" label="用量" />
        </el-table>
      </div>
  </div>
    <el-icon></el-icon>
    <div>
      <el-icon style="width: 80%"></el-icon>
      <el-button @click="viewSpecialCase=false" type="success">关闭</el-button>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "UserCase",
  methods:{
    //病例操作
    load_all_case(){
      request.get('/medicalrecord/selectByUseridDoctor',{params:{userid:this.$store.getters.userid}})
          .then(res=>{
            this.allMedicalRecord = res;
          }
      )
    },
    deleteCase(row){
      request.get('/medicalrecord/deleteMedicalrecord',{params:{mid:parseInt(row.data.mid)}}).then(res=>{
        this.load_all_case();
      })
    },
    viewSpecificCase(row){
      if(row.data.mid){
        request.get('/medicalrecord/showDetail',{params:{mid:parseInt(row.data.mid)}}).then(
            res=>{
              this.visiting_time=res.data.recordtime;
              this.description_of_case=res.data.symptom;
              this.resul_of_case = res.data.diagnose;
              this.prescription=res.data.drugs;
            }
        )
      }
      this.viewSpecialCase=true;
    },
  },
  data(){
    return{
      username:"",
      gender:"",
      visiting_time:"",
      age:"",
      description_of_case:"",
      resul_of_case:"",
      viewSpecialCase:false,
      allMedicalRecord:[],
      prescription : []
    }
  },
  created() {
    this.username=this.$store.getters.username;
    this.age = this.$store.getters.age;
    if(this.$store.getters.gender==false){
      this.gender="女";
    }else {
      this.gender="男";
    };
    this.load_all_case();
  }
}
</script>

<style scoped>

.my-label {
  background: var(--el-color-success-light-9);
}
.my-content {
  background: var(--el-color-danger-light-9);
}
</style>