<template>
  <ModuleCard title="区域老人情况" size="large">
    <div class="region-elderly-content">
      <!-- 三列布局 -->
      <div class="content-grid">
        <!-- 第一列 -->
        <div class="column column-1">
          <!-- 第一行：三个统计数据 -->
          <div class="row row-1">
            <div class="stat-item">
              <div class="stat-value">
                <NumberAnimation :value="institutionStats.total" unit="家" />
              </div>
              <div class="stat-label">机构总数</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">
                <NumberAnimation :value="institutionStats.public" unit="家" />
              </div>
              <div class="stat-label">公办养老机构</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">
                <NumberAnimation :value="institutionStats.private" unit="家" />
              </div>
              <div class="stat-label">社会办养老机构</div>
            </div>
          </div>

          <!-- 第二行：两个重叠的梯形 -->
          <div class="row row-2">
            <div class="trapezoid-container">
              <!-- 大梯形 -->
              <div class="trapezoid large-trapezoid"></div>
              <!-- 小梯形 -->
              <div class="trapezoid small-trapezoid"></div>

              <div class="trapezoid-item">
                <div class="trapezoid-label">床位总数:</div>
                <div class="trapezoid-value"><NumberAnimation :value="bedStats.total" /></div>
                <div class="trapezoid-unit">个</div>
              </div>

              <div class="trapezoid-item">
                <div class="trapezoid-label">入住老人:</div>
                <div class="trapezoid-value"><NumberAnimation :value="bedStats.occupied" /></div>
                <div class="trapezoid-unit">人</div>
              </div>

              <div class="trapezoid-item">
                <div class="trapezoid-label">入住率:</div>
                <div class="trapezoid-value">
                  <NumberAnimation :value="bedStats.occupancyRate" :decimals="1" />
                </div>
                <div class="trapezoid-unit">%</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 第二列 -->
        <div class="column column-2">
          <!-- 第一行：三个统计数据 -->
          <div class="row row-1">
            <div class="stat-item">
              <div class="stat-value">
                <NumberAnimation
                  :value="populationStats.registered"
                  :decimals="1"
                  unit="万人"
                  :unitStyle="{ color: '#01FFE6', fontSize: '30px' }"
                />
              </div>
              <div class="stat-label">户籍人口</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">
                <NumberAnimation
                  :value="populationStats.elderly60Plus"
                  :decimals="1"
                  unit="万人"
                  :unitStyle="{ color: '#01FFE6', fontSize: '30px' }"
                />
              </div>
              <div class="stat-label">60+老人</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">
                <NumberAnimation
                  :value="populationStats.agingRate"
                  :decimals="1"
                  unit="%"
                  :unitStyle="{ color: '#01FFE6', fontSize: '30px' }"
                />
              </div>
              <div class="stat-label">老龄化率</div>
            </div>
          </div>

          <!-- 第二行：三个进度条 -->
          <div class="row row-2">
            <ElderlyHorizontalProgress :data="careData" />
          </div>
        </div>

        <!-- 第三列 -->
        <div class="column column-3">
          <div class="subsidy-data">
            <div class="subsidy-item">
              <div class="subsidy-icon subsidy-fund"></div>
              <div class="subsidy-content">
                <div class="subsidy-label">补贴资金</div>
                <div class="subsidy-value">
                  <NumberAnimation
                    :value="subsidyStats.amount"
                    :thousands="true"
                    unit="元"
                    :unitStyle="{ color: '#aed1ce', fontSize: '30px', fontWeight: '400' }"
                  />
                </div>
              </div>
            </div>
            <div class="subsidy-item">
              <div class="subsidy-icon subsidy-people"></div>
              <div class="subsidy-content">
                <div class="subsidy-label">补贴人数</div>
                <div class="subsidy-value">
                  <NumberAnimation
                    :value="subsidyStats.people"
                    :thousands="true"
                    unit="人"
                    :unitStyle="{ color: '#aed1ce', fontSize: '30px', fontWeight: '400' }"
                  />
                </div>
              </div>
            </div>
            <div class="subsidy-item">
              <div class="subsidy-icon subsidy-rate"></div>
              <div class="subsidy-content">
                <div class="subsidy-label">补贴到位率</div>
                <div class="subsidy-value">
                  <NumberAnimation
                    :value="subsidyStats.completionRate"
                    :decimals="1"
                    unit="%"
                    :unitStyle="{ color: '#aed1ce', fontSize: '30px', fontWeight: '400' }"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </ModuleCard>
</template>

<script setup lang="ts">
import ModuleCard from './ModuleCard.vue'
import ElderlyHorizontalProgress from './ElderlyHorizontalProgress.vue'
import NumberAnimation from './NumberAnimation.vue'
import { regionElderlyData } from '../data/regionElderly'

const { institutionStats, bedStats, populationStats, careData, subsidyStats } = regionElderlyData
</script>

<style lang="scss" scoped>
// SCSS变量定义
$neon-cyan: #01ffe6;
$neon-yellow: rgba(255, 255, 0, 0.8);
$neon-orange: rgba(255, 165, 0, 0.8);

.region-elderly-content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  // 三列布局
  .content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    height: 100%;

    // 列
    .column {
      display: flex;
      flex-direction: column;
      gap: 20px;

      // 第一列
      &.column-1 {
        width: 668px;

        // 第一行：三个统计数据
        .row.row-1 {
          display: flex;
          justify-content: space-between;
          height: 118px;
          margin-top: 20px;

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

            &: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 {
              font-size: 44px;
              font-weight: 500;
              color: $neon-cyan;
              line-height: 56px;
              letter-spacing: 2px;
              margin-bottom: 8px;
            }

            .stat-label {
              font-size: 26px;
              font-weight: 300;
              line-height: 39px;
              letter-spacing: 1px;
              color: $neon-cyan;
              text-align: center;
              white-space: nowrap;
              opacity: 0.8;
            }
          }
        }

        // 第二行：两个重叠的梯形
        .row.row-2 {
          flex: 1;
          display: flex;
          align-items: flex-end;
          justify-content: flex-end;
          padding-left: 20px;
          padding-bottom: 40px;

          .trapezoid-container {
            position: relative;
            width: 640px;
            height: 234px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .trapezoid {
              position: absolute;
              color: white;
              display: flex;
              align-items: center;

              &.large-trapezoid {
                background: url('@/assets/images/trapezoid_large.png') no-repeat center;
                background-size: 100% 100%;
                width: 100%;
                height: 100%;
                bottom: 0;
                right: 0;
              }

              &.small-trapezoid {
                background: url('@/assets/images/trapezoid_small.png') no-repeat center;
                background-size: 100% 100%;
                width: 538px;
                height: 151px;
                bottom: 0;
                right: 0;
              }
            }

            .trapezoid-item {
              display: flex;
              align-items: center;
              color: $neon-cyan;

              &:nth-last-child(2) {
                margin-top: 26px;
                color: #fdffe0;
              }

              &:last-child {
                margin-top: 2px;
                color: #fdffe0;
              }
            }

            .trapezoid-label {
              flex-shrink: 0;
              width: 200px;
              margin-left: 10px;
              font-weight: 400;
              font-size: 30px;
              text-align: right;
            }

            .trapezoid-value {
              flex-shrink: 0;
              width: 140px;
              font-weight: 600;
              font-size: 44px;
              margin-right: 8px;
              text-align: right;
            }

            .trapezoid-unit {
              font-weight: 400;
              font-size: 30px;
            }
          }
        }
      }

      // 第二列
      &.column-2 {
        width: 636px;
        margin-left: 20px;
        margin-right: 40px;

        // 第一行：三个统计数据
        .row.row-1 {
          display: flex;
          justify-content: space-between;
          height: 118px;
          margin-top: 20px;

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

            &: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 {
              font-size: 44px;
              font-weight: 500;
              color: $neon-cyan;
              line-height: 56px;
              letter-spacing: 2px;
              margin-bottom: 8px;
            }

            .stat-unit {
              color: $neon-cyan;
              font-weight: 500;
              font-size: 30px;
            }

            .stat-label {
              font-size: 26px;
              font-weight: 400;
              line-height: 39px;
              letter-spacing: 1px;
              color: $neon-cyan;
              text-align: center;
              white-space: nowrap;
              opacity: 0.5;
            }
          }
        }

        // 第二行：三个进度条
        .row.row-2 {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 15px;
          margin-top: 66px;

          .care-item {
            display: flex;
            align-items: center;

            .care-label {
              width: 100px;
              font-size: 16px;
              color: rgba(255, 255, 255, 0.7);
            }

            .care-bar-container {
              flex: 1;
              height: 10px;
              background-color: rgba(255, 255, 255, 0.1);
              margin: 0 20px;
              border-radius: 5px;
              overflow: hidden;

              .care-bar {
                height: 100%;
                border-radius: 5px;

                &.full-care {
                  width: 70%;
                  background-color: $neon-cyan;
                }

                &.half-care {
                  width: 25%;
                  background-color: $neon-yellow;
                }

                &.total-care {
                  width: 5%;
                  background-color: $neon-orange;
                }
              }
            }

            .care-value {
              width: 100px;
              font-size: 16px;
              color: rgba(255, 255, 255, 0.7);
              text-align: right;
            }
          }
        }
      }

      // 第三列
      &.column-3 {
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .subsidy-data {
          display: flex;
          flex-direction: column;
          gap: 30px;
          height: 100%;
          padding: 40px 12px 36px;
          justify-content: space-between;

          .subsidy-item {
            display: flex;
            align-items: center;

            .subsidy-icon {
              width: 76px;
              height: 86px;
              margin-right: 15px;

              &.subsidy-fund {
                background: url('@/assets/icons/subsidy_fund.png') no-repeat center;
                background-size: cover;
              }

              &.subsidy-people {
                background: url('@/assets/icons/subsidy_people.png') no-repeat center;
                background-size: cover;
              }

              &.subsidy-rate {
                background: url('@/assets/icons/subsidy_rate.png') no-repeat center;
                background-size: cover;
              }
            }

            .subsidy-label {
              font-size: 28px;
              font-weight: 400;
              color: #6ae7da;
            }

            .subsidy-value {
              margin-top: 4px;
              font-size: 44px;
              font-weight: 600;
              letter-spacing: 2px;
              color: $neon-cyan;
            }

            .stat-unit {
              color: #aed1ce;
              font-weight: 400;
              font-size: 30px;
            }
          }
        }
      }
    }
  }
}
</style>
