<template>
  <div class="dimension-item">
    <h4 class="detection-title">人活得体面</h4>

    <!-- 第一行：统计数字 -->
    <div class="stats-row">
      <div class="stat-item">
        <div class="stat-value">
          <NumberAnimation
            :value="dignityStats.healthInspectionRate"
            :decimals="1"
            unit="%"
            :unit-style="{ fontSize: '30px' }"
          />
        </div>
        <div class="stat-label">卫生抽查达标率</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">
          <NumberAnimation
            :value="dignityStats.disinfectionTimes"
            unit="次"
            :unit-style="{ fontSize: '30px' }"
          />
        </div>
        <div class="stat-label">消毒次数</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">
          <NumberAnimation
            :value="dignityStats.avgDisinfectionInterval"
            unit="天"
            :unit-style="{ fontSize: '30px' }"
          />
        </div>
        <div class="stat-label">平均消毒间隔时间</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">
          <NumberAnimation
            :value="dignityStats.activityCount"
            unit="次"
            :unit-style="{ fontSize: '30px' }"
          />
        </div>
        <div class="stat-label">活动开展合计</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">
          <NumberAnimation
            :value="dignityStats.monthlyActivityCount"
            unit="次"
            :unit-style="{ fontSize: '30px' }"
          />
        </div>
        <div class="stat-label">月均开展活动次数</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">
          <NumberAnimation
            :value="dignityStats.physicalExamCoverage"
            unit="%"
            :unit-style="{ fontSize: '30px' }"
          />
        </div>
        <div class="stat-label">体检覆盖率</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">
          <NumberAnimation
            :value="dignityStats.avgExamInterval"
            unit="天"
            :unit-style="{ fontSize: '30px' }"
          />
        </div>
        <div class="stat-label">体检间隔时间</div>
      </div>
    </div>

    <!-- 第二行：图表和活动展示 -->
    <div class="charts-section">
      <div class="chart-item activity-type-chart">
        <div class="chart-title">常见组织活动类型</div>
        <div id="activityTypeChart" class="chart-container"></div>
      </div>
      <div class="chart-item disinfection-chart">
        <div class="chart-title">每月消毒次数</div>
        <div id="disinfectionChart" class="chart-container"></div>
      </div>
      <div class="chart-item disease-chart">
        <div class="chart-title">老年人常见病分析</div>
        <div id="diseaseChart" class="chart-container"></div>
      </div>
      <div class="chart-item activity-display">
        <div class="chart-title">活动展示</div>
        <div class="activity-images-grid">
          <div class="activity-image-item" v-for="i in 4" :key="i">
            <div class="activity-image-placeholder"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 第三行：活动参与情况和问题数据 -->
    <div class="menu-container">
      <!-- 活动参与情况表格 -->
      <div class="table-section">
        <div class="table-title">活动参与情况：</div>
        <DataTable
          :columns="activityParticipationTableColumns"
          :data="activityParticipationTableData"
          :border="true"
          :large-font="true"
        />
      </div>

      <!-- 机器人和问题数据部分 -->
      <div class="robot-section">
        <!-- 机器人 -->
        <div class="robot-items">
          <div class="robot-item">
            <el-image
              :src="robotCoordinatedDispatcher"
              :alt="'AI协同调度员'"
              class="robot-image"
            ></el-image>
            <div class="robot-name">AI协同调度员</div>
          </div>
          <div class="robot-item">
            <el-image
              :src="robotFamilyLiaison"
              :alt="'AI家属联络员'"
              class="robot-image"
            ></el-image>
            <div class="robot-name">AI家属联络员</div>
          </div>
        </div>

        <!-- 数据统计 -->
        <div class="data-stats">
          <div class="stat-item">
            <img src="../assets/icons/icon-checked.png" alt="已完成" class="stat-icon" />
            <span>
              已实时抓拍活动、消毒等{{
                dignityStatistics.activitiesMonitored
              }}余次，已核验年度体检{{
                dignityStatistics.physicalExamsCompleted
              }}人，查收家属相关投诉建议{{ dignityStatistics.familySuggestionsCollected }}条；
            </span>
          </div>
          <div class="stat-item">
            <img src="../assets/icons/icon-checkedRate.png" alt="识别问题" class="stat-icon" />
            <span>
              实时识别服务超时、活动次数不足、体检覆盖不达标、就医响应延迟等异常问题{{
                dignityStatistics.issuesIdentified
              }}起，覆盖在院老人{{ dignityStatistics.affectedSeniors }}人，家属{{
                dignityStatistics.familyMembers
              }}人；
            </span>
          </div>
          <div class="stat-item">
            <img src="../assets/icons/icon-checking.png" alt="待处置" class="stat-icon" />
            <span>
              待处置预警{{ dignityStatistics.pendingAlerts }}条，直接反馈{{
                dignityStatistics.directFeedback
              }}条，发布廉政令要求整改{{
                dignityStatistics.rectificationRequirements
              }}条，整改完成率{{ dignityStatistics.rectificationRate }}%。
            </span>
          </div>
        </div>
      </div>

      <!-- 问题数据表格 -->
      <div class="table-section" style="margin-top: 30px">
        <DataTable
          :columns="dignityProblemTableColumns"
          :data="dignityProblemTableData"
          :border="true"
          :large-font="true"
        >
          <template #riskLevel="{ row }">
            <div class="risk-icon" :class="row.riskLevel"></div>
          </template>

          <template #operation="{ row }">
            <i v-if="row.status === '未处置'" class="iconfont icon-command"></i>
            <el-link
              v-else-if="row.status === '整改中'"
              type="primary"
              underline="always"
              class="operation-link"
            >
              催促
            </el-link>
            <el-link v-else type="primary" underline="always" class="operation-link">
              查看详情
            </el-link>
          </template>
        </DataTable>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, nextTick } from 'vue'
import NumberAnimation from './NumberAnimation.vue'
import DataTable from './DataTable.vue'
import * as echarts from 'echarts'
import { institutionDetailData } from '../data/institutionDetail'

import robotCoordinatedDispatcher from '@/assets/images/robot_coordinatedDispatcher.png'
import robotFamilyLiaison from '@/assets/images/robot_familyLiaison.png'

interface Props {
  visible?: boolean
}

const props = defineProps<Props>()

const dignityStats = institutionDetailData.dignityStats
const dignityProblemTableColumns = institutionDetailData.dignityProblemTableColumns
const dignityProblemTableData = institutionDetailData.dignityProblemTableData
const activityParticipationTableData = institutionDetailData.activityParticipationTableData
const dignityStatistics = institutionDetailData.dignityStatistics
const activityParticipationTableColumns = institutionDetailData.activityParticipationTableColumns

const initCharts = () => {
  // 常见组织活动类型图表 - 横向柱状图
  const activityTypeDom = document.getElementById('activityTypeChart')
  if (!activityTypeDom) return
  const activityTypeChart = echarts.init(activityTypeDom)
  activityTypeChart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      formatter: '{b}: {c}次',
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#00FFE6',
        },
      },
      axisLabel: {
        color: '#4E9A96',
        fontSize: 22,
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(0, 255, 230, 0.1)',
        },
      },
    },
    yAxis: {
      type: 'category',
      data: institutionDetailData.activityTypeData.map((item) => item.name),
      axisLine: {
        lineStyle: {
          color: '#066462',
        },
      },
      axisLabel: {
        color: '#4E9A96',
        fontSize: 22,
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: '活动次数',
        type: 'bar',
        data: institutionDetailData.activityTypeData.map((item) => item.value),
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#00FFE6' },
            { offset: 1, color: '#1E90FF' },
          ]),
        },
        barWidth: '60%',
        label: {
          show: true,
          position: 'right',
          color: '#06BBAD',
          fontSize: 26,
        },
      },
    ],
  })

  // 每月消毒次数图表 - 柱状图
  const disinfectionDom = document.getElementById('disinfectionChart')
  if (!disinfectionDom) return
  const disinfectionChart = echarts.init(disinfectionDom)
  disinfectionChart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      formatter: '{b}: {c}次',
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: institutionDetailData.monthlyDisinfectionData.months,
      axisLine: {
        lineStyle: {
          color: '#066462',
        },
      },
      axisLabel: {
        color: '#4E9A96',
        fontSize: 22,
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#00FFE6',
        },
      },
      axisLabel: {
        color: '#4E9A96',
        fontSize: 22,
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(0, 255, 230, 0.1)',
        },
      },
    },
    series: [
      {
        name: '消毒次数',
        type: 'bar',
        data: institutionDetailData.monthlyDisinfectionData.values,
        itemStyle: {
          color: '#00FFE6',
          borderRadius: [20, 20, 0, 0],
        },
        barWidth: '60%',
        label: {
          show: true,
          position: 'top',
          color: '#06BBAD',
          fontSize: 26,
        },
      },
    ],
  })

  // 老年人常见病分析图表 - 饼图
  const diseaseDom = document.getElementById('diseaseChart')
  if (!diseaseDom) return
  const diseaseChart = echarts.init(diseaseDom)
  diseaseChart.setOption({
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {d}%',
    },
    series: [
      {
        name: '常见病',
        type: 'pie',
        radius: ['30%', '70%'],
        center: ['50%', '55%'],
        avoidLabelOverlap: false,
        padAngle: 3,
        itemStyle: {
          borderRadius: 10,
        },
        label: {
          show: true,
          position: 'outside',
          formatter: '{b} {d}%',
          fontSize: 20,
          distance: 20,
          color: '#06BBAD',
        },
        labelLine: {
          show: true,
          length: 15,
          length2: 15,
          lineStyle: {
            width: 2,
            color: '#00FFE6',
          },
        },
        data: institutionDetailData.commonDiseaseData,
        color: ['#00FFE6', '#1E90FF', '#FFD700', '#FF8C00', '#FF6347', '#9932CC', '#808080'],
      },
    ],
  })

  window.addEventListener('resize', () => {
    activityTypeChart.resize()
    disinfectionChart.resize()
    diseaseChart.resize()
  })
}

onMounted(() => {
  nextTick(() => {
    initCharts()
  })
})
</script>

<style lang="scss" scoped>
$neon-cyan: #00ffe6;

.dimension-item {
  padding: 0 20px;
  border: 1px solid $neon-cyan;
  border-left-color: #086f6a;
  border-right-color: #086f6a;

  .detection-title {
    width: calc(100% + 40px);
    margin-left: -20px;
    font-size: 32px;
    font-weight: 500;
    color: $neon-cyan;
    line-height: 72px;
    letter-spacing: 1px;
    text-align: center;
    background: linear-gradient(to right, rgba(0, 255, 230, 0.1) 0%, rgba(255, 255, 255, 0) 180%);
  }
}

.stats-row {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: 60px auto 100px;

  .stat-item {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    &:not(:last-child) {
      padding-right: 38px;
    }

    &:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      width: 2px;
      margin: 0 18px;
      background: url('@/assets/images/vertical_line.png') center no-repeat;
      background-size: 100% 100%;
    }

    .stat-value {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 48px;
      font-weight: 500;
      color: $neon-cyan;
      line-height: 56px;
      letter-spacing: 2px;
      margin-bottom: 8px;
    }

    .stat-label {
      font-size: 26px;
      color: rgba(1, 255, 230, 0.7);
      text-align: center;
      white-space: nowrap;
    }
  }
}

.charts-section {
  display: flex;
  gap: 30px;
  margin-bottom: 40px;

  .chart-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 20px;

    &.activity-type-chart {
      flex: 1.2;
    }

    &.activity-display {
      flex: 1.2;
    }

    .chart-title {
      font-size: 30px;
      color: $neon-cyan;
      margin-bottom: 20px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 1px;
    }

    .chart-container {
      width: 100%;
      height: 466px;
    }

    .activity-images-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px 39px;
      height: 448px;

      .activity-image-item {
        width: 375px;
        height: 200px;
        background: rgba(0, 255, 230, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

.menu-container {
  margin-top: 80px;
  margin-bottom: 30px;
  padding: 36px;

  .table-title {
    font-size: 36px;
    color: $neon-cyan;
    font-weight: 400;
    margin-bottom: 30px;
  }
}

.robot-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 100px;
  width: 80%;
  margin: 60px auto;

  .robot-items {
    display: flex;
    gap: 80px;
  }

  .robot-item {
    text-align: center;

    .robot-image {
      width: auto;
      height: 202px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 10px;

      span {
        color: #00ffe6;
        font-size: 20px;
      }
    }

    .robot-name {
      color: #00ffe6;
      font-size: 30px;
    }
  }

  .data-stats {
    flex: 1;
    padding: 36px 60px;
    background: rgba(255, 255, 255, 0.01);
    box-shadow:
      inset 0px -2px 0px 0px rgba(0, 255, 230, 0.5),
      inset 0px 2px 0px 0px rgba(0, 255, 230, 0.5),
      inset 20px 20px 80px 0px rgba(0, 255, 230, 0.08),
      inset -20px -20px 80px 0px rgba(0, 255, 230, 0.08);
    border-radius: 20px 20px 20px 20px;
    border: 2px solid rgba(0, 255, 230, 0.3);

    .stat-item {
      display: flex;
      align-items: center;
      margin-bottom: 30px;
      color: #00d6c0;
      font-size: 32px;

      &:last-child {
        margin-bottom: 0;
      }

      .stat-icon {
        width: 76px;
        margin-right: 30px;
      }
    }
  }
}

.table-section {
  font-size: 32px;
  color: $neon-cyan;

  .empty-text {
    color: rgba(0, 255, 230, 0.7);
    padding: 0 20px 30px;
    text-align: center;
  }

  .icon-command {
    font-size: 50px;
    color: #cf311d;
    cursor: pointer;
  }

  .operation-link {
    font-weight: 400;
    font-size: 32px;
    color: #0099ff;
    letter-spacing: 1px;
  }
}

.risk-icon {
  width: 38px;
  height: 34px;
  margin: 0 auto;
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center;
}

.risk-icon.high {
  background-image: url('@/assets/icons/icon-warning-red.png');
}

.risk-icon.medium {
  background-image: url('@/assets/icons/icon-warning-orange.png');
}

.risk-icon.low {
  background-image: url('@/assets/icons/icon-warning-orange.png');
}
</style>
