<template>
  <ContentWrap>
    <el-row>
      <el-form-item label="统计时间">
        <el-radio-group v-model="radioType" @change="changeRadio">
          <el-radio v-for="item in radioSelector" :value="item.value" :key="item.value">{{
            item.label
          }}</el-radio>
        </el-radio-group>
        <el-date-picker
          style="margin-left: 10px"
          value-format="YYYY-MM-DD"
          v-model="time"
          type="daterange"
          range-separator="To"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :default-time="[new Date().getDate() - 7, new Date()]"
          :shortcuts="shortcuts"
          size="big"
          @change="changeDatePick"
        />
        <el-button type="primary" @click="getList" style="margin-left: 20px">
          <Icon icon="ep:search" class="mr-5px" /> 查询
        </el-button>
        <el-button type="primary" @click="printData" style="margin-left: 20px">
          <Icon icon="ep:printer" class="mr-5px" /> 打印
        </el-button>
        <el-button
          type="primary"
          @click="exportExcel"
          style="margin-left: 20px"
          :loading="exportLoading"
        >
          <Icon icon="ep:download" class="mr-5px" /> 导出excel
        </el-button>
      </el-form-item>
    </el-row>
  </ContentWrap>
  <ContentWrap>
    <el-table
      :data="data1"
      show-summary
      max-height="650"
      default-expand-all
      row-key="orgname"
      :tree-props="{ children: 'children' }"
      :default-sort="{ prop: 'sum', order: 'descending' }"
    >
      <el-table-column label="卫生院" align="left" prop="orgname" min-width="180" />
      <el-table-column label="行政村" align="center" prop="districtname" min-width="160" />
      <el-table-column label="体检数" align="center">
        <el-table-column label="老年人" align="center" prop="oldmanflag" min-width="80" />
        <el-table-column label="高血压" align="center" prop="htnflag" min-width="80" />
        <el-table-column label="糖尿病" align="center" prop="diaflag" min-width="80" />
        <el-table-column label="精神病" align="center" prop="smiflag" min-width="80" />
        <el-table-column label="肺结核" align="center" prop="pulflag" min-width="80" />
        <el-table-column label="总数" align="center" prop="sum" min-width="80" />
      </el-table-column>
    </el-table>
  </ContentWrap>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { PatientApi } from '@/api/inspect/inspectpatient'
import { formatDate } from '@/utils/formatTime'
import workload from './workload'
import { hiprint } from 'vue-plugin-hiprint'
import { newHiprintPrintTemplate, preparePrintData } from './printHelper'
import download from '@/utils/download'
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(true) // 列表的加载中
const time = ref() // 日期
const data = ref([
  {
    orgname: '北京',
    districtname: 'A村',
    oldmanflag: 1,
    htnflag: 2,
    diaflag: 1,
    smiflag: 1,
    pulflag: 1,
    sum: 6
  },
  {
    orgname: '北京',
    districtname: 'B村',
    oldmanflag: 2,
    htnflag: 1,
    diaflag: 1,
    smiflag: 1,
    pulflag: 1,
    sum: 6
  },
  {
    orgname: '天津',
    districtname: 'C村',
    oldmanflag: 1,
    htnflag: 4,
    diaflag: 1,
    smiflag: 1,
    pulflag: 1,
    sum: 8
  },
  {
    orgname: '天津',
    districtname: 'D村',
    oldmanflag: 3,
    htnflag: 1,
    diaflag: 1,
    smiflag: 1,
    pulflag: 1,
    sum: 7
  },
  {
    orgname: '安徽',
    districtname: 'E村',
    oldmanflag: 4,
    htnflag: 3,
    diaflag: 1,
    smiflag: 1,
    pulflag: 1,
    sum: 10
  },
  {
    orgname: '安徽',
    districtname: 'F村',
    oldmanflag: 4,
    htnflag: 3,
    diaflag: 1,
    smiflag: 1,
    pulflag: 1,
    sum: 10
  },
  {
    orgname: '安徽',
    districtname: 'G村',
    oldmanflag: 4,
    htnflag: 3,
    diaflag: 1,
    smiflag: 1,
    pulflag: 1,
    sum: 10
  }
]) // 表格数据
/*const data1=ref([
    {
      orgname:'北京',oldmanflag:3,htnflag :5 ,diaflag:2, smiflag:5 ,pulflag:6 ,sum : 21,
      list:[
        {  districtname:'A村',oldmanflag:1 ,htnflag :2 ,diaflag:1, smiflag:1 ,pulflag:1 ,sum : 6},
        {  districtname:'B村',oldmanflag:2 ,htnflag :3 ,diaflag:1, smiflag:4 ,pulflag:5 ,sum : 15}
      ],
    },
    {
      orgname:'天津',oldmanflag:3,htnflag :5 ,diaflag:2, smiflag:5 ,pulflag:6 ,sum : 21,
      list:[
        {  districtname:'C村',oldmanflag:1 ,htnflag :2 ,diaflag:1, smiflag:1 ,pulflag:1 ,sum : 6},
        {  districtname:'D村',oldmanflag:2 ,htnflag :3 ,diaflag:1, smiflag:4 ,pulflag:5 ,sum : 15}
      ],
    },
])*/
const data1 = ref([])
const radioSelector = ref([
  { value: 2, label: '今天' },
  { value: 3, label: '最近一周' },
  { value: 4, label: '最近一个月' }
])
const radioType = ref(3) //
const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setDate(start.getDate() - 7)
      return [start, end]
    }
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setMonth(start.getMonth() - 1)
      return [start, end]
    }
  },
  {
    text: '今日',
    value: () => {
      const end = new Date()
      const start = new Date()
      return [start, end]
    }
  }
]
/**
 * 改变单选框
 * @param e
 */
const changeRadio = (e) => {
  let end = new Date()
  let start = new Date()
  let date = null
  switch (e) {
    case 2:
      start = new Date()
      end = new Date()
      break
    case 3:
      start.setDate(start.getDate() - 7)
      break
    case 4:
      start.setMonth(start.getMonth() - 1)
      break
    default:
      start.setDate(start.getDate() - 7)
  }
  time.value = [formatDate(start, 'YYYY-MM-DD'), formatDate(end, 'YYYY-MM-DD')]
  // 清空现有数据
  data1.value = []
  // 重新获取数据
  getList()
}
const changeDatePick = () => {
  radioType.value = null
  // getList()
}
/**
 * 获取统计数据
 */
const getList = async () => {
  // 清空现有数据
  data1.value = []

  const params = {
    dates: [dayjs(time.value[0]).format('YYYY-MM-DD'), dayjs(time.value[1]).format('YYYY-MM-DD')]
  }
  try {
    let resp = await PatientApi.getData(params)
    const rawData = toRaw(resp)
    data1.value = dataProcessing(rawData)
    console.log(data1.value)
  } catch (error) {
    console.error('获取数据失败:', error)
  }
}
/**
 * 统计数据处理
 * @param data 需要处理的统计数据
 */
const dataProcessing = (data) => {
  const result = data.reduce((acc, current) => {
    const key = current.orgname
    // 初始化分组（若不存在）
    if (!acc[key]) {
      acc[key] = {
        orgname: key,
        oldmanflag: 0,
        htnflag: 0,
        diaflag: 0,
        smiflag: 0,
        pulflag: 0,
        sum: 0,
        children: []
      }
    }
    // 累加各字段值
    acc[key].oldmanflag += current.oldmanflag
    acc[key].htnflag += current.htnflag
    acc[key].diaflag += current.diaflag
    acc[key].smiflag += current.smiflag
    acc[key].pulflag += current.pulflag
    acc[key].sum += current.sum
    // 将当前对象添加到 children 中，移除 orgname
    const child = { ...current }
    delete child.orgname
    acc[key].children.push(child)
    acc[key].children.sort((a, b) => b.sum - a.sum)
    return acc
  }, {})
  let value = Object.values(result)
  value.sort((a, b) => b.sum - a.sum)

  return value
}
const exportLoading = ref(false) // 导出的加载中
const exportExcel = async () => {
  // 导出的二次确认
  await message.exportConfirm()
  // 发起导出
  try {
    exportLoading.value = true
    const data = await PatientApi.exportData({ dates: time.value })
    download.excel(data, '统计.xls')
  } catch (e) {
  } finally {
    exportLoading.value = false
  }
}
/**
 * 打印数据
 */
const printData = () => {
  try {
    // 创建打印模板
    const hiprintTemplate = newHiprintPrintTemplate('workload', {
      template: workload,
      settingContainer: '#workloadPrintElementOptionSetting'
    })
    // 准备打印数据
    const printData = preparePrintData(data1.value, time.value)
    // 打印参数配置
    const options = {
      leftOffset: 0,
      topOffset: 0,
      paperType: 'A4',
      enableColumnsMerge: true,
      enableRowsMerge: true,
      firstPageTitle: true,
      onlyFirstTitle: true,
      notAllowRepeat: ['title'],
      firstPanelPageOnly: true,
      pageMode: 'single',
      displayMode: {
        title: 'firstPage'
      },
      printPanelIndex: 0,
      noRepeatPrint: false,
      disableHeaderRepeat: false
    }

    // 样式设置
    const ext = {
      callback: () => {
        console.log('打印窗口已打开')
        // 添加表头样式
        setTimeout(() => {
          const table = document.querySelector('.hiprint-printPanel table')
          if (table) {
            const ths = table.querySelectorAll('th')
            ths.forEach((th, index) => {})
          }
        }, 100)
      },
      styleHandler: () => {
        return `<style>
          @page {
            size: A4;
            margin: 0;
          }
          @media print {
            body {
              margin: 0;
              padding: 0;
            }
            .hiprint-printPanel table th:nth-child(1) b,
            .hiprint-printPanel table th:nth-child(2) b {
              font-weight: bold !important;
              font-size: 10px !important;
            }
            .hiprint-printPanel table td {
              font-size: 10px;
            }
            td[colspan="0"],
            td[rowspan="0"] {
              display: none;
            }

            /* 强制隐藏除第一页外的标题 */
            .hiprint-printPanel:not(:first-of-type) [data-options*='"title":"体检工作量统计表"'] {
              display: none !important;
              visibility: hidden !important;
              height: 0 !important;
              overflow: hidden !important;
              position: absolute !important;
              z-index: -1 !important;
            }

            /* 隐藏除第一页外的表头 */
            .hiprint-printPanel:not(:first-of-type) .hiprint-table-header-row {
              display: none !important;
            }
          }
        </style>`
      }
    }

    // 调用打印
    hiprintTemplate.print(printData, options, ext)

    console.log('打印成功')
  } catch (error) {
    console.error('打印失败:', error)
  }
}
onMounted(() => {
  changeRadio(3)
  // getList()
})
</script>

<style scoped></style>
