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

import {
  OBR_INIT_VALUE,
  PATIENT_INIT_VALUE,
} from "@/views/work/patient/check/checkInitValues";
import { getPageObxList } from "@/views/work/patient/check/checkAPI";

export default {
  methods: { getPageObxList },
  components: { CheckDetailReport },
  name: "PatientCheck",
  props: {
    checkWindowShow: {
      type: Boolean,
      default: false,
    },
    patientInfo: {
      type: Object,
      default: function () {
        return {
          id: "",
          name: "",
        };
      },
    },
  },
  data() {
    return {
      /**
       * 控制对话框是否显示，true是显示对话框
       * @type {boolean}
       */
      dialogVisible: true,
      reportTabDisabled: false,

      /**
       * 当前检查项目相关信息
       * @property {import('index').Patient} patient - 当前要查看的患者
       * @property {number} obxTotal - 患者检查项目总数
       * @property {import('./index').ObxList} pageObxList - 当前要查看的患者的所有检查项目，注意是分页后的某一的结果
       * @property {import('./index').Obr} obr - 当前需要查看的详细检测报告
       */
      currentCheckInfo: {
        patient: PATIENT_INIT_VALUE,
        obxTotal: 0,
        pageObxList: [],
        obxQueryParams: {
          pageNum: 0,
          pageSize: 0,
        },
        obr: OBR_INIT_VALUE,
      },
    };
  },
  created() {

      if (this.$props.checkWindowShow) {
        /**
         * 请求结果
         * @type {{rows: import('index').ObxList, total: number, pages: number}}
         */
        const { rows, total, pages } = getPageObxList(
          this.patientInfo.id,
          this.currentCheckInfo.obxQueryParams,
        );

        this.currentCheckInfo.pageObxList = rows;
        this.currentCheckInfo.obxTotal = total;
      }

  },
};
</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="console.log(`查看${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="
                () => {
                  this.currentCheckInfo.pageObxList = getPageObxList(
                    patientInfo.id,
                    currentCheckInfo.obxQueryParams,
                  );
                }
              "
            />
          </div>
        </el-tab-pane>
        <el-tab-pane
          label="详细检测报告"
          name="2"
          :disabled="reportTabDisabled"
           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>
