<template>
  <div class="h-full">
    <div class="h-full">
      <div
        class="flex items-center p-3 cursor-pointer hover:bg-gray-50"
        @click="openDialog"
      >
        <img
          src="./imgs/dengjirenqun.png"
          style="width: 30px; 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="p-2">
        <el-row :gutter="20">
          <el-col :span="12">
            <div>
              <el-table :data="tableData" :show-header="false" border>
                <el-table-column prop="healthLevel" label="重点关爱人群">
                  <template #default="{ row }">
                    <div style="height: 50px" class="flex items-center">
                      {{ row.healthLevel }}
                    </div>
                  </template>
                </el-table-column>

                <el-table-column prop="total" label="重点关爱人群">
                </el-table-column>
              </el-table>
            </div>
          </el-col>
          <el-col :span="12">
            <div
              style="height: 18vh; width: 100%"
              class="chart-container relative"
            >
              <ComponentChart ref="chartsRef"></ComponentChart>
            </div>
          </el-col>
        </el-row>
      </div>
    </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,
  defineAsyncComponent,
  provide,
  nextTick,
  inject
} from "vue";
import { PieChart } from "@element-plus/icons-vue";

import { formatAge, parseJsonData, request } from "@/utils";
import ComponentChart from "@/components/Chart.vue";
import { ArrowRight } from "@element-plus/icons-vue";

import { ElLoading } from "element-plus";
import { useLargeScreenStoreHook } from "@/store/modules/largeScreen";
const useLargeScreenHook = useLargeScreenStoreHook();
const chartsRef = ref();
const largeScreenGlobalData = computed(() => {
  return useLargeScreenHook?.largeScreenGlobalData;
});
const tableData = computed(() => {
  return useLargeScreenHook?.largeScreenGlobalData?.healthLevelMap;
});

const initChart = () => {
  const option = {
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    grid: {
      left: "2%"
    },
    legend: {
      x: "left",
      itemWidth: 14,
      itemHeight: 14,
      align: "left",

      data: tableData.value?.map(v => v.healthLevel),
      textStyle: {
        color: "#333"
      }
    },
    series: [
      {
        name: "",
        type: "pie",
        radius: ["42%", "58%"],
        color: ["#F54A45", "#FF8800", "#34C724"],
        label: {
          normal: {
            formatter: "{b}\n{d}%"
          }
        },
        // data: [{ value: 435, name: "2D线" }]
        data: tableData.value?.map(v => {
          return {
            value: v.total,
            name: v.healthLevel
          };
        })
      }
    ]
  };

  chartsRef.value?.setOption(option);
};
onMounted(() => {
  setTimeout(() => {
    initChart();
  }, 500);
});
const dialogVisible = ref(false);

const dialogData = reactive({
  page: 1,
  pageSize: 10,
  list: [],
  keyword: "",
  total: 0,
  level: ""
});
const openDialog = () => {
  dialogData.total = getDialogFilterList().length;
  dialogData.keyword = "";
  dialogPageChange(1);
  dialogVisible.value = true;
};
const level2Class = {
  重点关爱人群: {
    class: "text-red-500"
  },
  一般健康人群: {
    class: "text-yellow-500"
  },
  基本健康人群: {
    class: "text-green-500"
  }
};

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>
<style lang="scss" scoped>
.component-center2 {
  ::v-deep {
    .el-card__body {
      padding-bottom: 0px !important;
    }
  }
}
</style>
