<template>
  <view class="inventory-freshness-analysis">
    <view class="report-header">
      <text class="report-title">库存新鲜度分析</text>
      <view class="report-period">
        <text class="period-label">分析周期：</text>
        <text class="period-value">{{ analysisPeriod }}</text>
      </view>
    </view>

    <!-- 关键指标卡片 -->
    <view class="metrics-row">
      <view class="metric-card">
        <view class="metric-icon fresh"></view>
        <text class="metric-title">新鲜库存占比</text>
        <view class="metric-value-container">
          <text class="metric-value">{{ freshPercentage }}%</text>
          <text class="metric-unit">良好</text>
        </view>
      </view>
      <view class="metric-card">
        <view class="metric-icon warning"></view>
        <text class="metric-title">临期商品数量</text>
        <view class="metric-value-container">
          <text class="metric-value">{{ formatNumber(nearExpiryCount) }}</text>
          <text class="metric-unit">件</text>
        </view>
      </view>
      <view class="metric-card">
        <view class="metric-icon expired"></view>
        <text class="metric-title">过期商品数量</text>
        <view class="metric-value-container">
          <text class="metric-value">{{ formatNumber(expiredCount) }}</text>
          <text class="metric-unit">件</text>
        </view>
      </view>
    </view>

    <!-- 库存新鲜度分布饼图 -->
    <view class="chart-card">
      <view class="chart-header">
        <text class="chart-title">库存新鲜度分布</text>
        <text class="chart-subtitle">按有效期状态分类统计</text>
      </view>
      <view class="chart-content">
        <view class="pie-chart-container">
          <QiunDataCharts
            type="pie"
            :opts="pieChartOpts"
            :chartData="pieChartData"
            :canvas2d="true"
            :inScrollView="true"
            canvasId="freshnessPieChart"
          />
          <view class="pie-legend">
            <view class="legend-item" v-for="(item, index) in freshnessData" :key="index">
              <view class="legend-color" :style="{ backgroundColor: item.color }"></view>
              <text class="legend-name">{{ item.name }}</text>
              <text class="legend-value">{{ item.percentage }}%</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 库存周期分析折线图 -->
    <view class="chart-card">
      <view class="chart-header">
        <text class="chart-title">库存周期趋势分析</text>
        <text class="chart-subtitle">最近6个月库存周期变化趋势</text>
      </view>
      <view class="chart-content">
        <view class="line-chart-container">
          <QiunDataCharts
            type="line"
            :opts="lineChartOpts"
            :chartData="lineChartData"
            :canvas2d="true"
            :inScrollView="true"
            canvasId="inventoryCycleChart"
          />
          <view class="chart-legend">
            <view class="legend-item">
              <view class="legend-dot cycle"></view>
              <text class="legend-text">平均库存周期</text>
            </view>
            <view class="legend-item">
              <view class="legend-dot freshness"></view>
              <text class="legend-text">新鲜度指数</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 有效期分布柱状图 -->
    <view class="chart-card">
      <view class="chart-header">
        <text class="chart-title">商品有效期分布</text>
        <text class="chart-subtitle">不同有效期区间的商品数量分布</text>
      </view>
      <view class="chart-content">
        <view class="bar-chart-container">
          <QiunDataCharts
            type="column"
            :opts="barChartOpts"
            :chartData="barChartData"
            :canvas2d="true"
            :inScrollView="true"
            canvasId="expiryDistributionChart"
          />
        </view>
      </view>
    </view>

    <!-- 临期商品预警列表 -->
    <view class="chart-card">
      <view class="chart-header">
        <text class="chart-title">临期商品预警</text>
        <text class="chart-subtitle">即将到期商品清单</text>
      </view>
      <view class="warning-list">
        <view class="warning-item" v-for="(item, index) in nearExpiryList" :key="index" :class="[getWarningLevel(item.daysLeft)]">
          <view class="warning-icon">{{ getWarningIcon(item.daysLeft) }}</view>
          <view class="warning-content">
            <text class="product-name">{{ item.name }}</text>
            <text class="product-code">{{ item.code }}</text>
          </view>
          <view class="warning-info">
            <text class="expiry-date">到期：{{ item.expiryDate }}</text>
            <text class="days-left">{{ item.daysLeft }}天</text>
          </view>
          <view class="warning-action">
            <text class="action-btn">处理</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import QiunDataCharts from './qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'

export default {
  components: {
    QiunDataCharts
  },

  data() {
    return {
      analysisPeriod: '2024年10月',
      freshPercentage: 87.5,
      nearExpiryCount: 1234,
      expiredCount: 56,

      // 新鲜度数据
      freshnessData: [
        { name: '新鲜(>30天)', value: 424856, percentage: 87.5, color: '#52C41A' },
        { name: '临期(7-30天)', value: 42345, percentage: 8.7, color: '#FAAD14' },
        { name: '紧急临期(<7天)', value: 12345, percentage: 2.5, color: '#FF7A45' },
        { name: '已过期', value: 56, percentage: 0.1, color: '#FF4D4F' },
        { name: '无有效期', value: 5670, percentage: 1.2, color: '#8C8C8C' }
      ],

      // 库存周期趋势数据
      cycleTrendData: {
        categories: ['5月', '6月', '7月', '8月', '9月', '10月'],
        avgCycleData: [45, 42, 48, 51, 46, 43],
        freshnessIndexData: [92, 89, 85, 88, 91, 87.5]
      },

      // 有效期分布数据
      expiryDistributionData: [
        { range: '0-7天', count: 12345, percentage: 2.5 },
        { range: '8-15天', count: 23456, percentage: 4.8 },
        { range: '16-30天', count: 45678, percentage: 9.4 },
        { range: '31-60天', count: 78901, percentage: 16.2 },
        { range: '61-90天', count: 123456, percentage: 25.4 },
        { range: '90天以上', count: 201836, percentage: 41.7 }
      ],

      // 临期商品列表
      nearExpiryList: [
        { name: '云南白药牙膏', code: 'YN001', expiryDate: '2024-10-28', daysLeft: 3, quantity: 234 },
        { name: '普洱茶饼', code: 'PU002', expiryDate: '2024-10-30', daysLeft: 5, quantity: 156 },
        { name: '鲜花饼', code: 'FH003', expiryDate: '2024-11-02', daysLeft: 8, quantity: 89 },
        { name: '三七粉', code: 'SQ005', expiryDate: '2024-11-05', daysLeft: 11, quantity: 67 },
        { name: '手工皂', code: 'GS008', expiryDate: '2024-11-08', daysLeft: 14, quantity: 45 },
        { name: '鲜花精油', code: 'XJ009', expiryDate: '2024-11-12', daysLeft: 18, quantity: 34 },
        { name: '云南咖啡', code: 'KF004', expiryDate: '2024-11-15', daysLeft: 21, quantity: 78 },
        { name: '银饰保养液', code: 'YS010', expiryDate: '2024-11-20', daysLeft: 26, quantity: 23 }
      ]
    }
  },

  computed: {
    // 饼图数据
    pieChartData() {
      return {
        series: [{
          data: this.freshnessData.map(item => ({
            name: item.name,
            value: item.value
          }))
        }]
      }
    },

    // 饼图配置
    pieChartOpts() {
      return {
        color: this.freshnessData.map(item => item.color),
        padding: [5, 5, 5, 5],
        dataLabel: true,
        legend: {
          show: false
        },
        extra: {
          pie: {
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: false,
            borderWidth: 3,
            borderColor: '#FFFFFF'
          }
        }
      }
    },

    // 折线图数据
    lineChartData() {
      return {
        categories: this.cycleTrendData.categories,
        series: [
          {
            name: '平均库存周期',
            data: this.cycleTrendData.avgCycleData
          },
          {
            name: '新鲜度指数',
            data: this.cycleTrendData.freshnessIndexData
          }
        ]
      }
    },

    // 折线图配置
    lineChartOpts() {
      return {
        color: ['#576EFF', '#52C41A'],
        padding: [15, 15, 15, 15],
        dataLabel: false,
        legend: {
          show: false
        },
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          gridType: 'dash',
          dashLength: 2,
          data: [
            {
              min: 0,
              title: '天数'
            },
            {
              min: 0,
              position: 'right',
              title: '指数'
            }
          ]
        },
        extra: {
          line: {
            type: 'curve',
            width: 2,
            activeType: 'hollow'
          }
        }
      }
    },

    // 柱状图数据
    barChartData() {
      return {
        categories: this.expiryDistributionData.map(item => item.range),
        series: [{
          name: '商品数量',
          data: this.expiryDistributionData.map(item => item.count)
        }]
      }
    },

    // 柱状图配置
    barChartOpts() {
      return {
        color: ['#576EFF', '#FF7A45', '#FAAD14', '#52C41A', '#13C2C2', '#B37FEB'],
        padding: [15, 15, 15, 15],
        dataLabel: false,
        enableScroll: false,
        xAxis: {
          disableGrid: false,
          gridType: 'dash',
          rotateLabel: false,
          itemCount: 6
        },
        yAxis: {
          gridType: 'dash',
          dashLength: 2,
          data: [{
            min: 0,
            title: '商品数量'
          }]
        },
        extra: {
          column: {
            type: 'group',
            width: 35,
            activeBgColor: '#000000',
            activeBgOpacity: 0.08,
            linearType: 'custom',
            barBorderCircle: true,
            seriesGap: 2
          }
        }
      }
    }
  },

  methods: {
    formatNumber(num) {
      return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    },

    getWarningLevel(daysLeft) {
      if (daysLeft <= 3) return 'urgent'
      if (daysLeft <= 7) return 'high'
      if (daysLeft <= 15) return 'medium'
      return 'low'
    },

    getWarningIcon(daysLeft) {
      if (daysLeft <= 3) return '🚨'
      if (daysLeft <= 7) return '⚠️'
      if (daysLeft <= 15) return '📅'
      return 'ℹ️'
    }
  }
}
</script>

<style scoped lang="less">
@primary-color: #667eea;
@secondary-color: #764ba2;
@success-color: #52c41a;
@warning-color: #faad14;
@error-color: #ff4d4f;
@text-primary: #333;
@text-secondary: #666;
@text-light: #999;
@bg-white: #ffffff;
@border-radius: 16rpx;
@shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

.inventory-freshness-analysis {
  .report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32rpx;
    padding: 0 8rpx;

    .report-title {
      font-size: 36rpx;
      font-weight: 600;
      color: @text-primary;
    }

    .report-period {
      display: flex;
      align-items: center;

      .period-label {
        font-size: 24rpx;
        color: @text-secondary;
        margin-right: 8rpx;
      }

      .period-value {
        font-size: 24rpx;
        color: @primary-color;
        font-weight: 500;
      }
    }
  }

  .metrics-row {
    display: flex;
    gap: 24rpx;
    margin-bottom: 32rpx;

    .metric-card {
      flex: 1;
      background: @bg-white;
      border-radius: @border-radius;
      padding: 32rpx 24rpx;
      box-shadow: @shadow;
      text-align: center;
      position: relative;
      overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4rpx;
        background: linear-gradient(90deg, @primary-color, @secondary-color);
      }

      .metric-icon {
        width: 48rpx;
        height: 48rpx;
        margin: 0 auto 16rpx;
        border-radius: 50%;
        position: relative;

        &.fresh {
          background: linear-gradient(135deg, #52c41a, #73d13d);
          &::after { content: '🌿'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24rpx; }
        }

        &.warning {
          background: linear-gradient(135deg, #faad14, #ffc53d);
          &::after { content: '⚠️'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24rpx; }
        }

        &.expired {
          background: linear-gradient(135deg, #ff4d4f, #ff7875);
          &::after { content: '🚫'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24rpx; }
        }
      }

      .metric-title {
        font-size: 24rpx;
        color: @text-secondary;
        margin-bottom: 12rpx;
      }

      .metric-value-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4rpx;
      }

      .metric-value {
        font-size: 32rpx;
        font-weight: 600;
        color: @text-primary;
        font-family: 'DINAlternate-Bold', sans-serif;
        line-height: 1;
      }

      .metric-unit {
        font-size: 20rpx;
        color: @text-light;
        line-height: 1;
      }
    }
  }

  .chart-card {
    background: @bg-white;
    border-radius: @border-radius;
    padding: 24rpx;
    box-shadow: @shadow;
    margin-bottom: 24rpx;

    .chart-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 20rpx;

      .chart-title {
        font-size: 28rpx;
        font-weight: 600;
        color: @text-primary;
      }

      .chart-subtitle {
        font-size: 22rpx;
        color: @text-light;
        margin-top: 4rpx;
      }
    }

    .chart-content {
      .pie-chart-container {
        display: flex;
        flex-direction: column;
        align-items: center;

        .pie-legend {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 16rpx;
          margin-top: 16rpx;

          .legend-item {
            display: flex;
            align-items: center;
            gap: 8rpx;

            .legend-color {
              width: 12rpx;
              height: 12rpx;
              border-radius: 2rpx;
            }

            .legend-name {
              font-size: 22rpx;
              color: @text-secondary;
            }

            .legend-value {
              font-size: 22rpx;
              color: @text-primary;
              font-weight: 600;
            }
          }
        }
      }

      .line-chart-container {
        .chart-legend {
          display: flex;
          justify-content: center;
          gap: 32rpx;
          margin-top: 16rpx;

          .legend-item {
            display: flex;
            align-items: center;
            gap: 8rpx;

            .legend-dot {
              width: 12rpx;
              height: 12rpx;
              border-radius: 50%;

              &.cycle {
                background: #576EFF;
              }

              &.freshness {
                background: #52C41A;
              }
            }

            .legend-text {
              font-size: 22rpx;
              color: @text-secondary;
            }
          }
        }
      }

      .bar-chart-container {
        width: 100%;
      }
    }

    .warning-list {
      .warning-item {
        display: flex;
        align-items: center;
        padding: 16rpx;
        margin-bottom: 12rpx;
        border-radius: 12rpx;
        border: 1rpx solid #f0f0f0;

        &.urgent {
          background: rgba(255, 77, 79, 0.05);
          border-color: rgba(255, 77, 79, 0.2);
        }

        &.high {
          background: rgba(255, 122, 69, 0.05);
          border-color: rgba(255, 122, 69, 0.2);
        }

        &.medium {
          background: rgba(250, 173, 20, 0.05);
          border-color: rgba(250, 173, 20, 0.2);
        }

        &.low {
          background: rgba(82, 196, 26, 0.05);
          border-color: rgba(82, 196, 26, 0.2);
        }

        .warning-icon {
          font-size: 32rpx;
          margin-right: 16rpx;
        }

        .warning-content {
          flex: 1;

          .product-name {
            font-size: 28rpx;
            color: @text-primary;
            font-weight: 500;
            display: block;
            margin-bottom: 4rpx;
          }

          .product-code {
            font-size: 22rpx;
            color: @text-light;
            display: block;
          }
        }

        .warning-info {
          text-align: right;
          margin-right: 16rpx;

          .expiry-date {
            font-size: 22rpx;
            color: @text-secondary;
            display: block;
            margin-bottom: 4rpx;
          }

          .days-left {
            font-size: 24rpx;
            color: @text-primary;
            font-weight: 600;
            display: block;
          }
        }

        .warning-action {
          .action-btn {
            font-size: 22rpx;
            color: @primary-color;
            padding: 8rpx 16rpx;
            border: 1rpx solid @primary-color;
            border-radius: 8rpx;
          }
        }
      }
    }
  }
}
</style>