<template>
  <div class="dimension-item">
    <h4 class="detection-title">饭吃得满意</h4>

    <!-- 第一行：统计数字 -->
    <div class="stats-row">
      <div class="stat-item">
        <div class="stat-value">
          <NumberAnimation
            :value="foodStats.totalExpenditure"
            :thousands="true"
            unit="元"
            :unit-style="{ fontSize: '30px' }"
          />
        </div>
        <div class="stat-label">本年度餐饮总支出</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">
          <NumberAnimation
            :value="foodStats.dailyStandard"
            :decimals="1"
            unit="元/人"
            :unit-style="{ fontSize: '30px' }"
          />
        </div>
        <div class="stat-label">日均标准</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">
          <NumberAnimation
            :value="foodStats.foodCostRatio"
            :decimals="1"
            unit="%"
            :unit-style="{ fontSize: '30px' }"
          />
        </div>
        <div class="stat-label">餐费占比</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">
          <NumberAnimation
            :value="foodStats.recipeCompliance"
            :decimals="1"
            unit="%"
            :unit-style="{ fontSize: '30px' }"
          />
        </div>
        <div class="stat-label">食谱达标率</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">
          <NumberAnimation
            :value="foodStats.dailyFoodCompliance"
            :decimals="1"
            unit="%"
            :unit-style="{ fontSize: '30px' }"
          />
        </div>
        <div class="stat-label">每日菜品达标率</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">
          <NumberAnimation
            :value="foodStats.foodSafetyCompliance"
            :decimals="1"
            unit="%"
            :unit-style="{ fontSize: '30px' }"
          />
        </div>
        <div class="stat-label">食品安全达标率</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">
          <NumberAnimation
            :value="foodStats.kitchenTransparencyCompliance"
            :decimals="1"
            unit="%"
            :unit-style="{ fontSize: '30px' }"
          />
        </div>
        <div class="stat-label">明厨亮灶达标率</div>
      </div>
    </div>

    <!-- 第二行：图表和菜品展示 -->
    <div class="charts-section">
      <div class="chart-item food-cost-ratio-chart">
        <div class="chart-title">餐费占比情况</div>
        <div id="foodCostRatioChart" class="chart-container"></div>
      </div>
      <div class="chart-item nutrition-chart">
        <div class="chart-title">膳食营养分析</div>
        <div id="nutritionChart" class="chart-container"></div>
      </div>
      <div class="chart-item food-display">
        <div class="chart-title">菜品展示</div>
        <div class="food-images-grid">
          <div class="food-image-item" v-for="i in 6" :key="i">
            <div class="food-image-placeholder"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 第三行：每周菜谱和问题数据 -->
    <div class="menu-container">
      <!-- 每周菜谱标题和周选择器 -->
      <div class="menu-header">
        <div class="menu-title">每周菜谱</div>
        <div class="week-selector">
          <el-select v-model="selectedWeek" size="large" class="week-select">
            <el-option label="上周" value="last"></el-option>
            <el-option label="本周" value="current"></el-option>
            <el-option label="下周" value="next"></el-option>
          </el-select>
        </div>
      </div>

      <!-- 每周菜谱表格 -->
      <div class="table-section">
        <div class="menu-table">
          <table>
            <thead>
              <tr>
                <th>餐别</th>
                <th v-for="day in weekDays" :key="day">{{ day }}</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(meals, mealType) in weeklyMenu" :key="mealType">
                <td class="meal-type">{{ mealType }}</td>
                <td v-for="day in weekDays" :key="day">{{ (meals as any)[day] }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 机器人和问题数据部分 -->
      <div class="robot-section">
        <!-- 机器人 -->
        <div class="robot-items">
          <div class="robot-item">
            <el-image
              :src="robotDietaryNutritionist"
              :alt="'AI膳食营养员'"
              class="robot-image"
            ></el-image>
            <div class="robot-name">AI膳食营养员</div>
          </div>

          <div class="robot-item">
            <el-image :src="robotWarningSupervisor" :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>
              已审核菜谱{{ foodStatistics.checkedMeals }}份，已分析菜品{{
                foodStatistics.analyzedDishes
              }}道，实时监控食堂{{ foodStatistics.realTimeChecks }}家，检查食材批次{{
                foodStatistics.foodSafetyChecks
              }}次，核对餐费占比{{ foodStatistics.costRatioChecks }}次；
            </span>
          </div>
          <div class="stat-item">
            <img src="../assets/icons/icon-checkedRate.png" alt="审核通过率" class="stat-icon" />
            <span>
              识别菜品数量、种类、食物安全等异常{{
                foodStatistics.identifiedIssues
              }}起，覆盖在院老人{{ foodStatistics.affectedSeniors }}人，涉及到{{
                foodStatistics.involvedMeals
              }}次餐食；
            </span>
          </div>
          <div class="stat-item">
            <img src="../assets/icons/icon-checking.png" alt="待审核" class="stat-icon" />
            <span>
              待处置预警{{ foodStatistics.pendingAlerts }}条，（直接反馈{{
                foodStatistics.directFeedback
              }}条，发布廉政令{{ foodStatistics.rectificationOrders }}条），整改完成率{{
                foodStatistics.rectificationRate
              }}%。
            </span>
          </div>
        </div>
      </div>

      <!-- 问题数据表格 -->
      <div class="table-section" style="margin-top: 30px">
        <DataTable
          :columns="foodProblemTableColumns"
          :data="foodProblemTableData"
          :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 { ref, 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 robotDietaryNutritionist from '@/assets/images/robot_dietaryNutritionist.png'
import robotWarningSupervisor from '@/assets/images/robot_warningSupervisor.png'

interface Props {
  visible?: boolean
}

const props = defineProps<Props>()

const foodStats = institutionDetailData.foodStats
const foodProblemTableColumns = institutionDetailData.foodProblemTableColumns
const foodProblemTableData = institutionDetailData.foodProblemTableData
const weeklyMenu = institutionDetailData.weeklyMenu
const foodStatistics = institutionDetailData.foodStatistics

const weekDays = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']

const selectedWeek = ref('current')

const initCharts = () => {
  // 餐费占比图表
  const foodCostRatioDom = document.getElementById('foodCostRatioChart')
  if (!foodCostRatioDom) return
  const foodCostRatioChart = echarts.init(foodCostRatioDom)
  foodCostRatioChart.setOption({
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}%',
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: institutionDetailData.foodCostRatioData.map((item) => item.month),
      axisLine: {
        lineStyle: {
          color: '#066462',
        },
      },
      axisLabel: {
        color: '#4E9A96',
        fontSize: 22,
        margin: 16,
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#00FFE6',
        },
      },
      axisLabel: {
        color: '#4E9A96',
        fontSize: 22,
        margin: 16,
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(0, 255, 230, 0.1)',
        },
      },
    },
    series: [
      {
        name: '100%',
        type: 'bar',
        data: Array(institutionDetailData.foodCostRatioData.length).fill(100),
        itemStyle: {
          color: 'rgba(0, 255, 230, 0.1)',
        },
        barWidth: '60%',
        barGap: '-100%',
        z: 0,
      },
      {
        name: '餐费占比',
        type: 'bar',
        data: institutionDetailData.foodCostRatioData.map((item) => item.ratio),
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#00FFE6' },
            { offset: 1, color: '#1E90FF' },
          ]),
        },
        barWidth: '60%',
        barGap: '-100%',
        z: 1,
      },
    ],
  })

  // 膳食营养分析图表
  const nutritionDom = document.getElementById('nutritionChart')
  if (!nutritionDom) return
  const nutritionChart = echarts.init(nutritionDom)
  nutritionChart.setOption({
    tooltip: {
      trigger: 'item',
    },
    radar: {
      indicator: institutionDetailData.nutritionData.map((item) => ({
        name: item.name,
        max: 100,
      })),
      center: ['50%', '55%'],
      radius: '90%',
      shape: 'polygon',
      splitNumber: 5,
      axisName: {
        color: '#06BBAD',
        fontSize: 22,
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(0, 255, 230, 0.2)',
        },
      },
      splitArea: {
        show: true,
        areaStyle: {
          color: ['rgba(0, 255, 230, 0.05)', 'rgba(0, 255, 230, 0.1)'],
        },
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(0, 255, 230, 0.3)',
        },
      },
    },
    series: [
      {
        name: '营养分析',
        type: 'radar',
        data: [
          {
            value: institutionDetailData.nutritionData.map((item) => item.value),
            name: '营养达标率',
            areaStyle: {
              color: 'rgba(0, 255, 230, 0.3)',
            },
            lineStyle: {
              color: '#00FFE6',
              width: 3,
            },
            itemStyle: {
              color: '#00FFE6',
            },
          },
        ],
      },
    ],
  })

  window.addEventListener('resize', () => {
    foodCostRatioChart.resize()
    nutritionChart.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: 80%;
  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: center;
    padding: 20px;

    &.food-cost-ratio-chart {
      flex: 1.5;
    }

    &.food-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;
    }

    .food-images-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      height: 466px;

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

.menu-container {
  margin-top: 80px;
  margin-bottom: 30px;
  // border: 1px solid #056e6c;
  // background: radial-gradient(ellipse at center, transparent 60%, rgba(9, 51, 56, 0.8) 100%);
  // box-shadow: inset 0 0 60px 6px rgba(255, 255, 255, 0.1);
  padding: 36px;

  .menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;

    .menu-title {
      font-size: 36px;
      color: $neon-cyan;
      font-weight: 400;
    }

    .week-selector {
      .week-select {
        width: 240px;
        font-size: 32px;
        color: $neon-cyan;

        :deep(.el-select__selection) {
          height: 100%;
        }

        :deep(.el-select__input) {
          color: $neon-cyan;
          font-size: 30px;
        }

        :deep(.el-select__caret) {
          color: $neon-cyan;
          font-size: 24px;
        }

        :deep(.el-select__wrapper) {
          background: rgba(0, 32, 48, 0.5);
          border: 1px solid rgba(0, 255, 230, 0.3);
          border-radius: 4px;
          height: 72px;
          font-size: 30px;

          &:hover {
            border-color: rgba(0, 255, 230, 0.5);
          }

          &.is-focus {
            border-color: rgba(0, 255, 230, 0.8);
            box-shadow: 0 0 0 2px rgba(0, 255, 230, 0.2);
          }

          .el-select__selected-item {
            color: $neon-cyan;
            height: 100%;
            line-height: 54px;
          }
        }
      }
    }
  }
}

.tabs-container {
  margin-top: 80px;
  margin-bottom: 30px;
  border: 1px solid #056e6c;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(9, 51, 56, 0.8) 100%);
  box-shadow: inset 0 0 60px 6px rgba(255, 255, 255, 0.1);

  .tabs-header {
    display: flex;
    height: 92px;
    border-bottom: 1px solid rgba(0, 255, 230, 0.2);

    .tab-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
      color: rgba(0, 255, 230, 0.7);
      cursor: pointer;
      position: relative;
      transition: color 0.3s ease;
      background: radial-gradient(
        50% 50% at 50% 50%,
        rgba(255, 255, 255, 0) 0%,
        rgba(0, 255, 230, 0.1) 100%
      );

      &:hover {
        color: #00ffe6;
        background: radial-gradient(
          50% 50% at 50% 50%,
          rgba(255, 255, 255, 0) 0%,
          rgba(0, 255, 230, 0.2) 100%
        );
      }

      &.active {
        color: #00ffe6;

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 4px;
          background: linear-gradient(
            90deg,
            rgba(78, 251, 234, 0),
            rgba(78, 251, 234, 1),
            rgba(78, 251, 234, 0.04)
          );
        }
      }
    }
  }

  .tabs-content {
    padding-top: 36px;

    .tab-panel {
      display: none;

      &.active {
        display: block;
      }
    }
  }
}

.menu-table {
  width: 100%;
  overflow-x: auto;

  table {
    width: 100%;
    border-collapse: collapse;

    th,
    td {
      padding: 20px;
      text-align: center;
      border: 1px solid rgba(0, 255, 230, 0.3);
      color: $neon-cyan;
      font-size: 28px;
    }

    th {
      background: rgba(0, 255, 230, 0.1);
      font-weight: 600;
    }

    .meal-type {
      background: rgba(0, 255, 230, 0.05);
      font-weight: 600;
      white-space: nowrap;
    }

    /* 确保weekDays的每一列宽度相同 */
    th:not(:first-child),
    td:not(:first-child) {
      width: calc(100% / 7);
    }

    td:not(:first-child) {
      text-align: left;
      line-height: 1.5;
    }
  }
}

.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>
