<script>
import CheckDetailReport from "@/views/work/patient/check/checkProjectDetailReport.vue";

import {
  OBR_INIT_VALUE,

} from "@/views/work/patient/check/checkInitValues";

import service from "@/utils/request";

export default {
  components: { CheckDetailReport },
  name: "PatientCheck",
  props: {
    checkWindowShow: {
      type: Boolean,
      default: false,
    },
    patientInfo: {
      type: Object,
      default: function () {
        return {
          id: "",
          name: "",
        };
      },
    },
  },
  data() {
    return {

      testData: null,

      /**
       * 当前检查项目相关信息
       * @property {number} obxTotal - 患者检查项目总数
       * @property {import('./index').ObxList} pageObxList - 当前要查看的患者的所有检查项目，注意是分页后的某一的结果
       * @property {import('./index').Obr} obr - 当前需要查看的详细检测报告
       */
      currentCheckInfo: {
        obxTotal: 0,
        pageObxList: [],
        obxQueryParams: {
          pageNum: 0,
          pageSize: 0,
        },
        obr: OBR_INIT_VALUE,
      },
    };
  },
  watch: {
    checkWindowShow: {
      handler: function (newVal) {
        // console.log(`checkWindowShow的值被设为${newVal}`)
        if(newVal) {

          service.get(`work/result/list`)
          .then(res => {
            this.currentCheckInfo.pageObxList = res.rows
          })
        }

      }
    }
  },
  methods: {
    showDetailReport (obrId) {

      service.get(`work/request/patid/${this.patientInfo.id}`)
      .then(res => {


        this.currentCheckInfo.obr = res.rows.find(item => item.id === obrId)
        console.log(this.currentCheckInfo.obr)
      })
    }
  }
};
</script>

<template>
  <div class="patient-check-projects">
    <el-dialog
      :title="`${patientInfo.name}的检测项目相关信息`"
      :visible="checkWindowShow"
      :before-close="() => $emit('update:checkWindowShow', false)"
      width="80%"
      top="5%"
      center
    >
      <el-tabs value="1">
        <el-tab-pane label="检测项目表" name="1" style="height: 400px">
          <div id="patient-check-projects-list">
            <el-table
              width="75vw"
              stripe
              :data="currentCheckInfo.pageObxList"
            >
              <el-table-column
                label="诊断名称"
                align="center"
                prop="mecTechObsProject"
              ></el-table-column>
              <el-table-column
                label="项目信息结果"
                align="center"
                prop="result"
              ></el-table-column>
              <el-table-column
                label="项目单位"
                align="center"
                prop="unitCode"
              ></el-table-column>
              <el-table-column
                label="结果参考值"
                align="center"
                prop="result"
              ></el-table-column>
              <el-table-column
                label="高低标志"
                align="center"
                prop="sign"
              ></el-table-column>
              <el-table-column
                label="微生物观察分类"
                align="center"
                prop="obsClassification"
              ></el-table-column>
              <el-table-column
                label="检验方法"
                align="center"
                prop="testMethod"
              ></el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">

                  <el-button
                    type="text"
                    icon="el-icon-search"
                    @click="showDetailReport(scope.row.obrId)"
                  >
                    查看详细检验报告
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <pagination
              :total="currentCheckInfo.obxTotal"
              :page.sync="currentCheckInfo.obxQueryParams.pageNum"
              :limit.sync="currentCheckInfo.obxQueryParams.pageSize"
              @pagination="
              "
            />
          </div>
        </el-tab-pane>
        <el-tab-pane
          label="详细检测报告"
          name="2"
           style="height: 400px"
        >
          <check-detail-report :obr="currentCheckInfo.obr" />
        </el-tab-pane>
      </el-tabs>

      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="$emit('update:checkWindowShow', false)"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
