<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <el-tabs type="card" @tab-click="handleTabClick" v-model="activeNames">
        <el-tab-pane label="基本信息" name="info" style="width: 24vw">
          <div style="height: 80vh; overflow-y: auto">
            <el-descriptions  style="width: 100%" title="患者信息" :column="1" border>
              <el-descriptions-item label="患者标识符">{{patientInfo.patientCode}}</el-descriptions-item>
              <el-descriptions-item label="就诊卡号">{{patientInfo.cardNumber}}</el-descriptions-item>
              <el-descriptions-item label="姓名">{{patientInfo.name}}</el-descriptions-item>
              <el-descriptions-item label="性别">
                <dict-tag :options="dict.type.patient_sex" :value="patientInfo.sex"/>
              </el-descriptions-item>
              <el-descriptions-item label="身份证号" prop="sfzh">{{patientInfo.sfzh}}</el-descriptions-item>
              <el-descriptions-item label="出生时间" prop="birthDate">{{patientInfo.birthDate}}</el-descriptions-item>
              <el-descriptions-item label="居住地址" prop="address">{{patientInfo.address}}</el-descriptions-item>
              <el-descriptions-item label="联系电话" prop="phone">{{patientInfo.phone}}</el-descriptions-item>
              <el-descriptions-item label="婚姻状况" prop="marital">
                <dict-tag :options="dict.type.patient_marital" :value="patientInfo.marital" />
              </el-descriptions-item>
              <el-descriptions-item label="民族" prop="nation">{{patientInfo.nation}}</el-descriptions-item>
              <el-descriptions-item label="职业" prop="career">{{patientInfo.career}}</el-descriptions-item>
              <el-descriptions-item label="国籍" prop="nationality">{{patientInfo.nationality}}</el-descriptions-item>
              <el-descriptions-item label="病历号" prop="blh">{{patientInfo.blh}}</el-descriptions-item>
              <el-descriptions-item label="病人卡号" prop="brkh">{{patientInfo.brkh}}</el-descriptions-item>
              <el-descriptions-item label="婴儿序号" prop="yexh">{{patientInfo.yexh}}</el-descriptions-item>
            </el-descriptions>
          </div>
        </el-tab-pane>

        <el-tab-pane label="就诊记录" @tab-click="handleTabClick" name="time" style="width: 24vw">
          <el-timeline>
            <el-timeline-item v-for="(item,index) in timeList" :timestamp="item.dischargeTime" :key="index">
              <span @click="getCard(item.id)">{{item.department}}</span>
            </el-timeline-item>
          </el-timeline>
        </el-tab-pane>
      </el-tabs>
    </el-col>

    <el-col :span="18">
      <el-tabs type="card" @tab-click="handleTabClick" v-model="activeName">
        <el-tab-pane label="就诊信息" style="width: 70vw;" name="pv">
          <el-descriptions :column="3" border height="calc(90vh - 273px)">
            <el-descriptions-item label="患者类别">{{pvList.patientCategory}}</el-descriptions-item>
            <el-descriptions-item label="所在病区">{{pvList.wardName}}</el-descriptions-item>
            <el-descriptions-item label="主治医生">{{pvList.physician}}</el-descriptions-item>
            <el-descriptions-item label="主管护士">{{pvList.nurseCode}}</el-descriptions-item>
            <el-descriptions-item label="在院状态">
              <dict-tag :options="dict.type.hospital_status" :value="pvList.hospitalStatus"/>
            </el-descriptions-item>
            <el-descriptions-item label="入院次数">{{pvList.hospitalizedNumber}}</el-descriptions-item>
            <el-descriptions-item label="就诊号码">{{pvList.cardId}}</el-descriptions-item>
            <el-descriptions-item label="出院方式">
              <dict-tag :options="dict.type.discharge_method" :value="pvList.dischargeMothod"/>
            </el-descriptions-item>
            <el-descriptions-item label="入院时间">{{pvList.admissionTime}}</el-descriptions-item>
            <el-descriptions-item label="出院时间">{{pvList.dischargeTime}}</el-descriptions-item>
            <el-descriptions-item label="危重级别">{{pvList.level}}</el-descriptions-item>
            <el-descriptions-item label="入区时间">{{pvList.entryTime}}</el-descriptions-item>
            <el-descriptions-item label="出区时间">{{pvList.exitTime}}</el-descriptions-item>
            <el-descriptions-item label="出区原因">{{pvList.reasonArea}}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>

        <el-tab-pane label="相关当事人/近亲段信息" style="width: 70vw;" name="nk">
          <!-- 表格展示多个亲属的信息-->
          <el-table height="calc(90vh - 273px)" width="69vw" :data="nkList">
            <el-table-column label="姓名" align="center" prop="name"></el-table-column>
            <el-table-column label="所属关系" align="center" prop="kinship"></el-table-column>
            <el-table-column label="近亲地址" align="center" prop="address"></el-table-column>
            <el-table-column label="联系电话" align="center" prop="phone"></el-table-column>
            <el-table-column label="工作名称" align="center" prop="workName"></el-table-column>
            <el-table-column label="工作类别" align="center" prop="workCode"></el-table-column>
          </el-table>
          <pagination v-show="totalNk > 0" :total="totalNk" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getNkList" />
        </el-tab-pane>

        <el-tab-pane label="诊断结果" style="width: 70vw" name="dg">
          <el-table width="69vw" height="calc(90vh - 165px)" :data="dgList">
            <el-table-column label="诊断名称" align="center" prop="diagnosticCode"></el-table-column>
            <el-table-column label="诊断时间" align="center" prop="diagnosisTime"></el-table-column>
            <el-table-column label="诊断类型" align="center" prop="diagnosticType">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.diagnostic_type" :value="scope.row.diagnosticType"/>
              </template>
            </el-table-column>
            <el-table-column label="诊断类别" align="center" prop="diagnosticCategoryCode">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.diagnostic_category_code" :value="scope.row.diagnosticCategoryCode"/>
              </template>
            </el-table-column>
          </el-table>
          <pagination v-show="totalDg > 0" :total="totalDg" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getDgList" />
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </el-row>

</template>

<script>
export default {
  dicts: ['diagnostic_type', 'diagnostic_category_code','hospital_status','discharge_method','patient_sex','patient_marital'],
  data(){
    return{
      activeName:'pv',
      activeNames:'info',
      timeList:null,
      //表数据总条数
      totalNk:0,
      totalDg:0,
      dgList:null,
      //pv表数据
      pvList:null,
      //nk表数据
      nkList:null,
      //obx表数据
      obxList:null,
      obrList:null,
      //患者信息
      patientInfo:null,
      //就诊信息
      pvInfo:null,
      queryParams:{
        pageNum:1,
        pageSize:10
      }
    }
  },
  watch:{
  },
  created() {
    this.getPatient();
    this.getPvList();
    this.handleTabClick('pv');
  },
  methods:{
    getCard(id){
      this.ajax({
        url:'/work/pv1/list',
        data:{
          id:id
        }
      }).then((response)=>{
        this.pvList = response.rows[0];
        console.log(this.pvList)
      })
    },
    handleTabClick(tab){
      if(tab.name === 'time'){
        this.getTime();
      }
      if(tab.name === 'nk'){
        this.getNkList();
      }
      if(tab.name === 'dg'){
        this.getDgList();
      }
      if(tab.name === 'pv'){
        this.getPvList();
      }
    },
    getTime(){
      this.ajax({
        url:'/work/pv1/list',
        data:{
          patientId:this.param.id,
          department:this.param.department
        }
      }).then((response)=>{
        console.log(this.param.name)
        this.timeList = response.rows;
        console.log(this.timeList);
      })
    },
    /** 查询患者信息 */
    getPatient(){
      this.get({
        url:'/work/patient/detail/'+this.param.id,
      }).then((response)=>{
        this.patientInfo = response.data;
      })
    },
    getPvList(){
      this.get({
        url:'/work/pv1/list',
        data:{
          cardId:this.param.cardId
        }
      }).then((response)=>{
        this.pvList = response.rows[0];
      })
    },
    /** 查询亲属表 */
    getNkList() {
        this.ajax({
          url:'/work/nk/list',
          data:{
            patientId:this.param.id,
              ...this.queryParams
          }
        }).then((response)=>{
          this.nkList = response.rows;
          this.totalNk = response.total;
        })
    },
    getDgList(){
      this.ajax({
        url:'/work/dg/list',
        data:{
          patientId:this.patientInfo.id,
            ...this.queryParams
        }
      }).then((response)=>{
        this.dgList = response.rows;
        this.totalDg = response.total;
      })
    }
  }
}
</script>
<style scoped lang="scss">
</style>
