<template>
  <view class="inventory-accuracy-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 accuracy"></view>
        <text class="metric-title">盘点准确率</text>
        <view class="metric-value-container">
          <text class="metric-value">{{ accuracyRate }}%</text>
          <text class="metric-unit">优秀</text>
        </view>
      </view>
      <view class="metric-card">
        <view class="metric-icon difference"></view>
        <text class="metric-title">平均差异率</text>
        <view class="metric-value-container">
          <text class="metric-value">{{ avgDifference }}%</text>
          <text class="metric-unit">较低</text>
        </view>
      </view>
      <view class="metric-card">
        <view class="metric-icon variance"></view>
        <text class="metric-title">差异金额</text>
        <view class="metric-value-container">
          <text class="metric-value">¥{{ formatMoney(varianceAmount) }}</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="variancePieChart"
          />
          <view class="pie-legend">
            <view class="legend-item" v-for="(item, index) in varianceData" :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="varianceTrendChart"
          />
          <view class="chart-legend">
            <view class="legend-item">
              <view class="legend-dot accuracy"></view>
              <text class="legend-text">盘点准确率</text>
            </view>
            <view class="legend-item">
              <view class="legend-dot variance"></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="categoryVarianceChart"
          />
        </view>
      </view>
    </view>

    <!-- 重点差异商品列表 -->
    <view class="chart-card">
      <view class="chart-header">
        <text class="chart-title">重点差异商品清单</text>
        <text class="chart-subtitle">差异率较高的商品需要重点关注</text>
      </view>
      <view class="variance-list">
        <view class="variance-item" v-for="(item, index) in highVarianceList" :key="index" :class="[getVarianceLevel(item.varianceRate)]">
          <view class="variance-rank">{{ index + 1 }}</view>
          <view class="variance-content">
            <text class="product-name">{{ item.name }}</text>
            <text class="product-category">{{ item.category }}</text>
          </view>
          <view class="variance-data">
            <view class="variance-info">
              <text class="variance-label">系统数量</text>
              <text class="variance-value">{{ item.systemQty }}</text>
            </view>
            <view class="variance-info">
              <text class="variance-label">实际数量</text>
              <text class="variance-value">{{ item.actualQty }}</text>
            </view>
          </view>
          <view class="variance-percentage">
            <text class="variance-rate" :class="{ 'negative': item.varianceRate < 0 }">
              {{ item.varianceRate > 0 ? '+' : '' }}{{ item.varianceRate }}%
            </text>
            <text class="variance-amount">¥{{ formatMoney(item.varianceAmount) }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 改进建议 -->
    <view class="chart-card">
      <view class="chart-header">
        <text class="chart-title">改进建议</text>
      </view>
      <view class="suggestions">
        <view class="suggestion-item" v-for="(item, index) in suggestions" :key="index">
          <view class="suggestion-icon">{{ item.icon }}</view>
          <view class="suggestion-content">
            <text class="suggestion-title">{{ item.title }}</text>
            <text class="suggestion-desc">{{ item.description }}</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月',
      accuracyRate: 96.8,
      avgDifference: 3.2,
      varianceAmount: 12.45,

      // 差异分布数据
      varianceData: [
        { name: '无差异', value: 424856, percentage: 87.5, color: '#52C41A' },
        { name: '轻微差异(±5%)', value: 45678, percentage: 9.4, color: '#1890FF' },
        { name: '中等差异(±10%)', value: 12345, percentage: 2.5, color: '#FAAD14' },
        { name: '严重差异(±20%)', value: 1567, percentage: 0.4, color: '#FF7A45' },
        { name: '重大差异(>±20%)', value: 432, percentage: 0.2, color: '#FF4D4F' }
      ],

      // 差异趋势数据
      varianceTrendData: {
        categories: ['5月', '6月', '7月', '8月', '9月', '10月'],
        accuracyData: [94.2, 95.1, 94.8, 95.7, 96.2, 96.8],
        avgVarianceData: [5.8, 4.9, 5.2, 4.3, 3.8, 3.2]
      },

      // 各类别差异数据
      categoryVarianceData: [
        { category: '保健品', varianceRate: 2.8, count: 156234 },
        { category: '茶叶', varianceRate: 3.2, count: 128456 },
        { category: '食品', varianceRate: 4.1, count: 98567 },
        { category: '饮品', varianceRate: 2.5, count: 56789 },
        { category: '工艺品', varianceRate: 6.7, count: 23456 },
        { category: '纺织品', varianceRate: 3.9, count: 12345 },
        { category: '化妆品', varianceRate: 5.2, count: 8765 },
        { category: '其他', varianceRate: 7.8, count: 560 }
      ],

      // 高差异商品列表
      highVarianceList: [
        { name: '银手镯', category: '工艺品', systemQty: 156, actualQty: 134, varianceRate: -14.1, varianceAmount: 3.45 },
        { name: '云南红酒', category: '饮品', systemQty: 234, actualQty: 267, varianceRate: 14.1, varianceAmount: 2.78 },
        { name: '普洱茶砖', category: '茶叶', systemQty: 189, actualQty: 165, varianceRate: -12.7, varianceAmount: 1.89 },
        { name: '玉石吊坠', category: '工艺品', systemQty: 78, actualQty: 89, varianceRate: 14.1, varianceAmount: 2.34 },
        { name: '鲜花精油', category: '化妆品', systemQty: 456, actualQty: 398, varianceRate: -12.7, varianceAmount: 1.56 },
        { name: '手工刺绣', category: '纺织品', systemQty: 67, actualQty: 78, varianceRate: 16.4, varianceAmount: 1.23 },
        { name: '三七粉', category: '保健品', systemQty: 234, actualQty: 256, varianceRate: 9.4, varianceAmount: 0.98 },
        { name: '民族服装', category: '纺织品', systemQty: 89, actualQty: 78, varianceRate: -12.4, varianceAmount: 0.87 }
      ],

      // 改进建议
      suggestions: [
        {
          icon: '📊',
          title: '完善盘点制度',
          description: '建议采用ABC分类法，对高价值商品进行更频繁的盘点，提高整体准确率'
        },
        {
          icon: '💻',
          title: '优化系统管理',
          description: '加强库存系统的数据同步机制，确保系统数据与实际库存的一致性'
        },
        {
          icon: '👥',
          title: '加强人员培训',
          description: '定期对仓库管理人员进行培训，提高盘点操作规范性和数据记录准确性'
        },
        {
          icon: '🔍',
          title: '建立差异分析机制',
          description: '对重大差异商品进行重点分析，找出差异原因并制定改进措施'
        }
      ]
    }
  },

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

    // 饼图配置
    pieChartOpts() {
      return {
        color: this.varianceData.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.varianceTrendData.categories,
        series: [
          {
            name: '盘点准确率',
            data: this.varianceTrendData.accuracyData
          },
          {
            name: '平均差异率',
            data: this.varianceTrendData.avgVarianceData
          }
        ]
      }
    },

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

    // 柱状图数据
    barChartData() {
      return {
        categories: this.categoryVarianceData.map(item => item.category),
        series: [{
          name: '差异率',
          data: this.categoryVarianceData.map(item => item.varianceRate)
        }]
      }
    },

    // 柱状图配置
    barChartOpts() {
      return {
        color: ['#576EFF'],
        padding: [15, 15, 15, 15],
        dataLabel: false,
        enableScroll: false,
        xAxis: {
          disableGrid: false,
          gridType: 'dash',
          rotateLabel: false,
          itemCount: 8
        },
        yAxis: {
          gridType: 'dash',
          dashLength: 2,
          data: [{
            min: 0,
            title: '差异率(%)'
          }]
        },
        extra: {
          column: {
            type: 'group',
            width: 30,
            activeBgColor: '#000000',
            activeBgOpacity: 0.08,
            linearType: 'custom',
            barBorderCircle: true
          }
        }
      }
    }
  },

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

    getVarianceLevel(varianceRate) {
      const absRate = Math.abs(varianceRate)
      if (absRate >= 20) return 'severe'
      if (absRate >= 10) return 'high'
      if (absRate >= 5) return 'medium'
      return 'low'
    }
  }
}
</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-accuracy-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;

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

        &.difference {
          background: linear-gradient(135deg, #1890ff, #40a9ff);
          &::after { content: '📏'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24rpx; }
        }

        &.variance {
          background: linear-gradient(135deg, #faad14, #ffc53d);
          &::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%;

              &.accuracy {
                background: #52C41A;
              }

              &.variance {
                background: #FF7A45;
              }
            }

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

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

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

        &.severe {
          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);
        }

        .variance-rank {
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
          background: @primary-color;
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20rpx;
          font-weight: 600;
          margin-right: 16rpx;
        }

        .variance-content {
          flex: 1;

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

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

        .variance-data {
          display: flex;
          gap: 24rpx;
          margin-right: 16rpx;

          .variance-info {
            text-align: center;

            .variance-label {
              font-size: 20rpx;
              color: @text-secondary;
              display: block;
              margin-bottom: 4rpx;
            }

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

        .variance-percentage {
          text-align: right;

          .variance-rate {
            font-size: 24rpx;
            font-weight: 600;
            color: @error-color;
            display: block;
            margin-bottom: 4rpx;

            &.negative {
              color: @error-color;
            }
          }

          .variance-amount {
            font-size: 22rpx;
            color: @text-secondary;
            display: block;
          }
        }
      }
    }

    .suggestions {
      .suggestion-item {
        display: flex;
        align-items: flex-start;
        padding: 16rpx;
        margin-bottom: 12rpx;
        background: #fafafa;
        border-radius: 12rpx;

        .suggestion-icon {
          font-size: 32rpx;
          margin-right: 16rpx;
          margin-top: 4rpx;
        }

        .suggestion-content {
          flex: 1;

          .suggestion-title {
            font-size: 26rpx;
            color: @text-primary;
            font-weight: 500;
            display: block;
            margin-bottom: 8rpx;
          }

          .suggestion-desc {
            font-size: 22rpx;
            color: @text-secondary;
            line-height: 1.5;
            display: block;
          }
        }
      }
    }
  }
}
</style>