dtm_vue/src/views/lifecycle/lifecycleAnalysis/index.vue

<template>
  <div class="app-container">
    <div class="page-header">
      <div>
        <h2><i class="el-icon-data-analysis"></i> 生命周期分析</h2>
        <p class="page-desc">支持在 SKU 和 SPU 两个维度查看生命周期分析结果</p>
      </div>
      <div class="analysis-switch">
        <button
          v-for="item in analysisTabs"
          :key="item.value"
          type="button"
          class="switch-btn"
          :class="{ active: activeView === item.value }"
          @click="switchAnalysis(item.value)"
        >
          {{ item.label }}
        </button>
      </div>
    </div>

    <div class="upload-toolbar">
      <div class="toolbar-left">
        <el-upload
          ref="toolbarUpload"
          class="toolbar-upload"
          :limit="1"
          accept=".xlsx,.xls,.csv"
          :http-request="customUpload"
          :disabled="upload.isUploading"
          :on-change="handleFileChange"
          :before-upload="beforeUpload"
          :auto-upload="false"
          :show-file-list="false"
        >
          <el-button plain>上传文件</el-button>
        </el-upload>
        <el-button :loading="upload.isUploading" type="primary" @click="submitUpload">开始分析</el-button>
        <el-button type="success" :disabled="!hasResults" @click="exportResults">导出分析</el-button>
      </div>
      <div class="toolbar-status" v-if="upload.fileName">已上传：{{ upload.fileName }}</div>
      <div class="toolbar-status" v-else-if="upload.pendingFileName">已选择：{{ upload.pendingFileName }}</div>
      <div class="toolbar-status muted" v-else>未上传</div>
    </div>

    <template v-if="hasResults && detail">
      <div class="bg-white rounded-xl p-6 mb-20 shadow-sm">
        <div class="flex flex-wrap items-center justify-between gap-4 mb-6">
          <div class="flex items-center gap-3">
            <label class="text-sm font-medium text-gray-700">选择{{ currentConfig.entityName }}:</label>
            <select
              v-model="selectedValue"
              class="border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent shadow-sm entity-select"
            >
              <option v-for="item in entityOptions" :key="item" :value="item">{{ item }}</option>
            </select>
          </div>

          <div class="flex items-center gap-2">
            <span class="text-sm font-medium text-gray-700">当前阶段:</span>
            <span class="px-3 py-1 bg-gradient-to-r from-yellow-100 to-amber-100 text-yellow-800 rounded-full text-sm font-medium flex items-center gap-2">
              {{ currentStage }}
            </span>
          </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
          <div class="p-4 border border-gray-200 rounded-lg bg-gray-50">
            <p class="text-xs text-gray-500 uppercase tracking-wide">{{ currentConfig.entityDisplayLabel }}</p>
            <p class="text-lg font-medium text-gray-800 truncate">{{ selectedValue }}</p>
          </div>
          <div class="p-4 border border-gray-200 rounded-lg bg-gray-50">
            <p class="text-xs text-gray-500 uppercase tracking-wide">生命周期完整性</p>
            <p class="text-lg font-medium" :class="detail && detail.is_complete ? 'text-green-700' : 'text-orange-600'">
              {{ detail && detail.is_complete ? '完整' : '不完整' }}
              <span v-if="detail && detail.completeness_score != null" class="ml-2 text-sm text-gray-500">
                (得分: {{ detail.completeness_score }}/100)
              </span>
            </p>
          </div>
          <div class="p-4 border border-gray-200 rounded-lg bg-gray-50">
            <p class="text-xs text-gray-500 uppercase tracking-wide">总销售额</p>
            <p class="text-lg font-medium text-gray-800">{{ formatCurrency(totalRevenue) }}</p>
          </div>
          <div class="p-4 border border-gray-200 rounded-lg bg-gray-50">
            <p class="text-xs text-gray-500 uppercase tracking-wide">总销量</p>
            <p class="text-lg font-medium text-gray-800">{{ totalQty }}</p>
          </div>
        </div>
      </div>

      <div class="bg-white rounded-xl p-6 mb-20 shadow-sm">
        <div class="flex justify-between items-center mb-6">
          <h3 class="text-lg font-semibold text-gray-800">{{ currentConfig.entityName }}生命周期趋势图</h3>
          <div class="flex items-center gap-3">
            <div class="flex items-center gap-2">
              <span class="w-3 h-3 rounded-full bg-blue-500"></span>
              <span class="text-sm text-gray-600">销售额</span>
            </div>
            <div class="flex items-center gap-2">
              <span class="w-3 h-3 rounded-full bg-gray-500"></span>
              <span class="text-sm text-gray-600">销量</span>
            </div>
          </div>
        </div>
        <div class="h-96">
          <canvas ref="lifeCycleTrendRef"></canvas>
        </div>
        <div class="mt-4 space-y-2">
          <div v-if="detail && detail.is_complete" class="text-sm">
            <span :class="hasFourStages ? 'text-green-700 font-medium' : 'text-red-600 font-medium'">
              <i :class="hasFourStages ? 'fa fa-check-circle' : 'fa fa-exclamation-triangle'" class="mr-1"></i>
              {{ hasFourStages ? '阶段划分完整：已包含引入/成长/成熟/衰退四个阶段' : '阶段划分不完整：未包含所有四个标准阶段' }}
            </span>
          </div>
          <div v-if="detail && !detail.is_complete && detail.completeness_score != null" class="text-sm text-orange-600">
            <i class="fa fa-info-circle mr-1"></i>
            不完整生命周期{{ currentConfig.entityName }} - 完整性评估得分：{{ detail.completeness_score }}/100（需要达到 80 分以上才能被评为完整周期）
          </div>
        </div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-20">
        <div class="bg-white rounded-xl p-6 shadow-sm space-y-6">
          <h3 class="text-lg font-semibold text-gray-800">基本指标</h3>
          <div>
            <div class="flex justify-between mb-2">
              <span class="text-sm text-gray-500">总销售额</span>
              <span class="text-sm font-medium text-gray-800">{{ formatCurrency(totalRevenue) }}</span>
            </div>
            <div class="progress-bar"><div class="progress-value bg-blue-500" :style="{ width: revenuePct + '%' }"></div></div>
          </div>
          <div>
            <div class="flex justify-between mb-2">
              <span class="text-sm text-gray-500">总销量</span>
              <span class="text-sm font-medium text-gray-800">{{ totalQty }}</span>
            </div>
            <div class="progress-bar"><div class="progress-value bg-gray-500" :style="{ width: qtyPct + '%' }"></div></div>
          </div>
          <div class="grid grid-cols-2 gap-4 pt-2">
            <div class="p-4 border border-gray-200 rounded-lg bg-gray-50">
              <p class="text-xs text-gray-500 uppercase tracking-wide">峰值销售额</p>
              <p class="text-lg font-medium text-gray-800">{{ formatCurrency(detail && detail.peak_revenue) }}</p>
              <p class="text-xs text-gray-400 mt-1">{{ formatDate(detail && detail.peak_revenue_date) }}</p>
            </div>
            <div class="p-4 border border-gray-200 rounded-lg bg-gray-50">
              <p class="text-xs text-gray-500 uppercase tracking-wide">峰值销量</p>
              <p class="text-lg font-medium text-gray-800">{{ detail && detail.peak_quantity != null ? detail.peak_quantity : '-' }}</p>
              <p class="text-xs text-gray-400 mt-1">{{ formatDate(detail && detail.peak_quantity_date) }}</p>
            </div>
          </div>
          <div class="p-4 border border-gray-200 rounded-lg bg-gray-50">
            <p class="text-xs text-gray-500 uppercase tracking-wide">当前阶段说明</p>
            <p class="text-sm text-gray-700">
              处于 <span class="font-medium">{{ currentStage }}</span>，已持续
              <span class="font-medium">{{ currentStageDurationDays }}</span> 天。
            </p>
            <p class="text-xs text-gray-600 mt-1">{{ detail && detail.details ? detail.details : '-' }}</p>
            <p v-if="detail && !detail.is_complete && detail.next_stage_prediction" class="text-xs text-blue-600 mt-1">
              下一阶段预测：{{ detail.next_stage_prediction }}
            </p>
          </div>
        </div>

        <div class="lg:col-span-2 bg-white rounded-xl p-6 shadow-sm">
          <h3 class="text-lg font-semibold text-gray-800 mb-6">阶段分析</h3>
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
              <thead>
                <tr>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">阶段</th>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">总销售额</th>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">销售额占比</th>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">总销量</th>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">销量占比</th>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日均销售额</th>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日均销量</th>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">持续天数</th>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">起止日期</th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
                <tr v-for="(stats, stage) in displayStageStats" :key="stage">
                  <td class="px-4 py-3 text-sm"><span class="lifecycle-stage" :class="stageClass(stage)">{{ stage }}</span></td>
                  <td class="px-4 py-3 text-sm font-medium text-gray-800">{{ formatCurrency(stats.totalRevenue) }}</td>
                  <td class="px-4 py-3 text-sm text-gray-700">{{ formatPercent(stats.revenuePercentage) }}</td>
                  <td class="px-4 py-3 text-sm font-medium text-gray-800">{{ stats.totalQuantity != null ? stats.totalQuantity : '-' }}</td>
                  <td class="px-4 py-3 text-sm text-gray-700">{{ formatPercent(stats.quantityPercentage) }}</td>
                  <td class="px-4 py-3 text-sm text-gray-700">{{ formatCurrency(stats.avgDailyRevenue) }}</td>
                  <td class="px-4 py-3 text-sm text-gray-700">{{ stats.avgDailyQuantity != null ? stats.avgDailyQuantity : '-' }}</td>
                  <td class="px-4 py-3 text-sm text-gray-700">{{ stats.durationDays }}</td>
                  <td class="px-4 py-3 text-xs text-gray-600">{{ formatDate(stats.startDate) }} ~ {{ formatDate(stats.endDate) }}</td>
                </tr>
              </tbody>
            </table>
          </div>

          <div class="mt-8">
            <div class="flex justify-between items-center mb-4">
              <h4 class="text-base font-semibold text-gray-800">阶段对比条形图</h4>
              <div class="text-xs text-gray-500">销售额/销量/持续天数</div>
            </div>
            <div class="h-64">
              <canvas ref="stageCompareRef"></canvas>
            </div>
          </div>
        </div>
      </div>

      <div class="bg-white rounded-xl p-6 mb-20 shadow-sm">
        <div class="flex justify-between items-center mb-6">
          <h3 class="text-lg font-semibold text-gray-800">完整性评估细项</h3>
          <div class="text-sm" :class="detail && detail.is_complete ? 'text-green-600' : 'text-orange-600'">
            总分 {{ detail && detail.completeness_score != null ? detail.completeness_score : 0 }}/100
            <span class="ml-2">{{ detail && detail.is_complete ? '(已达完整标准 80 分)' : '(未达完整标准)' }}</span>
          </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          <div
            v-for="item in breakdownItems"
            :key="item.key"
            class="flex items-center justify-between border border-gray-200 rounded-lg px-4 py-3 bg-gray-50"
          >
            <div class="flex items-center gap-3">
              <span :class="item.hit ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'" class="px-3 py-1 rounded-full text-xs font-medium">
                {{ item.hit ? '命中' : '未命中' }}
              </span>
              <span class="text-sm text-gray-800">{{ item.label }}</span>
            </div>
            <span class="text-xs text-gray-500 font-medium">权重 {{ item.weight }}</span>
          </div>
        </div>
      </div>
    </template>

    <div v-else class="empty-state shadow-sm">
      <i class="el-icon-upload2"></i>
      <p>暂无{{ currentConfig.entityName }}生命周期分析结果，请先上传文件并开始分析。</p>
    </div>
  </div>
</template>

<script>
import { analyzeFile, analyzeSpuFile, getResults, getSpuResults } from '@/api/lifecycle'
import { Chart } from 'chart.js'
import { formatCurrency, formatDate } from '../../../utils/format'

const STORAGE_KEY = 'lifecycle_analysis_active_view'
const CACHE_CONFIG = {
  sku: {
    resultsKey: 'analysis_results',
    selectedKey: 'analysis_selectedSku'
  },
  spu: {
    resultsKey: 'spu_analysis_results',
    selectedKey: 'spu_analysis_selectedSpu'
  }
}
const stageOrder = ['引入期', '成长期', '成熟期', '衰退期']
const breakdownMapping = [
  { key: 'sufficient_time', label: '时间长度≥120天' },
  { key: 'reasonable_peak_position', label: '峰值位置25%-75%' },
  { key: 'significant_growth', label: '显著增长（额≥100% 或 量≥80%）' },
  { key: 'noticeable_decline', label: '明显衰退（额≤-35% 或 量≤-30%）' },
  { key: 'has_lifecycle_shape', label: '生命周期形状（额CV≥0.3 且 量CV≥0.25）' },
  { key: 'peak_significance', label: '峰值显著性（≥均值1.8x）' },
  { key: 'data_quality_check', label: '数据质量（长度≥120，峰值>0，增/退均出现）' },
  { key: 'cycle_completeness', label: '周期完整性（时间/峰值/增长/衰退/形状）' },
  { key: 'trend_consistency', label: '趋势一致性（增差≤0.8 或 退差≤0.4 或同向）' }
]

const ANALYSIS_CONFIG = {
  sku: {
    label: 'SKU分析',
    entityName: 'SKU',
    entityDisplayLabel: 'SKU编码',
    maxSizeMB: 300,
    exportPrefix: 'sku_lifecycle_results',
    fetchResults: getResults,
    analyze: analyzeFile
  },
  spu: {
    label: 'SPU分析',
    entityName: 'SPU',
    entityDisplayLabel: 'SPU名称',
    maxSizeMB: 500,
    exportPrefix: 'spu_lifecycle_results',
    fetchResults: getSpuResults,
    analyze: analyzeSpuFile
  }
}

function loadCachedAnalysis(view) {
  const config = CACHE_CONFIG[view]
  try {
    const rawResults = localStorage.getItem(config.resultsKey)
    return {
      results: rawResults ? JSON.parse(rawResults) : {},
      selected: localStorage.getItem(config.selectedKey) || ''
    }
  } catch (e) {
    return { results: {}, selected: '' }
  }
}

function createUploadState() {
  return {
    isUploading: false,
    fileName: '',
    pendingFileName: '',
    ignoreFileChange: false
  }
}

export default {
  name: 'LifecycleAnalysis',
  data() {
    return {
      activeView: localStorage.getItem(STORAGE_KEY) === 'spu' ? 'spu' : 'sku',
      trendChart: null,
      stageCompareChart: null,
      cache: {
        sku: loadCachedAnalysis('sku'),
        spu: loadCachedAnalysis('spu')
      },
      uploads: {
        sku: createUploadState(),
        spu: createUploadState()
      }
    }
  },
  computed: {
    analysisTabs() {
      return [
        { label: 'SKU分析', value: 'sku' },
        { label: 'SPU分析', value: 'spu' }
      ]
    },
    currentConfig() {
      return ANALYSIS_CONFIG[this.activeView]
    },
    upload() {
      return this.uploads[this.activeView]
    },
    currentCache() {
      return this.cache[this.activeView] || { results: {}, selected: '' }
    },
    results() {
      return this.currentCache.results || {}
    },
    hasResults() {
      return Object.keys(this.results || {}).length > 0
    },
    selectedValue: {
      get() {
        return this.currentCache.selected || ''
      },
      set(value) {
        this.setSelectedValue(value)
      }
    },
    entityOptions() {
      return Object.keys(this.results || {}).filter(key => key !== '_analysis_summary_')
    },
    detail() {
      return (this.results && this.selectedValue && this.results[this.selectedValue]) || null
    },
    currentStage() {
      return (this.detail && this.detail.current_stage) || '-'
    },
    currentStageDurationDays() {
      const stats = (this.detail && this.detail.stage_statistics) || {}
      const currentStage = this.detail && this.detail.current_stage
      if (currentStage && stats[currentStage] && stats[currentStage].durationDays != null) {
        return stats[currentStage].durationDays
      }
      return '-'
    },
    stageStats() {
      return (this.detail && this.detail.stage_statistics) || {}
    },
    displayStageStats() {
      const detail = this.detail || {}
      const stats = this.stageStats || {}
      const revenue = detail.revenue_series || detail.smoothed_revenue || []
      const qty = detail.quantity_series || detail.smoothed_quantity || []
      const rawDates = detail.date_series || []
      const labels = rawDates.map(date => formatDate(date))

      if (detail.is_complete) {
        const boundaries = (detail.stage_boundaries || []).map(item => formatDate(item.date))
        const indices = boundaries
          .map(date => labels.indexOf(date))
          .filter(index => index >= 0)
          .sort((a, b) => a - b)

        if (indices.length >= 3) {
          const ranges = [
            { name: stageOrder[0], start: 0, end: indices[0] },
            { name: stageOrder[1], start: indices[0], end: indices[1] },
            { name: stageOrder[2], start: indices[1], end: indices[2] },
            { name: stageOrder[3], start: indices[2], end: labels.length - 1 }
          ]
          const totalRevenue = revenue.reduce((sum, value) => sum + (Number(value) || 0), 0)
          const totalQty = qty.reduce((sum, value) => sum + (Number(value) || 0), 0)
          const built = {}

          ranges.forEach(range => {
            const revenueSum = revenue.slice(range.start, range.end + 1).reduce((sum, value) => sum + (Number(value) || 0), 0)
            const qtySum = qty.slice(range.start, range.end + 1).reduce((sum, value) => sum + (Number(value) || 0), 0)
            const days = Math.max(0, range.end - range.start + 1)

            built[range.name] = {
              totalRevenue: revenueSum,
              revenuePercentage: totalRevenue ? revenueSum / totalRevenue * 100 : 0,
              totalQuantity: qtySum,
              quantityPercentage: totalQty ? qtySum / totalQty * 100 : 0,
              avgDailyRevenue: days ? revenueSum / days : 0,
              avgDailyQuantity: days ? qtySum / days : 0,
              durationDays: days,
              startDate: rawDates[range.start],
              endDate: rawDates[range.end]
            }
          })

          return built
        }

        if (stageOrder.every(stage => stats[stage])) {
          return stats
        }
      }

      const actual = {}
      const keys = stageOrder.filter(stage => stats[stage]).concat(Object.keys(stats).filter(stage => stageOrder.indexOf(stage) === -1))

      keys.forEach(key => {
        const value = stats[key] || {}
        let duration = value.durationDays
        const startIndex = labels.indexOf(formatDate(value.startDate))
        const endIndex = labels.indexOf(formatDate(value.endDate))
        if (startIndex >= 0 && endIndex >= 0 && endIndex >= startIndex) {
          duration = Math.max(0, endIndex - startIndex + 1)
        }
        actual[key] = Object.assign({}, value, { durationDays: duration })
      })

      return actual
    },
    breakdownItems() {
      const detail = this.detail || {}
      const completionDetails = detail.completion_details || {}
      return breakdownMapping.map(item => {
        const current = completionDetails[item.key] || {}
        return {
          key: item.key,
          label: item.label,
          hit: !!current.hit,
          weight: current.weight != null ? current.weight : '-'
        }
      })
    },
    hasFourStages() {
      return stageOrder.every(stage => !!this.stageStats[stage])
    },
    totalRevenue() {
      if (this.detail && this.detail.total_revenue != null) return this.detail.total_revenue
      return Object.values(this.stageStats || {}).reduce((sum, value) => sum + (value.totalRevenue || 0), 0)
    },
    totalQty() {
      if (this.detail && this.detail.total_quantity != null) return this.detail.total_quantity
      return Object.values(this.stageStats || {}).reduce((sum, value) => sum + (value.totalQuantity || 0), 0)
    },
    revenuePct() {
      return 100
    },
    qtyPct() {
      return 100
    }
  },
  mounted() {
    this.initCurrentView()
  },
  beforeDestroy() {
    this.destroyCharts()
  },
  watch: {
    activeView() {
      localStorage.setItem(STORAGE_KEY, this.activeView)
      this.resetUploaderSelection()
      this.initCurrentView()
    },
    detail() {
      this.$nextTick(() => {
        this.renderTrend()
        this.renderStageCompare()
      })
    },
    results() {
      this.ensureCurrentSelection()
    }
  },
  methods: {
    formatCurrency,
    formatDate,
    switchAnalysis(view) {
      if (view === this.activeView) return
      this.activeView = view
    },
    initCurrentView() {
      if (!this.hasResults) {
        this.getList()
        return
      }

      this.ensureCurrentSelection()
      this.$nextTick(() => {
        this.renderTrend()
        this.renderStageCompare()
      })
    },
    getCurrentUploadState() {
      return this.uploads[this.activeView]
    },
    persistCurrentCache() {
      const config = CACHE_CONFIG[this.activeView]
      const cache = this.currentCache
      try {
        localStorage.setItem(config.resultsKey, JSON.stringify(cache.results || {}))
        localStorage.setItem(config.selectedKey, cache.selected || '')
      } catch (e) {}
    },
    setCurrentResults(results) {
      this.$set(this.cache, this.activeView, Object.assign({}, this.currentCache, {
        results: results || {}
      }))
      this.persistCurrentCache()
    },
    setSelectedValue(value) {
      this.$set(this.cache, this.activeView, Object.assign({}, this.currentCache, {
        selected: value || ''
      }))
      this.persistCurrentCache()
    },
    extractResultsPayload(response) {
      if (!response) return null
      if (response.success && response.data) return response.data
      if (response.code === 200 && response.data) return response.data
      if (response.data && typeof response.data === 'object') return response.data
      if (!response.message && !response.msg && typeof response === 'object') return response
      return null
    },
    ensureCurrentSelection() {
      if (!this.hasResults) {
        this.selectedValue = ''
        this.destroyCharts()
        return
      }

      if (!this.selectedValue || !this.results[this.selectedValue]) {
        const first = this.pickFirstValue(this.results)
        if (first) {
          this.selectedValue = first
        }
      }
    },
    getList() {
      this.currentConfig.fetchResults().then(response => {
        const results = this.extractResultsPayload(response)
        if (results) {
          this.setCurrentResults(results)
          const first = this.pickFirstValue(results)
          this.setSelectedValue(first)
          this.$nextTick(() => {
            this.renderTrend()
            this.renderStageCompare()
          })
        } else {
          this.setCurrentResults({})
        }
      }).catch(() => {
        this.setCurrentResults({})
        this.destroyCharts()
      })
    },
    handleFileChange(file, fileList) {
      const upload = this.getCurrentUploadState()
      if (upload.ignoreFileChange) return
      if (!fileList || fileList.length === 0 || !file || !file.raw) return

      upload.pendingFileName = file.name
      upload.fileName = ''
    },
    beforeUpload(file) {
      const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
        file.type === 'application/vnd.ms-excel' ||
        file.type === 'text/csv' ||
        file.name.endsWith('.xlsx') ||
        file.name.endsWith('.xls') ||
        file.name.endsWith('.csv')
      const isLtLimit = file.size / 1024 / 1024 < this.currentConfig.maxSizeMB

      if (!isExcel) {
        this.$modal.msgError('上传文件只能是 xlsx/xls/csv 格式')
        return false
      }
      if (!isLtLimit) {
        this.$modal.msgError(`上传文件大小不能超过 ${this.currentConfig.maxSizeMB}MB`)
        return false
      }
      return true
    },
    customUpload(options) {
      const file = options.file
      const upload = this.getCurrentUploadState()
      upload.isUploading = true

      this.currentConfig.analyze(file).then(response => {
        upload.isUploading = false
        if (response && response.success) {
          const results = response.data || {}
          this.setCurrentResults(results)
          const first = this.pickFirstValue(results)
          this.setSelectedValue(first)
          upload.fileName = upload.pendingFileName || file.name
          upload.pendingFileName = ''
          this.$modal.msgSuccess(`${this.currentConfig.entityName}生命周期分析完成`)
          this.$nextTick(() => {
            this.renderTrend()
            this.renderStageCompare()
          })
          options.onSuccess(response)
        } else {
          const message = response && (response.msg || response.message) ? response.msg || response.message : '分析失败'
          this.$modal.msgError(message)
          options.onError(new Error(message))
        }
      }).catch(error => {
        upload.isUploading = false
        const message = (error && error.message) || '文件上传失败，请重试'
        this.$modal.msgError(message)
        options.onError(error)
      }).finally(() => {
        this.resetUploaderSelection()
      })
    },
    submitUpload() {
      const target = this.$refs.toolbarUpload
      const fileList = target && target.uploadFiles ? target.uploadFiles : []
      if (!fileList || fileList.length === 0) {
        this.$modal.msgError('请选择要上传的文件')
        return
      }
      target.submit()
    },
    resetUploaderSelection() {
      if (!this.$refs.toolbarUpload) return
      const upload = this.getCurrentUploadState()
      upload.ignoreFileChange = true
      this.$refs.toolbarUpload.clearFiles()
      this.$nextTick(() => {
        upload.ignoreFileChange = false
      })
    },
    formatPercent(value) {
      if (value == null || Number.isNaN(value)) return '-'
      return `${Number(value).toFixed(1)}%`
    },
    stageClass(stage) {
      if (!stage) return ''
      if (stage.indexOf('引入') >= 0 || stage.indexOf('导入') >= 0) return 'intro'
      if (stage.indexOf('成长') >= 0) return 'growth'
      if (stage.indexOf('成熟') >= 0) return 'maturity'
      if (stage.indexOf('衰退') >= 0) return 'decline'
      return ''
    },
    normalizeDate(dateStr) {
      if (!dateStr) return ''
      const match = String(dateStr).match(/(\d{4}-\d{2}-\d{2})/)
      if (match) return match[1]
      const parts = String(dateStr).split('T')
      return parts[0].split(' ')[0]
    },
    destroyCharts() {
      if (this.trendChart) {
        this.trendChart.destroy()
        this.trendChart = null
      }
      if (this.stageCompareChart) {
        this.stageCompareChart.destroy()
        this.stageCompareChart = null
      }
    },
    renderTrend() {
      const canvas = this.$refs.lifeCycleTrendRef
      if (!canvas || !this.detail) {
        if (this.trendChart) {
          this.trendChart.destroy()
          this.trendChart = null
        }
        return
      }

      const detail = this.detail || {}
      const revenue = detail.smoothed_revenue || detail.revenue_series || []
      const qty = detail.smoothed_quantity || detail.quantity_series || []
      const rawDates = detail.date_series || []
      const labels = rawDates.map(date => formatDate(date))
      const boundaries = (detail.stage_boundaries || []).map(boundary => ({
        type: boundary.type,
        date: boundary.date ? formatDate(boundary.date) : null,
        index: boundary.index
      }))

      const stageColors = {
        [stageOrder[0]]: 'rgba(59,130,246,0.08)',
        [stageOrder[1]]: 'rgba(16,185,129,0.10)',
        [stageOrder[2]]: 'rgba(245,158,11,0.10)',
        [stageOrder[3]]: 'rgba(239,68,68,0.08)'
      }

      const segments = []
      const stagesMap = detail.stages_map || []

      if (stagesMap.length > 0 && stagesMap.length === labels.length) {
        let currentStage = stagesMap[0]
        let segmentStart = 0

        for (let i = 1; i < stagesMap.length; i++) {
          if (stagesMap[i] !== currentStage) {
            if (currentStage && stageColors[currentStage]) {
              segments.push({
                start: segmentStart,
                end: i - 1,
                stage: currentStage
              })
            }
            currentStage = stagesMap[i]
            segmentStart = i
          }
        }

        if (currentStage && stageColors[currentStage] && segmentStart < stagesMap.length) {
          segments.push({
            start: segmentStart,
            end: stagesMap.length - 1,
            stage: currentStage
          })
        }
      } else {
        const stats = this.displayStageStats || {}
        const orderedStages = stageOrder.filter(stage => stats[stage]).concat(Object.keys(stats).filter(stage => stageOrder.indexOf(stage) === -1))
        orderedStages.forEach(stage => {
          const startIndex = labels.indexOf(formatDate(stats[stage] && stats[stage].startDate))
          const endIndex = labels.indexOf(formatDate(stats[stage] && stats[stage].endDate))
          if (startIndex >= 0 && endIndex >= 0 && endIndex >= startIndex) {
            segments.push({ start: startIndex, end: endIndex, stage })
          }
        })
      }

      const peakRevenueDate = detail.peak_revenue_date
      const peakQtyDate = detail.peak_quantity_date
      let peakRevenueIndex = -1
      let peakQtyIndex = -1

      if (peakRevenueDate && rawDates.length > 0) {
        const targetDate = this.normalizeDate(peakRevenueDate)
        peakRevenueIndex = rawDates.findIndex(date => this.normalizeDate(date) === targetDate)
        if (peakRevenueIndex < 0 && detail.revenue_peak_idx != null && detail.revenue_peak_idx < rawDates.length) {
          peakRevenueIndex = detail.revenue_peak_idx
        }
      }

      if (peakQtyDate && rawDates.length > 0) {
        const targetDate = this.normalizeDate(peakQtyDate)
        peakQtyIndex = rawDates.findIndex(date => this.normalizeDate(date) === targetDate)
        if (peakQtyIndex < 0 && detail.quantity_peak_idx != null && detail.quantity_peak_idx < rawDates.length) {
          peakQtyIndex = detail.quantity_peak_idx
        }
      }

      const boundaryIndices = []
      boundaries.forEach(boundary => {
        let index = -1
        if (boundary.index != null && boundary.index >= 0 && boundary.index < rawDates.length) {
          index = boundary.index
        } else if (boundary.date) {
          const targetDate = this.normalizeDate(boundary.date)
          index = rawDates.findIndex(date => this.normalizeDate(date) === targetDate)
        }

        if (index >= 0 && index < rawDates.length) {
          boundaryIndices.push({ index, type: boundary.type })
        }
      })

      if (this.trendChart) this.trendChart.destroy()
      this.trendChart = new Chart(canvas, {
        type: 'line',
        data: {
          labels,
          datasets: [
            {
              label: '销售额',
              data: revenue,
              borderColor: '#3b82f6',
              backgroundColor: 'rgba(59,130,246,0.15)',
              lineTension: 0.25,
              pointRadius: 0,
              pointHoverRadius: 6,
              pointHoverBackgroundColor: '#3b82f6',
              pointHoverBorderColor: '#ffffff',
              pointHoverBorderWidth: 2
            },
            {
              label: '销量',
              data: qty,
              borderColor: '#64748b',
              backgroundColor: 'rgba(100,116,139,0.15)',
              lineTension: 0.25,
              pointRadius: 0,
              pointHoverRadius: 6,
              pointHoverBackgroundColor: '#64748b',
              pointHoverBorderColor: '#ffffff',
              pointHoverBorderWidth: 2
            }
          ]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          tooltips: {
            enabled: true,
            backgroundColor: 'rgba(0,0,0,0.8)',
            titleFontColor: '#ffffff',
            bodyFontColor: '#ffffff',
            borderColor: '#374151',
            borderWidth: 1,
            cornerRadius: 6,
            displayColors: true,
            callbacks: {
              title(context) {
                return `日期: ${context[0].label}`
              },
              label(context, data) {
                const datasetLabel = data.datasets[context.datasetIndex].label
                return `${datasetLabel}: ${Number(context.value).toLocaleString()}`
              }
            }
          },
          hover: {
            mode: 'index',
            intersect: false
          },
          scales: {
            xAxes: [{
              ticks: {
                maxRotation: 0,
                autoSkip: true,
                maxTicksLimit: 12,
                callback(value, index) {
                  return labels[index]
                }
              }
            }]
          }
        },
        plugins: [{
          id: 'stage-backgrounds',
          beforeDatasetsDraw(chart) {
            const ctx = chart.ctx
            const chartArea = chart.chartArea
            const xScale = chart.scales['x-axis-0']

            if (!segments.length) return

            ctx.save()
            segments.forEach(segment => {
              const startX = xScale.getPixelForValue(segment.start)
              const endX = xScale.getPixelForValue(segment.end)
              const color = stageColors[segment.stage] || 'rgba(0,0,0,0.04)'

              ctx.fillStyle = color
              ctx.fillRect(startX, chartArea.top, endX - startX, chartArea.bottom - chartArea.top)

              ctx.fillStyle = '#374151'
              ctx.font = 'bold 12px sans-serif'
              ctx.textAlign = 'left'
              ctx.fillText(segment.stage, startX + 4, chartArea.top + 14)
            })
            ctx.restore()
          }
        }, {
          id: 'stage-markers',
          afterDatasetsDraw(chart) {
            const ctx = chart.ctx
            const chartArea = chart.chartArea
            const xScale = chart.scales['x-axis-0']
            const yScale = chart.scales['y-axis-0']
            ctx.save()

            boundaryIndices.forEach(boundary => {
              const x = xScale.getPixelForValue(boundary.index)

              ctx.strokeStyle = '#ef4444'
              ctx.setLineDash([8, 4])
              ctx.lineWidth = 2
              ctx.beginPath()
              ctx.moveTo(x, chartArea.top)
              ctx.lineTo(x, chartArea.bottom)
              ctx.stroke()
              ctx.setLineDash([])

              const labelText = boundary.type
              const labelWidth = ctx.measureText(labelText).width + 8
              const labelHeight = 16
              const labelX = x - labelWidth / 2
              const labelY = chartArea.top + 8

              ctx.fillStyle = 'rgba(239, 68, 68, 0.1)'
              ctx.fillRect(labelX, labelY, labelWidth, labelHeight)

              ctx.strokeStyle = '#ef4444'
              ctx.lineWidth = 1
              ctx.strokeRect(labelX, labelY, labelWidth, labelHeight)

              ctx.fillStyle = '#ef4444'
              ctx.font = 'bold 11px sans-serif'
              ctx.textAlign = 'center'
              ctx.fillText(labelText, x, labelY + 12)
            })

            if (peakRevenueIndex >= 0 && peakRevenueIndex < revenue.length && revenue[peakRevenueIndex] != null) {
              const x = xScale.getPixelForValue(peakRevenueIndex)
              const y = yScale.getPixelForValue(revenue[peakRevenueIndex])

              ctx.fillStyle = '#dc2626'
              ctx.beginPath()
              ctx.arc(x, y, 5, 0, Math.PI * 2)
              ctx.fill()

              ctx.strokeStyle = '#ffffff'
              ctx.lineWidth = 2
              ctx.stroke()

              ctx.fillStyle = '#dc2626'
              ctx.font = 'bold 12px sans-serif'
              ctx.textAlign = 'left'
              ctx.fillText('销售额峰值', x + 10, y - 10)

              ctx.font = '11px sans-serif'
              ctx.fillText(`￥${Number(revenue[peakRevenueIndex]).toLocaleString()}`, x + 10, y + 2)
            }

            if (peakQtyIndex >= 0 && peakQtyIndex < qty.length && qty[peakQtyIndex] != null) {
              const x = xScale.getPixelForValue(peakQtyIndex)
              const y = yScale.getPixelForValue(qty[peakQtyIndex])

              ctx.fillStyle = '#2563eb'
              ctx.beginPath()
              ctx.arc(x, y, 5, 0, Math.PI * 2)
              ctx.fill()

              ctx.strokeStyle = '#ffffff'
              ctx.lineWidth = 2
              ctx.stroke()

              ctx.fillStyle = '#2563eb'
              ctx.font = 'bold 12px sans-serif'
              ctx.textAlign = 'left'
              ctx.fillText('销量峰值', x + 10, y - 10)

              ctx.font = '11px sans-serif'
              ctx.fillText(`${String(qty[peakQtyIndex]).toLocaleString()}件`, x + 10, y + 2)
            }
            ctx.restore()
          }
        }]
      })
    },
    renderStageCompare() {
      const canvas = this.$refs.stageCompareRef
      if (!canvas || !this.detail) {
        if (this.stageCompareChart) {
          this.stageCompareChart.destroy()
          this.stageCompareChart = null
        }
        return
      }

      const stats = this.displayStageStats || {}
      const labels = stageOrder.filter(stage => stats[stage]).concat(Object.keys(stats).filter(stage => stageOrder.indexOf(stage) === -1))
      const revenueData = labels.map(stage => (stats[stage] && stats[stage].totalRevenue) || 0)
      const qtyData = labels.map(stage => (stats[stage] && stats[stage].totalQuantity) || 0)
      const durationData = labels.map(stage => (stats[stage] && stats[stage].durationDays) || 0)

      if (this.stageCompareChart) this.stageCompareChart.destroy()
      this.stageCompareChart = new Chart(canvas, {
        type: 'bar',
        data: {
          labels,
          datasets: [
            { label: '销售额', data: revenueData, backgroundColor: 'rgba(59,130,246,0.7)' },
            { label: '销量', data: qtyData, backgroundColor: 'rgba(16,185,129,0.7)' },
            { label: '持续天数', data: durationData, backgroundColor: 'rgba(245,158,11,0.7)' }
          ]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            xAxes: [{ stacked: false }],
            yAxes: [{ ticks: { beginAtZero: true } }]
          }
        }
      })
    },
    formatUploadDate(date) {
      const target = date instanceof Date ? date : new Date(date)
      if (Number.isNaN(target.getTime())) return ''
      const year = target.getFullYear()
      const month = String(target.getMonth() + 1).padStart(2, '0')
      const day = String(target.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    exportResults() {
      if (!this.hasResults) {
        this.$modal.msgError('暂无可导出的分析结果')
        return
      }
      const payload = JSON.stringify(this.results || {}, null, 2)
      const blob = new Blob([payload], { type: 'application/json;charset=utf-8' })
      const url = URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      link.download = `${this.currentConfig.exportPrefix}_${this.formatUploadDate(new Date())}.json`
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      URL.revokeObjectURL(url)
    },
    pickFirstValue(results) {
      const keys = Object.keys(results || {})
      return keys.find(key => key !== '_analysis_summary_') || ''
    }
  }
}
</script>

<style scoped lang="scss">
.app-container {
  padding: 20px;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;

  h2 {
    font-size: 24px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 8px;

    i {
      margin-right: 8px;
      color: #409eff;
    }
  }

  .page-desc {
    color: #909399;
    font-size: 14px;
    margin: 0;
  }
}

.analysis-switch {
  display: inline-flex;
  padding: 4px;
  border-radius: 10px;
  background: #f3f6fb;
  border: 1px solid #dce6f2;
}

.switch-btn {
  border: none;
  background: transparent;
  color: #606266;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.switch-btn.active {
  background: #ffffff;
  color: #2563eb;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.12);
}

.mb-20 { margin-bottom: 20px; }

.upload-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #e6eaf2;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toolbar-upload ::v-deep .el-upload {
  display: inline-flex;
}

.toolbar-status {
  font-size: 13px;
  color: #16a34a;
  background: #f0fdf4;
  border: 1px solid #dcfce7;
  border-radius: 6px;
  padding: 6px 10px;
}

.toolbar-status.muted {
  color: #6b7280;
  background: #f8fafc;
  border-color: #e2e8f0;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 280px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e6eaf2;
  color: #909399;
  font-size: 14px;

  i {
    font-size: 40px;
    color: #c0c4cc;
  }

  p {
    margin: 0;
  }
}

.p-6 { padding: 24px; }
.p-4 { padding: 16px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.py-1 { padding-top: 4px; padding-bottom: 4px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.pt-2 { padding-top: 8px; }
.mb-2 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }
.mt-1 { margin-top: 4px; }
.mt-4 { margin-top: 16px; }
.mt-8 { margin-top: 32px; }
.ml-2 { margin-left: 8px; }
.mr-1 { margin-right: 4px; }

.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-8 { gap: 20px; }

.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg\:col-span-2 { grid-column: span 2 / span 2; }
.overflow-x-auto { overflow-x: auto; }
.min-w-full { min-width: 100%; }

.text-base { font-size: 16px; line-height: 1.5; }
.text-lg { font-size: 18px; line-height: 1.5; }
.text-sm { font-size: 14px; line-height: 1.5; }
.text-xs { font-size: 12px; line-height: 1.4; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.text-left { text-align: left; }
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.04em; }
.tracking-wider { letter-spacing: 0.06em; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.text-gray-800 { color: #303133; }
.text-gray-700 { color: #606266; }
.text-gray-600 { color: #909399; }
.text-gray-500 { color: #909399; }
.text-gray-400 { color: #9ca3af; }
.text-blue-600 { color: #2563eb; }
.text-green-700 { color: #15803d; }
.text-green-600 { color: #16a34a; }
.text-red-600 { color: #dc2626; }
.text-orange-600 { color: #ea580c; }
.text-yellow-800 { color: #92400e; }

.bg-white { background: #ffffff; }
.bg-gray-50 { background: #f9fafb; }
.bg-gray-500 { background: #6b7280; }
.bg-blue-500 { background: #3b82f6; }
.bg-green-100 { background: #dcfce7; }
.bg-red-100 { background: #fee2e2; }

.bg-gradient-to-r { background-image: linear-gradient(to right, var(--from-color), var(--to-color)); }
.from-yellow-100 { --from-color: #fef9c3; }
.to-amber-100 { --to-color: #fef3c7; }

.border { border-width: 1px; border-style: solid; }
.border-gray-200 { border-color: #e5e7eb; }
.border-gray-300 { border-color: #d1d5db; }
.rounded-xl { border-radius: 8px; }
.rounded-lg { border-radius: 10px; }
.rounded-full { border-radius: 9999px; }
.shadow-sm { border: 1px solid #e6eaf2; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); }

.h-96 { height: 400px; }
.h-64 { height: 256px; }
.w-3 { width: 12px; }
.h-3 { height: 12px; }

.space-y-2 > * + * { margin-top: 8px; }
.space-y-6 > * + * { margin-top: 24px; }
.divide-y > * + * { border-top: 1px solid #e5e7eb; }
.divide-gray-200 > * + * { border-top-color: #e5e7eb; }

.focus\:outline-none:focus { outline: none; }
.focus\:border-transparent:focus { border-color: transparent; }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35); }
.focus\:ring-blue-500:focus { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.45); }

.entity-select {
  min-width: 220px;
  background: #ffffff;
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

thead tr {
  background: #f8fafc;
}

thead th:first-child {
  border-top-left-radius: 8px;
}

thead th:last-child {
  border-top-right-radius: 8px;
}

@media (max-width: 767px) {
  .page-header,
  .upload-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .analysis-switch,
  .toolbar-left {
    width: 100%;
  }

  .switch-btn {
    flex: 1;
  }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.progress-bar { height: 8px; background: #f3f4f6; border-radius: 999px; overflow: hidden; }
.progress-value { height: 100%; border-radius: 999px; }

.lifecycle-stage { padding: 2px 8px; border-radius: 999px; font-size: 12px; }
.lifecycle-stage.intro { background: #dbeafe; color: #1e40af; }
.lifecycle-stage.growth { background: #dcfce7; color: #166534; }
.lifecycle-stage.maturity { background: #fef3c7; color: #92400e; }
.lifecycle-stage.decline { background: #fee2e2; color: #991b1b; }
</style>