<template>
  <div class="dimension-item">
    <h4 class="detection-title">钱花得明白</h4>

    <!-- 第一行：统计数字 -->
    <div class="stats-row">
      <div class="stat-item">
        <div class="stat-value">
          <NumberAnimation
            :value="financeStats.income"
            :thousands="true"
            unit="元"
            :unit-style="{ fontSize: '30px' }"
          />
        </div>
        <div class="stat-label">机构本级收入</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">
          <NumberAnimation
            :value="financeStats.expenditure"
            :thousands="true"
            unit="元"
            :unit-style="{ fontSize: '30px' }"
          />
        </div>
        <div class="stat-label">机构运营支出</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">
          <NumberAnimation
            :value="financeStats.disclosureRate"
            :decimals="1"
            unit="%"
            :unit-style="{ fontSize: '30px' }"
          />
        </div>
        <div class="stat-label">公示信息达标率</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">
          <NumberAnimation
            :value="financeStats.fundUsageRate"
            unit="%"
            :unit-style="{ fontSize: '30px' }"
          />
        </div>
        <div class="stat-label">资金用途达标率</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">
          <NumberAnimation
            :value="financeStats.serviceRate"
            unit="%"
            :unit-style="{ fontSize: '30px' }"
          />
        </div>
        <div class="stat-label">养老服务达标率</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">
          <NumberAnimation
            :value="financeStats.procurementRate"
            unit="%"
            :unit-style="{ fontSize: '30px' }"
          />
        </div>
        <div class="stat-label">采购过程达标率</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">
          <NumberAnimation
            :value="financeStats.ratingRate"
            unit="%"
            :unit-style="{ fontSize: '30px' }"
          />
        </div>
        <div class="stat-label">等级评定达标率</div>
      </div>
    </div>

    <!-- 第二行：图表和资金公示 -->
    <div class="charts-section">
      <div class="chart-item">
        <div class="chart-title">机构本级收入情况</div>
        <div id="incomeChart" class="chart-container"></div>
      </div>
      <div class="chart-item">
        <div class="chart-title">特困供养资金支出情况</div>
        <div id="expenseChart" class="chart-container"></div>
      </div>
      <div class="chart-item line-chart">
        <div class="chart-title">特困供养机构资金发放情况</div>
        <div id="distributionChart" class="chart-container"></div>
      </div>
      <div class="chart-item fund-show">
        <div class="chart-title">资金公示</div>
        <div class="fund-images-grid">
          <div class="fund-image-item" v-for="i in 4" :key="i">
            <div class="fund-image-placeholder"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 第三行：Tabs容器 -->
    <div class="tabs-container">
      <div class="tabs-header">
        <div
          v-for="(tab, index) in ['特困供养资金', '照料护理费', '高龄津贴', '零用钱']"
          :key="index"
          class="tab-item"
          :class="{ active: activeTab === index }"
          @click="switchTab(index)"
        >
          {{ tab }}
        </div>
      </div>
      <div class="tabs-content">
        <!-- 特困供养资金内容 -->
        <div class="tab-panel" :class="{ active: activeTab === 0 }">
          <!-- 第一个表格：特困供养资金 -->
          <div class="table-section">
            <DataTable
              :columns="fundTableColumns"
              :data="fundTableData"
              :border="true"
              :large-font="true"
            />
          </div>

          <!-- 机器人和问题数据部分 -->
          <div class="robot-section">
            <!-- 机器人 -->
            <div class="robot-items">
              <div class="robot-item">
                <el-image :src="robotAuditor" :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>
                  已审核申请：146份，已静默认证生存状态：237人，智能比对数据：8680项，覆盖老人：287人；
                </span>
              </div>
              <div class="stat-item">
                <img
                  src="../assets/icons/icon-checkedRate.png"
                  alt="审核通过率"
                  class="stat-icon"
                />
                <span> 资金申请审核通过率：98.9%，识别申请异常：9人，涉及资金：3600元； </span>
              </div>
              <div class="stat-item">
                <img src="../assets/icons/icon-checking.png" alt="待审核" class="stat-icon" />
                <span>
                  待处置预警：8条，直接反馈：5条，发布廉政要求整改：3条，整改完成率：78.4%。
                </span>
              </div>
            </div>
          </div>

          <!-- 第二个表格：问题数据 -->
          <div class="table-section" style="margin-top: 30px">
            <DataTable
              :columns="problemTableColumns"
              :data="problemTableData"
              :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 class="tab-panel" :class="{ active: activeTab === 1 }">
          <div class="table-section">
            <p class="empty-text">照料护理费内容</p>
          </div>
        </div>
        <div class="tab-panel" :class="{ active: activeTab === 2 }">
          <div class="table-section">
            <p class="empty-text">高龄津贴内容</p>
          </div>
        </div>
        <div class="tab-panel" :class="{ active: activeTab === 3 }">
          <div class="table-section">
            <p class="empty-text">零用钱内容</p>
          </div>
        </div>
      </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 robotAuditor from '@/assets/images/robot_auditor.png'
import robotWarningSupervisor from '@/assets/images/robot_warningSupervisor.png'

interface Props {
  visible?: boolean
}

const props = defineProps<Props>()

const financeStats = institutionDetailData.financeStats
const fundTableColumns = institutionDetailData.fundTableColumns
const problemTableColumns = institutionDetailData.problemTableColumns
const fundTableData = institutionDetailData.fundTableData
const problemTableData = institutionDetailData.problemTableData

const activeTab = ref(0)

const switchTab = (index: number) => {
  activeTab.value = index
}

const initCharts = () => {
  console.log('initCharts')
  const incomeDom = document.getElementById('incomeChart')
  if (!incomeDom) return
  const incomeChart = echarts.init(incomeDom)
  incomeChart.setOption({
    tooltip: {
      trigger: 'item',
    },
    series: [
      {
        name: '收入来源',
        type: 'pie',
        radius: ['30%', '80%'],
        center: ['45%', '55%'],
        roseType: 'radius',
        avoidLabelOverlap: false,
        itemStyle: {
          borderWidth: 0,
        },
        label: {
          show: true,
          position: 'outside',
          formatter: '{b}',
          fontSize: 22,
          distance: 50,
          color: '#06BBAD',
        },
        labelLine: {
          show: true,
          length: 20,
          length2: 10,
          lineStyle: {
            width: 2,
            color: '#00FFE6',
          },
        },
        data: institutionDetailData.incomeData,
        color: ['#00FFE6', '#1E90FF', '#FFD700'],
      },
      {
        name: '中心圆环',
        type: 'pie',
        radius: ['30%', '38%'],
        center: ['45%', '55%'],
        itemStyle: {
          color: 'rgba(0, 0, 0, 0.3)',
        },
        data: [{ value: 1, name: '' }],
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        tooltip: {
          show: false,
        },
        emphasis: {
          disabled: true,
        },
      },
    ],
  })

  const expenseChart = echarts.init(document.getElementById('expenseChart'))
  expenseChart.setOption({
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      right: 0,
      top: '33%',
      textStyle: {
        color: '#06BBAD',
        fontSize: 22,
        wrap: true,
        wordWrap: 'break-word',
      },
      itemWidth: 30,
      itemHeight: 20,
    },
    series: [
      {
        name: '支出项目',
        type: 'pie',
        radius: ['30%', '80%'],
        center: ['30%', '55%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderWidth: 0,
        },
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: institutionDetailData.expenseData,
        color: ['#1E90FF', '#00FFE6', '#FFD700', '#FF8C00', '#FF6347', '#9370DB', '#4169E1'],
      },
      {
        name: '中心圆环',
        type: 'pie',
        radius: ['30%', '38%'],
        center: ['30%', '55%'],
        itemStyle: {
          color: 'rgba(0, 0, 0, 0.3)',
        },
        data: [{ value: 1, name: '' }],
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        tooltip: {
          show: false,
        },
        emphasis: {
          disabled: true,
        },
      },
    ],
  })

  const distributionChart = echarts.init(document.getElementById('distributionChart'))
  distributionChart.setOption({
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['收入', '支出'],
      left: 80,
      itemWidth: 50,
      textStyle: {
        color: '#06BBAD',
        fontSize: 26,
      },
      itemStyle: {
        color: 'inherit',
        borderColor: 'inherit',
        borderWidth: 4,
      },
      lineStyle: {
        color: 'inherit',
        width: 3,
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      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: '支出',
        type: 'line',
        smooth: true,
        data: institutionDetailData.distributionData.actual,
        lineStyle: {
          color: '#01AB9B',
          width: 3,
        },
        itemStyle: {
          color: '#00D1BD',
          borderColor: 'rgba(0, 209, 189, 0.30)',
          borderWidth: 4,
        },
        symbol: 'circle',
        symbolSize: 12,
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(0,255,230,0.4)',
              },
              {
                offset: 1,
                color: 'rgba(217,217,217,0)',
              },
            ],
          },
        },
      },
      {
        name: '收入',
        type: 'line',
        smooth: true,
        data: institutionDetailData.distributionData.planned,
        lineStyle: {
          color: '#00AEFF',
          width: 3,
        },
        itemStyle: {
          color: '#42C3FF',
          borderColor: 'rgba(66, 195, 255, 0.30)',
          borderWidth: 4,
        },
        symbol: 'circle',
        symbolSize: 12,
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(0,174,255,0.4)',
              },
              {
                offset: 1,
                color: 'rgba(217,217,217,0)',
              },
            ],
          },
          shadowBlur: 8,
          shadowColor: 'rgba(0,0,0,0.25)',
        },
      },
    ],
  })

  window.addEventListener('resize', () => {
    incomeChart.resize()
    expenseChart.resize()
    distributionChart.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;

    &.line-chart {
      flex: 1.5;
      width: 900px;
    }

    &.fund-show {
      flex: 1;
    }

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

    .fund-images-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      height: 466px;

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

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

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