<template>
  <div class="dimension-item">
    <h4 class="detection-title">衣穿得舒适</h4>

    <!-- 第一行：统计数字 -->
    <div class="stats-row">
      <div class="stat-item">
        <div class="stat-value">
          <NumberAnimation
            :value="clothingStats.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="clothingStats.perCapitaExpenditure"
            :thousands="true"
            unit="元"
            :unit-style="{ fontSize: '30px' }"
          />
        </div>
        <div class="stat-label">人均衣物支出</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">
          <NumberAnimation
            :value="clothingStats.perCapitaCompliance"
            :decimals="1"
            unit="%"
            :unit-style="{ fontSize: '30px' }"
          />
        </div>
        <div class="stat-label">人均配备达标率</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">
          <NumberAnimation
            :value="clothingStats.distributionRate"
            unit="%"
            :unit-style="{ fontSize: '30px' }"
          />
        </div>
        <div class="stat-label">发放到位率</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">
          <NumberAnimation
            :value="clothingStats.averageInterval"
            unit="天"
            :unit-style="{ fontSize: '30px' }"
          />
        </div>
        <div class="stat-label">平均发放间隔时间</div>
      </div>
    </div>

    <!-- 第二行：图表和衣物展示 -->
    <div class="charts-section">
      <div class="chart-item clothing-quarterly-chart">
        <div class="chart-title">衣物季度发放</div>
        <div id="clothingQuarterlyChart" class="chart-container"></div>
      </div>
      <div class="chart-item purchase-content-chart">
        <div class="chart-title">采购内容分析</div>
        <div id="purchaseContentChart" class="chart-container"></div>
      </div>
      <div class="chart-item supplier-chart">
        <div class="chart-title">采购供应商分析</div>
        <div id="supplierChart" class="chart-container"></div>
      </div>
      <div class="chart-item clothing-display">
        <div class="chart-title">衣物发放</div>
        <div class="clothing-images-grid">
          <div class="clothing-image-item" v-for="i in 4" :key="i">
            <div class="clothing-image-placeholder"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 第三行：衣物采购情况和问题数据 -->
    <div class="menu-container">
      <!-- 衣物采购情况表格 -->
      <div class="table-section">
        <div class="table-title">衣物采购情况：</div>
        <DataTable
          :columns="clothingPurchaseTableColumns"
          :data="clothingPurchaseTableData"
          :border="true"
          :large-font="true"
        >
          <template #quantity="{ row }">
            <div class="table-cell">{{ row.quantity }}件</div>
          </template>
          <template #unitPrice="{ row }">
            <div class="table-cell">¥{{ row.unitPrice }}</div>
          </template>
          <template #totalAmount="{ row }">
            <div class="table-cell">¥{{ row.totalAmount }}</div>
          </template>
        </DataTable>
      </div>

      <!-- 机器人和问题数据部分 -->
      <div class="robot-section">
        <!-- 机器人 -->
        <div class="robot-items">
          <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>
              已核查采购订单{{ clothingStatistics.checkedOrders }}份，比对市场价格{{
                clothingStatistics.marketPriceComparisons
              }}次，审核供应商资质{{ clothingStatistics.supplierQualityAnalysis }}家，分析采购明细{{
                clothingStatistics.purchaseDetailsAnalysis
              }}项；
            </span>
          </div>
          <div class="stat-item">
            <img src="../assets/icons/icon-checkedRate.png" alt="审核通过率" class="stat-icon" />
            <span>
              实时识别采购异常、支出偏差等问题{{
                clothingStatistics.identifiedIssues
              }}起，覆盖在院老人{{ clothingStatistics.affectedSeniors }}人，涉及资金{{
                clothingStatistics.involvedFunds
              }}元；
            </span>
          </div>
          <div class="stat-item">
            <img src="../assets/icons/icon-checking.png" alt="待审核" class="stat-icon" />
            <span>
              待处置预警{{ clothingStatistics.pendingAlerts }}条，直接反馈{{
                clothingStatistics.directFeedback
              }}条，发布廉政令要求整改{{
                clothingStatistics.rectificationRequirements
              }}条，整改完成率{{ clothingStatistics.rectificationRate }}%。
            </span>
          </div>
        </div>
      </div>

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

interface Props {
  visible?: boolean
}

const props = defineProps<Props>()

const clothingStats = institutionDetailData.clothingStats
const clothingProblemTableColumns = institutionDetailData.clothingProblemTableColumns
const clothingProblemTableData = institutionDetailData.clothingProblemTableData
const clothingPurchaseTableData = institutionDetailData.clothingPurchaseTableData
const clothingStatistics = institutionDetailData.clothingStatistics
const clothingPurchaseTableColumns = institutionDetailData.clothingPurchaseTableColumns
const initCharts = () => {
  // 衣物季度发放图表
  const clothingQuarterlyDom = document.getElementById('clothingQuarterlyChart')
  if (!clothingQuarterlyDom) return
  const clothingQuarterlyChart = echarts.init(clothingQuarterlyDom)
  clothingQuarterlyChart.setOption({
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}元',
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: institutionDetailData.clothingQuarterlyData.map((item) => item.quarter),
      axisLine: {
        show: false,
      },
      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: 'bar',
        data: institutionDetailData.clothingQuarterlyData.map((item) => item.amount),
        itemStyle: {
          color: '#00FFE6',
          borderRadius: [20, 20, 0, 0],
        },
        barWidth: '60%',
        label: {
          show: true,
          position: 'top',
          color: '#06BBAD',
          fontSize: 26,
          margin: 20,
        },
      },
    ],
  })

  // 采购内容分析图表
  const purchaseContentDom = document.getElementById('purchaseContentChart')
  if (!purchaseContentDom) return
  const purchaseContentChart = echarts.init(purchaseContentDom)
  purchaseContentChart.setOption({
    tooltip: {
      trigger: 'item',
    },

    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: 22,
          distance: 50,
          color: '#06BBAD',
        },
        labelLine: {
          show: true,
          length: 20,
          length2: 20,
          lineStyle: {
            width: 2,
            color: '#00FFE6',
          },
        },
        data: institutionDetailData.clothingPurchaseContentData,
        color: ['#00FFE6', '#1E90FF', '#FFD700', '#FF8C00', '#FF6347'],
      },
    ],
  })

  // 采购供应商分析图表
  const colorList = ['#00FFE6', '#1E90FF', '#FFD700', '#FF8C00', '#FF6347']
  const supplierDom = document.getElementById('supplierChart')
  if (!supplierDom) return
  const supplierChart = echarts.init(supplierDom)
  supplierChart.setOption({
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}%',
    },
    polar: {
      radius: [30, '90%'],
      center: ['50%', '55%'],
    },
    angleAxis: {
      max: Math.max(...institutionDetailData.clothingSupplierData.map((item) => item.value)) + 15,
      startAngle: 90,
      clockwise: false,
      axisLine: {
        lineStyle: {
          color: '#066462',
        },
      },
      axisLabel: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    radiusAxis: {
      type: 'category',
      data: institutionDetailData.clothingSupplierData.map((item) => item.name),
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#00FFE6',
        },
      },
      axisLabel: {
        show: true,
        color: (name: string) => {
          return colorList[
            institutionDetailData.clothingSupplierData.findIndex((item) => item.name === name)
          ]
        },
        fontSize: 24,
        interval: 0,
        align: 'left',
        margin: -16,
      },
      splitLine: {
        show: false,
      },
    },
    series: [
      {
        name: '供应商',
        type: 'bar',
        data: institutionDetailData.clothingSupplierData.map((item) => item.value),
        coordinateSystem: 'polar',
        itemStyle: {
          color: (params: any) => {
            return colorList[params.dataIndex]
          },
        },
        label: {
          show: true,
          position: 'middle',
          formatter: '{c}%',
          color: 'rgba(0, 0, 0, 0.6)',
          fontSize: 22,
        },
        barWidth: '80%',
      },
    ],
  })

  window.addEventListener('resize', () => {
    clothingQuarterlyChart.resize()
    purchaseContentChart.resize()
    supplierChart.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: space-between;
    padding: 20px;

    &.clothing-quarterly-chart {
      flex: 1.2;
    }

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

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

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