<template>
  <div class="h-full">
    <div class="h-full">
      <div
        class="flex items-center p-3 cursor-pointer hover:bg-gray-50"
        @click="openDialog"
      >
        <!-- <Clock style="width: 24px; height: 24px; margin-right: 5px" /> -->
        <img
          src="./imgs/tixin.png"
          style="width: 24px; height: 24px; margin-right: 5px"
          alt=""
        />
        <h3>人群健康等级详情</h3>
        <div class="flex justify-end flex-1">
          <ArrowRight class="w-4 h-4"></ArrowRight>
        </div>
      </div>
      <el-row class="p-2 pt-4">
        <el-table
          :data="tableData"

          stripe
          ref="tableRefs"
          height="32vh"
          v-if="tableData?.length"
        >
          <el-table-column label="姓名">
            <template #default="{ row }">
              <span class="">{{ row.archives?.name }}</span>
            </template>
          </el-table-column>
          <el-table-column  label="基本信息">
            <template #default="{ row }">
              <div class="flex items-center whitespace-nowrap">
                <component
                  :is="row.archives?.gender == 1 ? Male : Female"
                  class="w-3"
                  :class="
                    row.archives?.gender == 1
                      ? 'text-blue-500'
                      : 'text-pink-500'
                  "
                ></component>
                <span class="mr-4">{{
                  row.archives?.gender == 1 ? "男" : "女"
                }}</span>

                <img src="@/assets/icon-birthday.png" alt="" class="w-4 h-4" />
                <span class="">{{ formatAge(row.archives?.birthday) }}岁</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column  label="健康等级">
            <template #default="{ row }">
              <el-tag :type="level2Class[row.level].type">{{
                row.level
              }}</el-tag>
            </template>
          </el-table-column>
        </el-table>
        <div v-else class="text-center w-full">
          <el-empty :image-size="100"></el-empty>
        </div>
      </el-row>
    </div>

    <el-dialog v-model="dialogVisible" title="人群健康等级" width="80%">
      <div class="py-2 flex items-center">
        <div>
          <el-select v-model="dialogData.level" placeholder="请选择健康等级">
            <el-option label="全部健康等级" :value="''"></el-option>
            <el-option
              v-for="(item, key) in level2Class"
              :key="key"
              :label="key"
              :value="key"
            ></el-option>
          </el-select>
        </div>
        <div class="flex-1 flex items-center justify-end">
          <el-input
            v-model="dialogData.keyword"
            class="w-fit mx-2"
            clearable
            placeholder="请输入姓名或档案号"
          ></el-input>
          <el-button type="primary" @click="dialogPageChange(1)"
            >搜索</el-button
          >
        </div>
      </div>
      <el-table :data="dialogData.list">
        <el-table-column label="档案号" prop="archives.id"> </el-table-column>
        <el-table-column label="姓名" prop="archives.name"> </el-table-column>
        <el-table-column label="性别">
          <template #default="{ row }">
            {{ row.archives.gender == 1 ? "男" : "女" }}
          </template>
        </el-table-column>
        <el-table-column label="年龄">
          <template #default="{ row }">
            {{ formatAge(row.archives?.birthday) }}
          </template>
        </el-table-column>
        <el-table-column label="健康等级" prop="level"
          ><template #default="{ row }">
            <span :class="level2Class[row.level]?.class">{{ row.level }}</span>
          </template></el-table-column
        >
        <el-table-column label="操作">
          <template #default="{ row }">
            <div>
              <el-button type="primary" link @click="openDialogDetail(row)"
                >风险评估详情</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="justify-end mt-4"
        v-model:current-page="dialogData.page"
        :page-size="dialogData.pageSize"
        background
        size="small"
        layout="total, prev, pager, next"
        :total="dialogData.total"
        @current-change="dialogPageChange"
      />
    </el-dialog>
  </div>
</template>
<script setup>
import { reactive, ref, computed, onMounted, inject } from "vue";
import { Clock } from "@element-plus/icons-vue";
import { Female, Male, ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
import { scrollUp, formatAge, randomString } from "@/utils";

import { useLargeScreenStoreHook } from "@/store/modules/largeScreen";
const useLargeScreenHook = useLargeScreenStoreHook();

const largeScreenGlobalData = computed(() => {
  return useLargeScreenHook?.largeScreenGlobalData;
});
const tableData = computed(() => {
  return useLargeScreenHook?.largeScreenGlobalData?.archivesList;
});
const tableRefs = ref();

const level2Class = {
  重点关爱人群: {
    type: "danger",
    class: "text-red-500"
  },
  一般健康人群: {
    type: "warning",
    class: "text-yellow-500"
  },
  基本健康人群: {
    type: "success",
    class: "text-green-500"
  }
};
onMounted(() => {
  if (tableData.value?.length && tableRefs?.value) {

    scrollUp(tableRefs.value);
  }
});

const dialogVisible = ref(false);

const dialogData = reactive({
  page: 1,
  pageSize: 10,
  list: [],
  keyword: "",
  total: 0,
  level: ""
});
const openDialog = () => {
  dialogData.total = getDialogFilterList().length;
  dialogData.keyword = "";
  dialogData.level = "";
  dialogPageChange(1);
  dialogVisible.value = true;
};

const getDialogFilterList = () => {
  const raw = largeScreenGlobalData.value?.archivesList || [];
  let result = [...raw];
  if (!dialogData.level && !dialogData.keyword) return raw;
  if (dialogData.keyword) {
    result = result.filter(
      v =>
        v.archives.name.includes(dialogData.keyword) ||
        v.archives.id == dialogData.keyword
    );
  }

  if (dialogData.level) {
    result = result.filter(v => v.level == dialogData.level);
  }
  console.log(result);
  return result;
};
const dialogPageChange = (page = 1) => {
  dialogData.page = page;

  const start = (page - 1) * dialogData.pageSize;
  const end = start + dialogData.pageSize;
  const list = getDialogFilterList()
  dialogData.total = list.length
  dialogData.list = list.slice(start, end);
};
const openParentDialogDetail = inject("openDialogDetail");
const openDialogDetail = async row => {
  openParentDialogDetail(row.archives.id);
};
</script>
