<template>
  <div class="inspection-table" v-loading="loading">
    <div class="timeline-tick">
      <!--  @click="openTimelineLogLine" -->
      <div class="logLine"  @mouseenter="openTimelineLogLine" @mouseleave="lightWingsSpread = false">
          <span><i class="iconfont iconshijian iconshijianStyle"></i>日志线</span>
        </div>
        <div class="logLineContent" v-if="lightWingsSpread">
          <el-steps direction="vertical" v-if="timeLineData.length">
            <el-step  v-for='( item , index ) in timeLineData' :key="index">
              <i slot="icon" :class="iconToSelect(item)"></i>
              <template slot="title">
                <span >{{item.step}}</span>
              </template>
              <template slot="description">
                <p  style="font-family: PingFangSC;">{{item.dateTime}}</p>
              </template>
            </el-step>
          </el-steps>
          <p v-else style="margin:0;padding:5px 15px">暂无数据~</p>
        </div>
    </div>
    <div class="checkout-box white-bg">
      <div class="checkout-box-right">
        <div class="report-con">
          <div class="report-name">
            {{
              titleType === "inHospital"
                ? "北京美中爱瑞肿瘤医院检验报告单"
                : "北京迪安医学检验实验室检测报告单"
            }}
          </div>
          <section class="sec-flex sec-flex-mdt">
            <div class="info-item dataBox">
              <div>
                <span class="label">
                  <span class="SimSun">患者</span>
                  <span class="Arial">ID/Patient ID：</span>
                </span>
                <span class="con">{{
                  info.reportPatientInfo.healthCardNo || ""
                }}</span>
              </div>
              <div>
                <span class="label">
                  <span class="SimSun">科 室</span>
                  <span class="Arial">/Department：</span>
                </span>
                <span class="con">{{
                  info.reportPatientInfo.deptName
                }}</span>
              </div>
              <div>
                <span class="label">
                  <span class="SimSun">标本类型</span>
                  <span class="Arial">/Type of Specimen：</span>
                </span>
                <span class="con">{{
                  info.reportPatientInfo.specimen
                }}</span>
              </div>
            </div>
            <div class="info-item">
              <div>
                <span class="label">
                  <span class="SimSun">姓 名</span>
                  <span class="Arial">/Patient Name：</span>
                </span>
                <span class="con">{{
                  info.reportPatientInfo.patientName
                }}</span>
              </div>
              <div>
                <span class="label">
                  <span class="SimSun">出生日期</span>
                  <span class="Arial">/Date of Birth：</span>
                </span>
                <span class="con">{{
                  info.reportPatientInfo.birthday
                }}</span>
              </div>
              <div style="display: flex">
                <span class="label">
                  <span class="SimSun">临床印象</span>
                  <span class="Arial">/Clinical Impression：</span>
                </span>
                <span class="con" style="max-width: 200px">{{
                  info.reportPatientInfo.relevantClinicDiag
                }}</span>
              </div>
            </div>
            <div class="info-item">
              <div>
                <span class="label">
                  <span class="SimSun">性 别</span>
                  <span class="Arial">/Gender：</span>
                </span>
                <span class="con">{{
                  info.reportPatientInfo.gender === "F" ? "女" : "男"
                }}</span>
              </div>
              <div>
                <span class="label">
                  <span class="SimSun">年 龄</span>
                  <span class="Arial">/Age：</span>
                </span>
                <span class="con">{{ info.reportPatientInfo.age }}</span>
              </div>
              <div>
                <span class="label">
                  <span class="SimSun">检验项目</span>
                  <span class="Arial">/Test Name：</span>
                </span>
                <span class="con">{{
                  info.reportPatientInfo.testName
                }}</span>
              </div>
            </div>
          </section>
          <div class="table-report-con">
            <el-table
              class="mdtTableDialog"
              :data="info.list"
              style="width: 100%"
              :cell-style="rowDClass"
              :header-cell-style="headClass"
            >
              <el-table-column
                prop="itemName"
                header-align="left"
                label="分析项目"
                min-width="220px"
                label-class-name="analyzeProject"
              >
                <template slot-scope="scope">
                  <div style="margin-left: 15px">{{ scope.row.itemName }}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="itemEnName"
                header-align="left"
                label="英文名称"
                min-width="150px"
              ></el-table-column>
              <el-table-column width="120" header-align="left" label="趋势图">
                <template slot-scope="scope">
                  <img
                    style="cursor: pointer"
                    :src="require('@/assets/images/trend.png')"
                    class="trend"
                    alt
                    v-if="scope.row.isNumber"
                    @click="hanldeRowClick(scope.row)"
                  />
                </template>
              </el-table-column>
              <el-table-column
                label="结果"
                header-align="left"
                min-width="170"
                label-class-name="dataBigBox"
              >
                <template slot-scope="scope">
                  <div style="display: flex">
                    <div style="width: 20px">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        placement="top"
                        v-if="scope.row.clinicalSignificance"
                        popper-class="clinicalValue"
                      >
                        <div slot="content" class="testBubble">
                          <div>
                            <span
                              >临床意义:{{
                                scope.row.clinicalSignificance
                              }}</span
                            >
                          </div>
                        </div>
                        <div class="meaningButton iconfont iconxinxitishi"></div>
                      </el-tooltip>
                    </div>
                    <span
                      style="flex: 1; text-align: left; padding-left: 5px"
                      :class="
                        setTextColor(
                          scope.row.testResult,
                          scope.row.itemRef,
                          scope.row.quaResult
                        )
                      "
                      ><span
                        :class="
                          setTextBackColor(
                            scope.row.itemRef,
                            scope.row.quaResult,
                            scope.row.testResult
                          )
                        "
                        >{{ scope.row.testResult }}</span
                      ></span
                    >
                    <span
                      style="width: 17px"
                      :class="
                        setTextArrowColor(
                          scope.row.itemRef,
                          scope.row.quaResult
                        )
                      "
                      >{{
                        scope.row.quaResult !== "正常"
                          ? scope.row.quaResult
                          : ""
                      }}
                    </span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="unit"
                header-align="left"
                label="单位"
                min-width="150"
              ></el-table-column>
              <el-table-column
                prop="itemRef"
                header-align="left"
                label="参考区间"
                min-width="180"
              ></el-table-column>
            </el-table>
          </div>
          <el-row style="padding-bottom: 80px">
            <el-col :span="6">
              <span class="label">
                <span class="SimSun">申请医师</span>
                <span class="Arial">/Doctor：</span>
              </span>
              <span class="con">{{
                info.reportPatientInfo.orderingProvider
              }}</span>
            </el-col>
            <el-col :span="6">
              <span class="label">
                <span class="SimSun">采样人</span>
                <span class="Arial">/Sampled by：</span>
              </span>
              <span class="con">{{
                info.reportPatientInfo.specer
              }}</span>
            </el-col>
            <el-col :span="6">
              <span class="label">
                <span class="SimSun">检验者</span>
                <span class="Arial">/Examined by：</span>
              </span>
              <span class="con">{{
                info.reportPatientInfo.verifiedBy
              }}</span>
            </el-col>
            <el-col :span="6">
              <span class="label">
                <span class="SimSun">审核者</span>
                <span class="Arial">Reviewed by：</span>
              </span>
              <span class="con">{{
                info.reportPatientInfo.transcriptionist
              }}</span>
            </el-col>
            <el-col :span="6">
              <span class="label">
                <span class="SimSun">采样时间</span>
                <span class="Arial">/Sampled at：</span>
              </span>
              <span class="con">{{
                info.reportPatientInfo.sampledDateTime
              }}</span>
            </el-col>
            <el-col :span="6">
              <span class="label">
                <span class="SimSun">接收时间</span>
                <span class="Arial">/Received at：</span>
              </span>
              <span class="con">{{
                info.reportPatientInfo.receivedDateTime
              }}</span>
            </el-col>
            <el-col :span="6">
              <span class="label">
                <span class="SimSun">报告时间</span>
                <span class="Arial">/Report Time：</span>
              </span>
              <span class="con">{{
                info.reportPatientInfo.reviewDateTime
              }}</span>
            </el-col>
            <el-col :span="6">
              <span class="label">
                <span class="SimSun">备注</span>
                <span class="Arial">/Note：</span>
              </span>
              <span class="con">{{
                info.reportPatientInfo.remark || ""
              }}</span>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getReportInfo, getReportData,getTimeLine } from "@/request/timeline";
import {InspectReportPatientInfo} from '../../timelineConst'

export default {
  props: {
    titleType: "",
    val: {
      type: Object,
      default() {
        return {
          daId: "",
          title: "",
        };
      },
    },
    info: {
      type: Object,
      default() {
        return {
          list: [],
          status: 0,
          reportPatientInfo: InspectReportPatientInfo
        }
      }
    }
  },
  data() {
    return {
        loading: false,
        lightWingsSpread: false,
        timeLineData: []
    };
  },

  methods: {
    rowDClass() {
      return "line-height: 30px;height: 30px;padding:0px 20px;;font-size:14px;font-family: Microsoft YaHei;";
    },
    headClass() {
      return "color:#000; line-height: 30px;height: 30px;padding:5px 20px;;font-size:14px;font-family: Microsoft YaHei;";
    },
    //设置检验表格相关颜色
    setTextColor(result, itemref, quaresult) {
      if (quaresult === "正常" || !itemref) return "";
      if (itemref === "阴性") return "table-span-red";
      if (quaresult === "↑") return "table-span-red";
      if (quaresult === "↓") return "table-span-green";
      return "";
    },
    setTextArrowColor(itemref, quaresult) {
      if (!itemref) return "";
      if (itemref === "阴性") return "table-spanArrow-red";
      if (quaresult === "↑") return "table-spanArrow-red";
      if (quaresult === "↓") return "table-spanArrow-green";
      return "";
    },
    setTextBackColor(itemref, quaresult, result) {
      if (!itemref) return "";
      if (itemref === "阴性" && result === "阴性") return "";
      if (quaresult === "↑") return "table-spanBack-red";
      if (quaresult === "↓") return "table-spanBack-green";
      return "";
    },

    iconToSelect(val){
      if(val.step=='打印标签'){
        return "iconfont icondayin2"
      }else if(val.step=='采样登记'){
        return "iconfont iconrizhixian-caiyangdengji"
      }else if(val.step=='从护士站取出'){
        return "iconfont iconrizhixian-hushizhan"
      }else if(val.step=='核收标本'){
        return "iconfont iconrizhixian-heshoubiaoben"
      }else if(val.step=='报告发布'){
        return "iconfont iconrizhixian-baogaofabu"
      }
    },

    async openTimelineLogLine() {
      const res = await getTimeLine(this.val.daId)
      
      if(res.code==0){
        this.timeLineData=[...res.data,]
      }else{
        this.$message.error(res.msg)
      }
      this.lightWingsSpread = true
    },
  },
};
</script>
<style lang="less">
.timeline-tick {
  .el-step__line{
        border-left: 1px dashed #CCD1DE;
        background-color: transparent;
        top: 28px !important;
        bottom: 4px !important;
    }
    .el-step__icon{
      color: #46a6ff;
        border: 1px solid;
    }
    .el-step__title{
      color: #000;
      font-weight: bolder;
    }
    .el-step__description{
      p{
        margin-top: 3px;
      }
    }
}
.inspection-table {
  div.cell {
  .table-span-blue {
    color: #1890ff;
  }
  .table-span-red {
    color: #ffffff;
  }
  .table-span-green{
    color: #ffffff;
  }
  .table-spanBack-red {
    background: red;
    padding: 0 2px;
    color: #ffffff;
  }
  .table-spanBack-green{
    background: #2EB16E;
    padding: 0 2px;
    color: #ffffff;
  }
  .table-spanArrow-red {
    color: red;
  }
  .table-spanArrow-green{
    color: #2EB16E;
  }
}
.meaningButton{
  height:20px;
  width:20px;
  font-size: 18px;
  color: rgba(0,0,0,.4);
  &:hover{
    color: #1890ff;
    cursor: pointer;
  }
}
}
</style>
<style lang="less" scoped>
.inspection-table {
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
  .timeline-tick {
    // position: absolute;
    position: fixed;
    // right: 30px;
    right: 120px;
    top: 0;
    z-index: 10;
    /deep/ .logLine {
      background: #1890ff;
      padding: 2px 7px;
      color: #fff;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      cursor: pointer;
        .iconshijianStyle{
          padding: 0 !important;
          margin-right: 4px;
      }
    }
    .logLineContent {
      position: fixed;
      right: 5%;
      top: 29px;
      width: 175px;
      background: #fff;
      padding: 20px 5px 10px 20px;
      border-radius: 5px;
      box-shadow: 1px 1px 10px #0000001c;
      z-index: 10;
      
    }
  }
    .sec-flex.sec-flex-mdt {
        display: flex;
        justify-content: space-around;
        margin-bottom: 20px;
        .info-item {
        flex-direction: column;
        }
    }
    .report-con {
        width: 1000px;
        margin: 0 auto;
      }

    .report-name {
        font-family: "SimSun";
        text-align: center;
        font-size: 20px;
        color: #000;
        font-weight: bold;
        margin-bottom: 10px;
      }
      .label {
        .SimSun {
          font-family: "SimSun";
          height: 30px;
          line-height: 30px;
          font-size: 12px;
          color: #000;
        }
        .Arial {
          font-family: "Arial";
          height: 30px;
          line-height: 30px;
          font-size: 12px;
          color: #000;
        }
      }
      .con {
        font-family: "SimSun";
        line-height: 30px;
        font-size: 12px;
        color: #000;
      }
  .checkout-box {
    width: 1060px;
    padding-top: 30px;
    .checkout-box-right {
      background-color: #fff;
      padding: 40px;
      /deep/ thead {
        tr {
          th {
            border-top: 1px solid #333;
            border-bottom: 1px solid #333 !important;
          }
        }
      }
      /deep/ .el-table td {
        border-bottom: none;
      }
      tbody {
        .el-table__row:last-child {
          td {
            border-bottom: none;
          }
        }
      }
      div.cell {
        .table-span-blue {
          color: #409eff;
          width: 17px;
        }
        .table-span-red {
          color: red;
          padding: 0 2px;
          width: 17px;
        }
        .table-span-green {
          color: #2eb16e;
          padding: 0 2px;
          width: 17px;
        }
        .table-spanArrow-red {
          color: red;
        }
        .table-spanArrow-green {
          color: #2eb16e;
        }
      }
      position: relative;
      flex: 1;
      // height: 100%;
      flex-direction: column;
      .report-name {
        font-family: "SimSun";
        text-align: center;
        font-size: 20px;
        color: #000;
        font-weight: bold;
        margin-bottom: 10px;
      }
      .label {
        .SimSun {
          font-family: "SimSun";
          height: 30px;
          line-height: 30px;
          font-size: 12px;
          color: #000;
        }
        .Arial {
          font-family: "Arial";
          height: 30px;
          line-height: 30px;
          font-size: 12px;
          color: #000;
        }
      }
      .con {
        font-family: "SimSun";
        line-height: 30px;
        font-size: 12px;
        color: #000;
      }
      .report-con {
        width: 1000px;
        margin: 0 auto;
      }
      .pos-top {
        position: absolute;
        top: 5px;
        right: 10px;
        z-index: 10;
      }
      .html-con {
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin: 0 auto;
      }
      img {
        display: block;
        // width: 98%;
        margin: 0 auto;
        max-width: calc(100% - 40px);
      }
      .table-report-con {
        border-bottom: 1px solid #333 !important;
        margin-bottom: 20px;
      }
      .trend {
        height: 25px;
      }
      /deep/ .analyzeProject {
        margin-left: 15px;
      }
    }
  }
}
</style>