<template>
  <div>
    <div v-if="transferRawJson" class="p-2">
      <div
        class="bg-white rounded mb-2 p-2 flex items-center justify-between space-x-2"
      >
        <span class="text-yellow-600 text-sm"
          >提示：录入的数据最终会对应成系统内置项目/检查名称，查询用户检查数据时，以系统内置项目/检查名称为准</span
        >
        <el-button type="primary" link @click="toEdit">
          <Edit class="w-4 h-4" />
          <span>修改数据</span>
        </el-button>
      </div>
      <div
        v-for="(item, index) in transferRawJson"
        :key="index"
        class="bg-white rounded mb-4"
      >
        <div
          class="flex justify-between items-center text-sm text-gray-500 p-4"
        >
          <span>{{ item.groupName }}</span>
          <span
            >检查时间：{{
              dayjs(item.date * 1000).format("YYYY-MM-DD HH:mm:ss")
            }}</span
          >
        </div>
        <div class="p-2">
          <el-table :data="item?.bodyData">
            <el-table-column
              label="项目名称"
              prop="originalName"
            ></el-table-column>
            <el-table-column label="检查结果" prop="value"></el-table-column>
            <el-table-column label="单位" prop="unit"></el-table-column>
            <el-table-column
              label="参考范围"
              prop="reference"
            ></el-table-column>
            <el-table-column label="对应系统项目名称" prop="name">
            </el-table-column>
            <el-table-column label="对应系统检查名称" prop="itemName">
            </el-table-column>
          </el-table>
          <div
            v-if="item.abnormalData?.length"
            class="p-2 bg-gray-50 rounded mt-4"
          >
            <div class="py-2 mb-2 text-sm text-gray-700">异常内容</div>
            <table class="w-full table-fixed">
              <tr class="text-left text-sm text-gray-500">
                <th class="border border-gray-200 p-2">项目名称</th>
                <th class="border border-gray-200 p-2">异常项目</th>
                <th class="border border-gray-200 p-2">异常值</th>
              </tr>
              <tr
                v-for="(abnormal, abnormalIdx) in filterAbnormalBodyData(item)"
                :key="abnormalIdx"
                class="border border-gray-200 text-sm text-gray-500"
              >
                <td class="p-2 border border-gray-200">{{ abnormal.name }}</td>
                <td class="border border-gray-200">
                  <div
                    v-for="(child, childIdx) in abnormal.abnormalDatas"
                    :key="childIdx"
                    class="p-2 border-b last:border-b-0 border-gray-200"
                  >
                    {{ child.name }}
                  </div>
                </td>
                <td class="p-2 border border-gray-200">
                  <div
                    v-for="(child, childIdx) in abnormal.abnormalDatas"
                    :key="childIdx"
                    class="p-2 border-b last:border-b-0 border-gray-200 whitespace-pre-wrap"
                    v-html="formatValue(child.value)"
                  >
                  </div>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  computed,
  watch,
  ref,
  reactive,
  onMounted,
  shallowRef,
  provide,
  inject,
  defineAsyncComponent
} from "vue";

import { useRoute, useRouter } from "vue-router";
import {
  Edit,
  CopyDocument,
  Fold,
  ArrowLeft,
  ArrowRight
} from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { request, parseJsonData, findScope } from "@/utils";
import dayjs from "dayjs";

const [route, router] = [useRoute(), useRouter()];

const getDetail = inject("getDetail");
const transferRawJson = inject("transferRawJson");

const filterAbnormalBodyData = item =>
  item.bodyData.filter(v => v.abnormalDatas?.length);
const toEdit = () => {
  router.push({
    name: "dataUploadCheckData",
    query: {
      sn: route.query.sn
    }
  });
};
const formatValue = (value) => {
  if (value) {
    if (Object.prototype.toString.call(value).slice(8, -1).toLocaleLowerCase() == 'object') {
      return Object.keys(value).map(k => `${k}:${value[k]}`).join('\n')
    } else {
      return value
    }
  } else {
    return value === 0 ? 0 : "-"
  }
}
</script>

<style lang="scss" scoped></style>
