<template>
  <!-- <div class="bg-[#f0f2f5] sticky z-10 top-0 h-4"></div> -->
  <div
    class="bg-white p-4 w-full flex space-x-2 items-center shadow-sm flex-wrap"
  >
    <div class="w-full py-4 space-y-4 pr-4">
      <div v-for="(item, index) in list" :key="index" class="">
        <div
          class="py-2 px-4 flex items-center justify-between bg-[#f9fafb] border border-b-0 border-solid border-gray-200"
        >
          <!-- @click="item.expand = !item.expand" -->
          <span>{{ item.name }}</span>
          <!-- <ArrowUp class="w-4 text-gray-500" v-if="!item.expand" />
          <ArrowDown class="w-4 text-gray-500" v-else /> -->
        </div>
        <div class="w-full overflow-x-auto">
          <div class="flex flex-wrap">
            <div
              v-for="(col, colIdx) in item.list"
              :key="colIdx"
              class="flex-1  border-t border-b border-l last:border-r border-solid border-gray-200"
            >
              <div
                class="p-2 text-sm border-solid border-b border-gray-200"
              >
                {{ col.date }}
              </div>
              <div>
                <div class="p-2 text-sm">
                  <div>
                    <span class="align-middle"
                      >{{ col.value
                      }}{{ col.unit && col.unit != "-" ? col.unit : "" }}
                    </span>
                    <template v-if="col.reference">
                      <el-tooltip>
                        <QuestionFilled
                          class="w-4 h-4 inline align-middle ml-1 cursor-pointer opacity-50"
                        />
                        <template #content>
                          <div class="text-sm">
                            参考范围：{{ col.reference }}
                          </div>
                        </template>
                      </el-tooltip>
                    </template>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- <table
            class="min-w-full bg-white text-gray-700 table-fixed"
          >
            <tr class="font-bold">

              <td
                class="border border-solid border-gray-100 p-2 whitespace-nowrap"
                v-for="(col, index) in item.list"
                :key="index"
              >
                {{ col.date }}
              </td>
            </tr>
            <tr>
              <td
                v-for="(col, colIdx) in item.list"
                :key="colIdx"
                class="border border-solid border-gray-100"
              >
                <div class="p-2 text-sm">
                  <div>
                    <span class="align-middle"
                      >{{ col.value
                      }}{{
                        col.unit && col.unit != "-" ? col.unit : ""
                      }}
                    </span>
                    <template v-if="col.reference">
                      <el-tooltip>
                        <QuestionFilled
                          class="w-4 h-4 inline align-middle ml-1 cursor-pointer opacity-50"
                        />
                        <template #content>
                          <div class="text-sm">
                            参考范围：{{ col.reference }}
                          </div>
                        </template>
                      </el-tooltip>
                    </template>
                  </div>
                </div>
              </td>
            </tr>
          </table> -->
        </div>
      </div>
      <el-empty v-if="!list.length"></el-empty>
    </div>
  </div>
</template>

<script setup>
import { ref, inject, onMounted, watch, provide } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute, useRouter } from "vue-router";

import { request } from "@/utils";
import dayjs from "dayjs";
import { QuestionFilled, ArrowUp, ArrowDown } from "@element-plus/icons-vue";

const list = ref([]);

const compareReportData = inject("compareReportData");
const search = async () => {
  if (compareReportData && compareReportData.value) {
    const compareData = compareReportData.value.compareData;
    console.log("ComparisonOfAbnormalData", compareData);
    list.value = compareData.medDatas || [];
    console.log("ComparisonOfAbnormalData", list.value);
  }
};
const init = async () => {
  search();
};
watch(
  () => compareReportData.value,
  () => {
    init();
  },
  {
    immediate: true
  }
);
</script>

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