<template>
  <div class="h-full">
    <div
      class="flex items-center p-3 cursor-pointer hover:bg-gray-50"
      @click="openDialog"
    >
      <img
        :src="imgs[props.index].src"
        alt=""
        style="width: 24px; height: 24px; margin-right: 5px"
        srcset=""
      />
      <h3>{{ props.info?.groupName }}</h3>
      <div class="flex justify-end flex-1">
        <ArrowRight class="w-4 h-4"></ArrowRight>
      </div>
    </div>
    <div class="p-2 pt-6">
      <div
        style="height: 20vh; width: 100%"
        class="chart-container relative"
        v-if="props.info?.groupName"
      >
        <ComponentChart ref="chartsRef"></ComponentChart>
      </div>
      <div v-else style="height: 20vh; width: 100%; margin-top: -10px">
        <el-empty :image-size="100"></el-empty>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="异常指标" width="80%">
      <div class="py-2 flex items-center">
        <div>
          <el-select v-model="dialogData.abnormal">
            <el-option label="全部异常情况" :value="''"></el-option>
            <el-option label="指标检查异常" value="指标检查异常"></el-option>
            <el-option label="影像检查异常" value="影像检查异常"></el-option>
            <el-option label="其他异常" value="其他异常"></el-option>
          </el-select>
          <el-button type="primary" class="ml-2" @click="dialogPageChange(1)"
            >查询</el-button
          >
        </div>
        <div class="flex-1 flex items-center justify-end">
          <el-input
            v-model="dialogData.keyword"
            class="w-fit"
            clearable
            placeholder="请输入姓名或档案号"
          ></el-input>
          <el-button type="primary" class="ml-2" @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="指标检查异常">
          <template #default="{ row }">
            <el-tag
              v-for="(item, index) in formatAbnormalIndicatorGroupList(
                row,
                '指标检查异常'
              )"
              :key="index"
              type="danger"
              >{{ item.indicatorName }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="影像检查异常">
          <template #default="{ row }">
            <el-tag
              v-for="(item, index) in formatAbnormalIndicatorGroupList(
                row,
                '影像检查异常'
              )"
              :key="index"
              type="danger"
              >{{ item.indicatorName }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="其他异常">
          <template #default="{ row }">
            <el-tag
              v-for="(item, index) in formatAbnormalIndicatorGroupList(
                row,
                '其他异常'
              )"
              :key="index"
              type="danger"
              >{{ item.indicatorName }}</el-tag
            >
          </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,
  defineProps,
  ref,
  onMounted,
  computed,
  defineAsyncComponent,
  provide,
  inject
} from "vue";
import ComponentChart from "@/components/Chart.vue";
import { ArrowRight } from "@element-plus/icons-vue";
import yinxiang from "./imgs/yinxiangjiancha.png";
import zhibiao from "./imgs/zhibiao.png";
import qita from "./imgs/qitayichang.png";
import { useLargeScreenStoreHook } from "@/store/modules/largeScreen";
const useLargeScreenHook = useLargeScreenStoreHook();
const largeScreenGlobalData = computed(() => {
  return useLargeScreenHook?.largeScreenGlobalData;
});
import { formatAge, parseJsonData, request } from "@/utils";
import { ElLoading } from "element-plus";
import { nextTick } from "vue";
const imgs = [
  {
    src: yinxiang
  },
  {
    src: zhibiao
  },
  {
    src: qita
  }
];
const props = defineProps({
  info: {
    type: Object,
    default: () => {}
  },
  index: {
    type: Number,
    default: 0
  }
});
const chartsRef = ref();

const initChart = () => {
  if (!props.info.groupName) return;
  let option = {
    legend: {
      data: ["男性", "女性"],
      top: "bottom"
    },
    grid: {
      left: "2%",
      right: "8%",
      bottom: "15%",
      top: "4%",
      containLabel: true
    },
    xAxis: {
      data: props.info.list.map(v => v.indicatorName)
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }

      // formatter: function (params) {
      //   return `${params[0].seriesName}${params[0].name} : ${params[0].value}`;
      // }
    },
    yAxis: {},
    series: [
      {
        name: "男性",
        type: "bar",
        color: "#6B79F7",
        data: props.info.list.map(v => v.maleTotal),
        barMaxWidth: 40
      },
      {
        name: "女性",
        type: "bar",
        color: "#C77377",
        // data: [220, 182, 191, 234, 290, 330, 310]
        data: props.info.list.map(v => v.femaleTotal),
        barMaxWidth: 40
      }
    ]
  };
  chartsRef.value.setOption(option);
};

const dialogVisible = ref(false);

const dialogData = reactive({
  page: 1,
  pageSize: 10,
  list: [],
  keyword: "",
  total: 0,
  abnormal: ""
});
const getDialogFilterList = () => {
  const raw = largeScreenGlobalData.value?.archivesList || [];
  let result = [...raw];
  if (!dialogData.abnormal && !dialogData.keyword) return raw;
  if (dialogData.keyword) {
    result = result.filter(
      v =>
        v.archives.name.includes(dialogData.keyword) ||
        v.archives.id == dialogData.keyword
    );
  }

  if (dialogData.abnormal) {
    result = result.filter(v =>
      v.abnormalIndicatorGroupList.find(v => v.groupName == dialogData.abnormal)
    );
  }
  console.log(result);
  return result;
};
const openDialog = () => {
  dialogData.total = getDialogFilterList().length;
  dialogData.abnormal = props.info?.groupName;
  dialogData.keyword = '';
  dialogPageChange(1);
  dialogVisible.value = true;
};
const formatAbnormalIndicatorGroupList = (row, groupName) => {
  const item = row.abnormalIndicatorGroupList.find(
    v => v.groupName == groupName
  );
  return item?.list || [];
};
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)
};


onMounted(() => {
  setTimeout(() => {
    initChart();
  }, 500);
});
</script>
<style lang="scss" scoped>
::v-deep {
  .el-card__body {
    padding-bottom: 0px !important;
  }
}
</style>
