<template>
  <div class="component-center1 mb-2">
    <div class="bg-white rounded">
      <div
        class="flex items-center cursor-pointer p-3 hover:bg-gray-50"
        @click="openDialog"
      >
        <img
          src="./imgs/yujin.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>
      <div class="grid grid-cols-4 py-4">
        <div class="text-center">
          <el-statistic
            title="已评估"
            :value="largeScreenGlobalData?.assessedArchivesTotal || 0"
          >
            <template #suffix>
              <span class="text-gray-500 text-xs">人</span>
            </template>
          </el-statistic>
        </div>
        <div class="text-center">
          <el-statistic
            title="评估中"
            :value="largeScreenGlobalData?.assessingArchivesTotal || 0"
          >
            <template #suffix>
              <span class="text-gray-500 text-xs">人</span>
            </template>
          </el-statistic>
        </div>
        <div class="text-center">
          <el-statistic
            title="重大疾病确诊"
            :value="largeScreenGlobalData?.abnormalConfirmedArchivesTotal || 0"
          >
            <template #suffix>
              <span class="text-gray-500 text-xs">人</span>
            </template>
          </el-statistic>
        </div>
        <div class="text-center">
          <el-statistic
            title="重大疾病有明显风险"
            :value="
              largeScreenGlobalData?.abnormalApparentRiskArchivesTotal || 0
            "
          >
            <template #suffix>
              <span class="text-gray-500 text-xs">人</span>
            </template>
          </el-statistic>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" width="80%" title="重大疾病风险预警情况">
      <div class="flex items-center">
        <div class="flex-1 space-x-2">
          <el-select
            v-model="dialogFilter.diseaseStatusList"
            placeholder="全部疾病评估情况"
            filterable
            clearable
            multiple
          >
            <el-option
              v-for="(item, index) in riskStatus"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>

          <el-select
            v-model="dialogFilter.riskDiseaseNames"
            placeholder="全部疾病"
            filterable
            multiple
            clearable
            collapse-tags
          >
            <el-option
              v-for="(item, index) in diseaseNames"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>

          <el-button type="primary" class="ml-2" @click="search"
            >查询</el-button
          >
          <el-button @click="resetFilter">重置</el-button>
        </div>
        <div>
          <!-- <SearchArchivesSelect
          v-model="filter.archivesId"
          placeholder="请选择档案"
          @change="
            v => {
              filter.archivesId = v;
            }
          "
        /> -->
          <el-button type="primary" class="ml-2" @click="search"
            >搜索</el-button
          >
        </div>
      </div>
      <div>
        <el-table
          :data="dialogData.list"
          class="w-full mt-4"
          table-layout="auto"
        >
          <el-table-column prop="archives.name" label="用户信息">
            <template #default="{ row }">
              <div>{{ row.archivesId }}</div>
              <div class="whitespace-nowrap">{{ row?.archives?.name }}</div>
              <div class="text-gray-500 text-xs whitespace-nowrap">
                {{ row.archives?.gender == 1 ? "男" : "女" }}，{{
                  formatAge(row.archives?.birthday)
                }}岁
              </div>
            </template>
          </el-table-column>
          <el-table-column label="来源渠道" min-width="240">
            <template #default="{ row }">
              {{
                (row.archives?.archivesChannels?.length &&
                  row.archives?.archivesChannels.map(v => v.name).join()) ||
                ""
              }}
            </template>
          </el-table-column>
          <el-table-column label="已确诊疾病" min-width="300">
            <template #default="{ row }">
              <div class="flex flex-wrap max-w-[20vw]">
                <div
                  v-for="(item, index) in row.confirmDiseaseNames"
                  :key="index"
                >
                  <div
                    class="bg-purple-50 text-purple-700 rounded py-1 px-2 w-fit m-1 text-sm"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="有明显风险疾病" min-width="300">
            <template #default="{ row }">
              <div class="flex flex-wrap max-w-[20vw]">
                <div v-for="(item, index) in row.riskDiseaseNames" :key="index">
                  <div
                    class="bg-red-50 text-red-700 rounded py-1 px-2 w-fit m-1 text-sm"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="有一定风险疾病" min-width="300">
            <template #default="{ row }">
              <div class="flex flex-wrap max-w-[20vw]">
                <div
                  v-for="(item, index) in row.certainRiskDiseaseNames"
                  :key="index"
                >
                  <div
                    class="bg-gray-100 text-yellow-600 rounded py-1 px-2 w-fit m-1 text-sm"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="缺乏评估数据疾病" min-width="300">
            <template #default="{ row }">
              <div class="flex flex-wrap max-w-[20vw]">
                <div
                  v-for="(item, index) in row.lackAssessmentDiseaseNames"
                  :key="index"
                >
                  <div class="bg-gray-100 rounded py-1 px-2 w-fit m-1 text-sm">
                    {{ item }}
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="暂无风险疾病" min-width="300">
            <template #default="{ row }">
              <div class="flex flex-wrap max-w-[20vw]">
                <div
                  v-for="(item, index) in row.noRiskDiseaseNames"
                  :key="index"
                >
                  <div
                    class="bg-gray-100 text-green-600 rounded py-1 px-2 w-fit m-1 text-sm"
                  >
                    {{ item }}
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120px" fixed="right">
            <template #default="{ row }">
              <el-button type="primary" link @click="openDialogDetail(row)"
                >风险评估详情</el-button
              ></template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="justify-end mt-4"
          :current-page="dialogFilter.page"
          :page-size="dialogFilter.pageSize"
          :total="dialogData.total"
          background
          layout="total, prev, pager, next, jumper"
          @current-change="
            page => {
              dialogFilter.page = page;
              getDialogList();
            }
          "
        />
      </div>
    </el-dialog>
  </div>
  <div class="flex flex-1 max-h-[50vh] overflow-y-auto bg-white p-2 rounded">
    <el-table
      :data="tableData"
      stripe
      ref="tableRefs"
      height="45vh"
      class="m-auto"
      :header-cell-style="{
        background: '#F9F9F9'
      }"
    >
      <!-- height="44.3vh" -->
      <el-table-column prop="name" label="疾病" align="center">
      </el-table-column>
      <el-table-column prop="confirmed" label="已确诊人数" align="center">
        <template #header>
          <el-button link style="color: red">已确诊</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="apparentRisk" label="高风险人数" align="center">
        <template #header>
          <el-button link type="danger">有明显风险</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="partRisk" label="" align="center">
        <template #header>
          <el-button link type="warning">有一定风险</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="normal" label="" align="center">
        <template #header>
          <el-button link type="success">暂无风险</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="unknown" align="center">
        <template #header>
          <el-button link type="">缺乏评估数据</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import { reactive, ref, computed, onMounted, onUnmounted, shallowRef, defineAsyncComponent, nextTick, provide } from "vue";
import { Filter } from "@element-plus/icons-vue";

import { formatAge, request, scrollUp, parseJsonData  } from "@/utils";

import { ArrowRight } from "@element-plus/icons-vue";
import { useLargeScreenStoreHook } from "@/store/modules/largeScreen";
import { ElLoading } from "element-plus";
import { inject } from "vue";
const useLargeScreenHook = useLargeScreenStoreHook();

const largeScreenGlobalData = computed(() => {
  return useLargeScreenHook?.largeScreenGlobalData;
});

const tableRefs = ref();
const tableData = computed(() => {
  return useLargeScreenHook?.largeScreenGlobalData?.diseaseRiskMap;
});
const scrolltimer = ref(null);
// 设置自动滚动

onMounted(() => {
  scrollUp(tableRefs.value);
});
onUnmounted(() => {});

const dialogVisible = ref(false);

const dialogData = reactive({
  page: 1,
  pageSize: 10,
  list: [],
  keyword: "",
  total: 0
});
const dialogFilter = ref({
  page: 1,
  pageSize: 10,
  tumorStatusList: [],
  cardiovascularStatusList: [],
  customStatusList: [],
  archivesId: "",
  suggestionStatus: 0,
  archivesTagIds: [],
  diseaseStatusList: [],
  riskDiseaseNames: []
});

const openDialog = () => {
  dialogData.keyword = "";
  getDialogList();
  getDiseaseNames();
  dialogVisible.value = true;
};
const getDialogList = async () => {
  const { data } = await request.get(
    `/idcService/agency/archivesReport/paginate`,
    {
      params: {
        ...dialogFilter.value,
        diseaseStatusList: dialogFilter.value.diseaseStatusList.join(),
        riskDiseaseNames: dialogFilter.value.riskDiseaseNames.join()
      }
    }
  );
  dialogData.list = data.list;
  dialogData.total = data.total;
};

const search = async () => {
  dialogFilter.value.page = 1;
  getDialogList();
};
const diseaseNames = shallowRef([]);
const getDiseaseNames = async () => {
  const { data } = await request.get(
    "/idcService/agency/archivesReport/diseaseNames"
  );
  diseaseNames.value = data.list;
};

const openParentDialogDetail = inject("openDialogDetail")
const openDialogDetail = async row => {

  openParentDialogDetail(row.archives.id)
};


</script>

<style lang="scss" scoped>
.component-center1 {
  .el-card {
    border: none;
    // border-bottom: 1px solid var(--el-card-border-color);
  }
}
</style>
