<template>
  <div class="home-container">
    <!-- 顶部标题栏 -->
    <Header />

    <!-- 主要内容区域 -->
    <main class="main-content">
      <!-- 中间主要内容 -->
      <div class="center-content">
        <!-- 第一行：五个主要模块 -->
        <div class="module-row first-row">
          <ModuleCard title="钱花得明白" class="left-side-panel">
            <!-- 发放补贴 -->
            <SubsidyDisplay :amount="subsidyData.amount" />

            <!-- 统计图表 -->
            <ProgressChart :data="subsidyData.progressData" />

            <!-- 横线 -->
            <div class="divider"></div>

            <!-- 存在问题数量 -->
            <div class="problem-container">
              <span class="problem-label">存在问题数量：</span>
              <span class="problem-value">{{ subsidyData.problemCount }}</span>
              <span class="problem-unit">个</span>
            </div>

            <!-- 表格 -->
            <DataTable
              :columns="subsidyData.tableColumns"
              :data="subsidyData.tableData"
              :auto-scroll="true"
              :show-header="true"
              :border="true"
              height="314px"
              width="100%"
            />
          </ModuleCard>

          <ModuleCard title="饭吃得满意">
            <!-- 顶部百分比数字 -->
            <PercentageDisplay :data="foodData.percentageData" />

            <!-- 表格 -->
            <DataTable
              :columns="foodData.tableColumns"
              :data="foodData.tableData"
              :auto-scroll="true"
              :show-header="false"
              :border="false"
              :scroll-threshold="7"
              height="370px"
              width="100%"
              style="padding: 0 28px; margin-top: 36px"
            />

            <!-- 底部横向进度条 -->
            <HorizontalProgressChart
              :data="foodData.progressData"
              style="padding: 0 28px; margin-top: 36px"
            />
          </ModuleCard>

          <ModuleCard title="居住得安全">
            <!-- 顶部百分比数字 -->
            <PercentageDisplay :data="housingData.percentageData" />

            <!-- 表格 -->
            <DataTable
              :columns="housingData.tableColumns"
              :data="housingData.tableData"
              :auto-scroll="true"
              :show-header="false"
              :border="false"
              :scroll-threshold="7"
              height="560px"
              width="100%"
              style="padding: 0 28px; margin-top: 36px"
            />
          </ModuleCard>

          <ModuleCard title="衣穿得舒适">
            <!-- 顶部数字 -->
            <PercentageDisplay :data="clothingData.percentageData" />

            <!-- 表格 -->
            <DataTable
              :columns="clothingData.tableColumns"
              :data="clothingData.tableData"
              :auto-scroll="true"
              :show-header="true"
              :border="true"
              height="330px"
              width="100%"
              style="padding: 0 28px; margin-top: 36px"
            />

            <!-- 图片轮播 -->
            <div style="height: 190px; margin-top: 40px; padding: 0 28px">
              <ImageCarousel :images="clothingData.images" />
            </div>
          </ModuleCard>

          <ModuleCard title="人活得体面" class="right-side-panel">
            <!-- 顶部统计数字 -->
            <PercentageDisplay :data="dignityData.percentageData" style="padding-right: 20px" />

            <!-- 表格 -->
            <DataTable
              :columns="dignityData.tableColumns"
              :data="dignityData.tableData"
              :auto-scroll="true"
              :show-header="false"
              :border="false"
              :scroll-threshold="6"
              height="328px"
              width="100%"
              style="padding: 0 16px; margin-top: 36px"
            />

            <!-- 图片轮播 -->
            <div style="height: 190px; margin-top: 40px; padding: 0 28px">
              <ImageCarousel
                :images="dignityData.images"
                :slides-per-view="6"
                :rows="2"
                :item-width="206"
                :item-height="88"
                :space-between="16"
              />
            </div>
          </ModuleCard>
        </div>

        <!-- 第二行：区域养老情况和养老机构五项服务状况 -->
        <div class="module-row second-row">
          <RegionElderly />

          <ElderlyInstitutionService />
        </div>
      </div>
    </main>

    <!-- 底部 -->
    <Footer />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue'
import * as echarts from 'echarts'
import { Bell, Warning, InfoFilled, Picture } from '@element-plus/icons-vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay } from 'swiper/modules'
import 'swiper/css'
import Header from '../components/Header.vue'
import Footer from '../components/Footer.vue'
import ModuleCard from '../components/ModuleCard.vue'
import ProgressChart from '../components/ProgressChart.vue'
import SubsidyDisplay from '../components/SubsidyDisplay.vue'
import DataTable from '../components/DataTable.vue'
import PercentageDisplay from '../components/PercentageDisplay.vue'
import HorizontalProgressChart from '../components/HorizontalProgressChart.vue'
import ImageCarousel from '../components/ImageCarousel.vue'
import RegionElderly from '../components/RegionElderly.vue'
import ElderlyInstitutionService from '../components/ElderlyInstitutionService.vue'
import { subsidyData } from '../data/subsidy'
import { foodData } from '../data/food'
import { housingData } from '../data/housing'
import { clothingData } from '../data/clothing'
import { dignityData } from '../data/dignity'

// 滚动相关
const scrollIntervals = ref<{ [key: string]: number }>({})

// 生命周期
onMounted(() => {
  onUnmounted(() => {
    // cleanupCharts()
    Object.values(scrollIntervals.value).forEach((interval) => clearInterval(interval))
  })
})
</script>

<style lang="scss" scoped>
$text-color: rgba(0, 255, 230, 0.7);

.home-container {
  width: 3840px;
  height: 2160px;
  background-color: rgba(0, 39, 41, 0.6);
  color: $text-color;
  font-family: PingFang SC;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  // background-image: url('../assets/images/home_bg.png');
  background-size: 100% 100%;
  background-position: center;
}

/* 存在问题数量 */
.problem-container {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 0 28px;

  .problem-label {
    font-size: 28px;
    color: $text-color;
  }

  .problem-value {
    font-size: 28px;
    font-weight: bold;
    color: #ff1607;
  }

  .problem-unit {
    font-size: 28px;
    color: $text-color;
  }
}

/* 横线 */
.divider {
  width: 100%;
  height: 1px;
  background-color: #00c3b0;
  margin: 16px 0 14px;
}

/* 主要内容区域 */
.main-content {
  flex: 1;
  display: flex;
  padding: 0 52px;
  gap: 20px;
  overflow: hidden;
}

/* 中间主要内容 */
.center-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
}

.module-row {
  display: flex;
  overflow: hidden;

  &.first-row {
    padding: 60px 0;
    justify-content: space-between;
  }

  .left-side-panel {
    transform: perspective(1000px) rotateY(10deg) translate3d(0, 0, 55px);

    :deep(.module-content) {
      padding-left: 20px;
    }
  }

  .right-side-panel {
    transform: perspective(1000px) rotateY(-10deg) translate3d(0, 0, 55px);

    :deep(.module-content) {
      padding-right: 20px;
    }
  }

  &.second-row {
    margin-top: 30px;
    justify-content: space-between;
  }
}

.module {
  flex: 1;
  background-color: rgba(0, 40, 30, 0.8);
  border: 1px solid #00ff88;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
  display: flex;
  flex-direction: column;
}

.module.large-module {
  flex: 1;
  min-height: 300px;
}

.module h3 {
  font-size: 16px;
  margin: 0 0 15px 0;
  text-align: center;
  border-bottom: 1px solid #00ff88;
  padding-bottom: 10px;
}

.module-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.percentage-display {
  margin-top: 40px;
}

/* 统计行 */
.stats-row {
  display: flex;
  justify-content: space-around;
  gap: 10px;
}

.stat-item {
  text-align: center;
  flex: 1;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #00aaff;
}

.stat-label {
  font-size: 12px;
  margin-top: 5px;
}

/* 图表容器 */
.chart-container {
  flex: 1;
  display: flex;
  gap: 10px;
  min-height: 100px;
}

.chart {
  flex: 1;
  min-height: 100px;
  border-radius: 4px;
}

/* 列表容器 */
.list-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.list-item {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(0, 255, 136, 0.2);
}

/* 图片滚动容器 */
.image-scroll-container {
  height: 100px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(0, 255, 136, 0.3);
  border-radius: 4px;
}

.image-scroll {
  display: flex;
  gap: 10px;
  padding: 10px;
  width: max-content;
  animation: scroll 30s linear infinite;
}

.image-scroll:hover {
  animation-play-state: paused;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.scroll-item {
  width: 80px;
  height: 80px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.scroll-item:hover {
  transform: scale(1.1);
}

.image-placeholder {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 255, 136, 0.1);
  border: 1px solid rgba(0, 255, 136, 0.3);
  border-radius: 4px;
}

/* 统计网格 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 15px;
}

.stat-grid-item {
  text-align: center;
  padding: 10px;
  border: 1px solid rgba(0, 255, 136, 0.3);
  border-radius: 4px;
}

.stat-grid-item .stat-label {
  font-size: 18px;
  font-weight: bold;
  color: #00aaff;
  margin: 0;
}

.stat-grid-item .stat-desc {
  font-size: 12px;
  margin-top: 5px;
}

/* 底部统计 */
.bottom-stats {
  display: flex;
  justify-content: space-around;
  gap: 10px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid rgba(0, 255, 136, 0.3);
}

.bottom-stat-item {
  text-align: center;
  flex: 1;
}

.bottom-stat-item .stat-label {
  font-size: 12px;
  margin-bottom: 5px;
}

.bottom-stat-item .stat-value {
  font-size: 16px;
  font-weight: bold;
  color: #00aaff;
}

/* 服务图标 */
.service-icons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 10px;
}

.service-icon {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-placeholder {
  width: 40px;
  height: 40px;
  background-color: rgba(0, 255, 136, 0.1);
  border: 1px solid rgba(0, 255, 136, 0.3);
  border-radius: 4px;
}

/* 图片放大弹窗 */
.dialog-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.dialog-image {
  max-width: 100%;
  max-height: 600px;
  border-radius: 8px;
}

/* 人活得体面模块样式 */
.dignity-stats {
  display: flex;
  justify-content: space-around;
  padding: 0 28px;
  margin-top: 40px;
  gap: 20px;
}

.dignity-stat-item {
  flex: 1;
  text-align: center;
  padding: 0 10px;
}

.dignity-stat-value {
  font-size: 36px;
  font-weight: bold;
  color: #00aaff;
  line-height: 56px;
}

.dignity-stat-unit {
  font-size: 36px;
  color: #00aaff;
  line-height: 56px;
  margin-left: 5px;
}

.dignity-stat-label {
  font-size: 20px;
  color: #06baad;
  margin-top: 10px;
  line-height: 30px;
}

.problem-list {
  .problem-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 255, 230, 0.2);

    .problem-institution {
      flex: 1;
      font-size: 20px;
      color: #02bcad;
    }

    .problem-content {
      flex: 2;
      font-size: 20px;
      color: #02bcad;
      margin: 0 20px;
    }

    .problem-level {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;

      &.high {
        color: #ff1607;
      }

      &.medium {
        color: #ff8800;
      }

      &.low {
        color: #00ff88;
      }
    }

    .problem-date {
      font-size: 20px;
      color: #02bcad;
      margin-left: 20px;
    }
  }
}

.dignity-swiper {
  width: 100%;
  height: 100px;

  :deep(.swiper-slide) {
    width: 80px !important;
    height: 80px;
    cursor: pointer;
  }

  .dignity-image {
    width: 100%;
    height: 100%;
  }

  .image-placeholder {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(0, 255, 230, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;

    .el-icon {
      font-size: 32px;
      color: rgba(0, 255, 230, 0.5);
    }
  }
}

/* 图片轮播样式 */
.image-carousel {
  .carousel-image {
    width: 150px;
    height: 190px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

    .image-placeholder {
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(0, 255, 230, 0.3);
    }
  }
}
</style>
