<template>
  <page-layer>
    <template #header>
      <el-input v-model="tjid" style="width: 260px" clearable placeholder="请输入患者体检编号"><template #prepend>体检号</template>
      </el-input>
      <el-button type="primary" icon="Search" style="margin-left: 16px" @click="queryTjData">查询</el-button>
    </template>
    <template #aside>
      <el-table :data="inspectionIndex" :height="tableHeight" stripe highlight-current-row @row-click="queryDetail">
        <el-table-column prop="time" label="报告日期" width="140"></el-table-column>
        <el-table-column prop="name" label="报告内容"></el-table-column>
      </el-table>
    </template>
    <template #main>
      <div id="reportDetail" style="width: 100%; height: 100%; padding: 0 2px; background-color: white">
        <div v-if="tjxm === '首页'">
          <div style="text-align: right; height: 77px; margin-bottom: 20px">
            <svg id="barcode" v-if="tjid"></svg>
          </div>
          <div style="text-align: right; margin-bottom: 200px">
            <h1 style="width: 100%; text-align: center; font-weight: bold; height: 30px; line-height: 30px">
              长&emsp;沙&emsp;泰&emsp;和&emsp;医&emsp;院</h1>
            <h1 style="width: 100%; text-align: center; font-weight: bold; height: 30px; line-height: 30px">
              体&emsp;检&emsp;报&emsp;告</h1>
          </div>
          <div style="width: 100%; font-size: 18px">
            <el-row :gutter="6">
              <el-col :span="6"></el-col>
              <el-col :span="6">体检编号：{{ tjReportDetail.reportHeader.条码号 }}</el-col>
              <el-col :span="6">
                <el-checkbox-group v-model="checkboxList">
                  <el-checkbox label="个人"></el-checkbox>
                  <el-checkbox label="团体"></el-checkbox>
                </el-checkbox-group>
              </el-col>
              <el-col :span="6"></el-col>
            </el-row>
            <el-row :gutter="6" style="margin-bottom: 8px">
              <el-col :span="6"></el-col>
              <el-col :span="6">姓&emsp;&emsp;名：{{ tjReportDetail.reportHeader.姓名 }}</el-col>
              <el-col :span="6">性&emsp;&emsp;别：{{ filterSex(tjReportDetail.reportHeader.性别) }}</el-col>
              <el-col :span="6">年&emsp;&emsp;龄：{{ tjReportDetail.reportHeader.年龄 }}</el-col>
              <!-- <el-col :span="6"></el-col> -->
            </el-row>
            <el-row :gutter="6" style="margin-bottom: 8px">
              <el-col :span="6"></el-col>
              <el-col :span="12">单&emsp;&emsp;位：{{ tjReportDetail.reportHeader.工作单位 }}</el-col>
              <el-col :span="6"></el-col>
            </el-row>
            <el-row :gutter="6" style="margin-bottom: 8px">
              <el-col :span="6"></el-col>
              <el-col :span="12">部&emsp;&emsp;门：{{ tjReportDetail.reportHeader.所在部门 }}</el-col>
              <el-col :span="6"></el-col>
            </el-row>
            <el-row :gutter="6" style="margin-bottom: 160px">
              <el-col :span="6"></el-col>
              <el-col :span="6">体检日期：{{ filterDate(tjReportDetail.reportHeader.登记日期) }}</el-col>
              <el-col :span="6">电&emsp;&emsp;话：{{ tjReportDetail.reportHeader.手机 }}</el-col>
              <el-col :span="6"></el-col>
            </el-row>
            <div style="margin: 5px 0; border-top: 1px solid gray"></div>
            <h5 style="width: 100%; text-align: center; height: 5px; line-height: 5px">长沙泰和医院</h5>
            <h5 style="width: 100%; text-align: center; height: 5px; line-height: 5px">咨询电话：0731-88518508</h5>
            <h4 style="width: 100%; text-align: center; font-weight: bold; height: 5px; line-height: 5px">
              本体检报告仅供临床参考，不作为诊断依据，谢谢你的光临！</h4>
          </div>
        </div>
        <div v-else-if="tjxm === '体检总结'">
          <el-row :gutter="6" style="text-align: center; padding-top: 10px">
            <el-col :span="6">条码号：{{ tjReportDetail.reportSummary.条码 }}</el-col>
            <el-col :span="6">姓名：{{ tjReportDetail.reportHeader.姓名 }}</el-col>
            <el-col :span="6">年龄：{{ tjReportDetail.reportHeader.年龄 }}</el-col>
            <el-col :span="6">日期：{{ filterDate(tjReportDetail.reportSummary.汇总日期) }}</el-col>
          </el-row>
          <div style="margin: 5px 0; border-top: 1px solid gray"></div>
          <el-row :gutter="6" style="padding-bottom: 6px; margin: 0 20px 0 20px">
            <span style="font-weight: bold">
              尊敬的用户：<br />
              &emsp;&emsp;您好! 欢迎您莅临长沙泰和医院体检中心。身体健康是学习和工作的基础，注意健康是生活和事业发展的必须。世界卫生组织(WHO)提出：“健康是人的生
              理、心里和社会的完美状态，而不仅仅是指无疾病或非体弱的状态”。通过体检，检查和发现影响健康的有关因素，成为促进您身心健康的重要措施和保证。为了
              您的健康，我们真诚的建议您定期进行健康体检。
            </span>
          </el-row>
          <el-row :gutter="6" style="padding-bottom: 6px; margin: 0 20px 0 20px">
            <span style="font-weight: bold"> 祝您身体健康，工作顺利！ </span>
          </el-row>
          <div style="margin: 5px 0; border-top: 1px solid gray"></div>
          <el-row :gutter="6" style="padding-bottom: 12px; margin: 0 20px 0 20px">
            <div>
              <span style="font-size: 16px"><b>一丶体检结论及健康建议</b></span>
            </div>
          </el-row>
          <el-row :gutter="6" style="padding-bottom: 2px; margin: 0 20px 0 40px">
            <el-col :span="24">
              <span style="font-size: 12px; font-weight: bold">
                <p v-html="tjReportDetail.reportSummary.汇总建议"></p>
              </span>
            </el-col>
          </el-row>
          <el-row :gutter="6" style="margin: 0 20px 0 20px">
            <el-col :span="6"></el-col>
            <el-col :span="6"></el-col>
            <el-col :span="6"><span style="font-size: 18px"><b>汇总：{{ tjReportDetail.reportSummary.汇总医生 }}</b></span>
            </el-col>
            <el-col :span="6"><span style="font-size: 18px"><b>主检：{{ tjReportDetail.reportSummary.审核医生 }}</b></span>
            </el-col>
          </el-row>
        </div>
        <div v-else>
          <el-row :gutter="6" style="text-align: center; padding-top: 10px">
            <el-col :span="6">条码号：{{ tjReportDetail.reportSummary.条码 }}</el-col>
            <el-col :span="6">姓名：{{ tjReportDetail.reportHeader.姓名 }}</el-col>
            <el-col :span="6">年龄：{{ tjReportDetail.reportHeader.年龄 }}</el-col>
            <el-col :span="6">日期：{{ filterDate(tjReportDetail.reportSummary.汇总日期) }}</el-col>
          </el-row>
          <div style="margin: 5px 0; border-top: 1px solid gray"></div>
          <el-row :gutter="6" style="padding-bottom: 2px; margin: 0 20px 0 20px">
            <div style="text-align: center">
              <h2>{{ tjxm }}</h2>
            </div>
          </el-row>
          <el-row :gutter="6" style="padding-bottom: 8px; margin: 0 20px 0 20px">
            <el-table :data="inspectionItems.slice(pageSize * (currentPage - 1), pageSize * currentPage)"
              :height="tableHeight1" stripe highlight-current-row>
              <el-table-column prop="no" label="序号" width="70px"></el-table-column>
              <el-table-column prop="item" label="体检项目"></el-table-column>
              <el-table-column label="体检结果">
                <template #default="scope">
                  {{ scope.row.result }}
                  <span style="color: #f56c6c; font-size: 18px">
                    <b>{{ scope.row.diffset }} </b>
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="unit" label="单位"></el-table-column>
              <el-table-column prop="norm" label="参考值或范围"></el-table-column>
            </el-table>
            <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[15, 30, 45, 60]"
              :total="inspectionItems.length" layout="total, sizes, prev, pager, next, jumper" style="margin-top: 5px"
              @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </el-pagination>
          </el-row>
          <div style="margin: 5px 0; border-top: 1px solid gray"></div>
          <el-row :gutter="6" style="padding-bottom: 2px; margin: 0 20px 0 20px" v-if="itemResult.诊断内容">
            <h3>
              科室小结：<span style="color: blue">{{ itemResult.诊断内容 }}</span>
            </h3>
          </el-row>
          <el-row :gutter="6" style="padding-bottom: 2px; margin: 0 20px 0 20px">
            <el-col :span="6"></el-col>
            <el-col :span="6"></el-col>
            <el-col :span="6">检验：{{ itemResult.检查医生签名 }}</el-col>
            <el-col :span="6">审核：{{ itemResult.审核医生签名 }}</el-col>
          </el-row>
          <el-row :gutter="6" style="padding-bottom: 2px; margin: 0 20px 0 20px">
            <h5>注：此检验报告只对本次标本负责，如有疑问请七日内复查。</h5>
          </el-row>
        </div>
      </div>
    </template>
  </page-layer>
</template>
<script>
import { reactive, ref, onMounted } from 'vue'
import store from '@/store'
import { getTjReportData } from '@/api/tj-report/tj-report'
import JsBarcode from 'jsbarcode'
import { ElMessage } from 'element-plus'
import PageLayer from '@/layout/PageLayer.vue'
export default {
  setup() {
    const windowSize = store.state.app.windowSize;
    const tableHeight = windowSize.h / 1.02;
    const tableHeight1 = windowSize.h - 360;
    const inspectionIndex = ref([]);
    const inspectionItems = ref([]);
    const itemResult = ref({});
    const barcodeValue = ref("");
    const tjid = ref("");
    const tjxm = ref("首页");
    const checkboxList = ref([]);
    const pageSize = ref(30);
    const currentPage = ref(1);
    const handleSizeChange = (val) => {
      pageSize.value = val;
    };
    const handleCurrentChange = (val) => {
      currentPage.value = val;
    };
    const tjReportDetail = reactive({
      reportHeader: {},
      reportItems: [],
      reportSummary: {},
    });
    onMounted(() => {
      inspectionIndex.value = [{ name: "首页" }, { name: "体检总结" }];
    });
    const queryDetail = (row) => {
      let item = row.name;
      tjxm.value = item;
      if (tjxm.value && item === "首页") {
        nextTick(() => {
          JsBarcode("#barcode", tjid.value, {
            lineColor: "#333",
            width: 2,
            height: 35,
            displayValue: true, //是否显示文字信息
          });
        });
      }
      else if (item != "首页" && item != "体检总结") {
        let items = [];
        inspectionItems.value = [];
        for (let i = 0; i < tjReportDetail.reportItems.length; i++) {
          if (tjReportDetail.reportItems[i][item]) {
            items = tjReportDetail.reportItems[i][item];
          }
        }
        // 解析获取的检查结果(过滤没有结果的检查等)
        let resultItems = [];
        if (items) {
          let no = 1;
          for (let i = 0; i < items.length; i++) {
            if (i == items.length - 1) {
              itemResult.value = items[i];
            }
            if (!items[i]["结果"]) {
              continue;
            }
            let _item = { no: "", item: "", result: "", unit: "", norm: "", diffset: "" };
            _item.no = no;
            _item.item = items[i]["检查项目"];
            _item.result = items[i]["结果"];
            if (items[i]["阳性标识"]) {
              _item.diffset = items[i]["阳性标识"];
            }
            _item.unit = items[i]["单位"];
            _item.norm = items[i]["参考范围显示效果"];
            resultItems.push(_item);
            no = no + 1;
          }
        }
        inspectionItems.value = resultItems;
      }
    };
    const queryTjData = () => {
      if (!tjid.value) {
        ElMessage({
          message: "请输入患者体检编号。",
          type: "warning",
          duration: 2000,
          showClose: true,
        });
        return;
      }
      JsBarcode("#barcode", tjid.value, {
        lineColor: "#333",
        width: 2,
        height: 35,
        displayValue: true, //是否显示文字信息
      });
      const param = {
        tjid: tjid.value,
      };
      getTjReportData(param)
        .then((res) => {
          if (!res || res.length == 0) {
            ElMessage({
              message: "没有体检报告数据",
              type: "warning",
              duration: 2000,
              showClose: true,
            });
            return;
          }
          inspectionIndex.value = [{ name: "首页" }, { name: "体检总结" }];
          for (const key in res) {
            if (res[key].reportHeader) {
              tjReportDetail.reportHeader = res[key].reportHeader;
            }
            else if (res[key].reportItems) {
              inspectionIndex.value = inspectionIndex.value.concat(res[key].reportItems);
            }
            else if (res[key].reportSummary) {
              tjReportDetail.reportSummary = res[key].reportSummary;
            }
            else {
              tjReportDetail.reportItems.push(res[key]);
            }
          }
          barcodeValue.value = tjReportDetail.reportHeader.条码号;
          tjid.value = tjReportDetail.reportHeader.条码号;
          if (tjReportDetail.reportHeader.团体or个人 === "0") {
            checkboxList.value = ["团体"];
          }
          else if (tjReportDetail.reportHeader.团体or个人 === "1") {
            checkboxList.value = ["个人"];
          }
          else {
            checkboxList.value = [];
          }
        })
        .catch((e) => {
          console.log(e);
        });
    };
    return {
      barcodeValue,
      tableHeight,
      tableHeight1,
      tjid,
      tjxm,
      checkboxList,
      tjReportDetail,
      inspectionIndex,
      inspectionItems,
      itemResult,
      pageSize,
      currentPage,
      queryDetail,
      queryTjData,
      filterSex,
      filterDate,
      handleCurrentChange,
      handleSizeChange,
    };
  },
  components: { PageLayer }
}

function filterSex(val) {
  switch (val) {
    case '0':
      return '未填'
    case '1':
      return '男'
    case '2':
      return '女'
    case '3':
      return '未知'
  }
  return ''
}

// 根据时间戳返回年月日
function filterDate(val) {
  if (val) {
    let date = new Date(val)

    if (!date) {
      return ''
    }
    let Y = date.getFullYear() + '-'
    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
    let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
    return Y + M + D
  } else {
    return ''
  }
}
</script>