<template>
  <div class="order-analysis-container">
    <div class="main-content">
      <div class="content-box">
        <div class="content-section">
          <h1 class="page-title">任务分析统计</h1>

          <!-- 数据概览卡片 -->
          <div class="card-grid">
            <div v-for="card in statCards" :key="card.label" class="stat-card" :class="card.colorClass">
              <div class="card-header">
                <span class="card-label">{{ card.label }}</span>
                <div class="card-icon">
                  <i :class="card.icon"></i>
                </div>
              </div>
              <div class="card-value">{{ stats[card.valueKey] }}{{ card.unit }}</div>
              <div class="card-footer">{{ card.footerText }}: {{ stats[card.footerValueKey] }}</div>
            </div>
          </div>

          <!-- 筛选条件区域 -->
          <div class="filter-section">
            <div class="filter-group">
              <div class="filter-item">
                <span class="filter-label">时间维度：</span>
                <div class="time-range-buttons">
                  <button 
                    v-for="range in timeRanges" 
                    :key="range.value"
                    :class="['time-button', { active: filter.timeRange === range.value }]"
                    @click="changeTimeRange(range.value)"
                  >
                    {{ range.label }}
                  </button>
                </div>
              </div>
              
              <div class="filter-item">
                <span class="filter-label">统计日期：</span>
                <div class="date-range-picker">
                  <el-date-picker
                    v-model="dateRange[0]"
                    :type="datePickerType"
                    :placeholder="startPlaceholder"
                    :format="dateFormat"
                    :value-format="dateValueFormat"
                    @change="handleStartDateChange"
                    class="single-date-picker"
                    :picker-options="startPickerOptions"
                  />
                  <span class="separator">-</span>
                  <el-date-picker
                    v-model="dateRange[1]"
                    :type="datePickerType"
                    :placeholder="endPlaceholder"
                    :format="dateFormat"
                    :value-format="dateValueFormat"
                    @change="handleEndDateChange"
                    class="single-date-picker"
                    :picker-options="endPickerOptions"
                  />
                </div>
              </div>
            </div>
            <el-button type="primary" :loading="loading" @click="refreshData">
              <i class="el-icon-refresh"></i>刷新
            </el-button>
          </div>

          <!-- 图表区域 -->
          <div class="chart-section">
            <div class="chart-box">
              <h3 class="chart-title">任务完成趋势分析</h3>
              <div class="chart-wrapper" ref="trendChartContainer"></div>
            </div>
          </div>

          <!-- 任务列表区域 -->
          <div class="task-list-section">
            <h3 class="section-title">任务详情列表</h3>
            <el-table
              :data="orderDetailList"
              :fit="true" 
              :cell-style="{ textAlign: 'center' }"
              border
              stripe
              class="task-detail-table"
              :header-cell-style="{background:'#f5f7fa', color:'#333'}"
            >
              <el-table-column prop="id" label="ID" min-width="150"  />
              <el-table-column prop="orderId" label="订单ID" min-width="150"  />
              <el-table-column prop="deviceId" label="设备ID" min-width="150"  show-overflow-tooltip />
              <el-table-column prop="operatorId" label="操作员ID" min-width="80"  />
              <el-table-column prop="createTime" label="创建时间" min-width="160"  />
              <el-table-column prop="orderItemStatus" label="状态" min-width="120" >
                <template #default="{row}">
                  <el-tag :type="getStatusTagType(row.orderItemStatus)">
                    {{ getStatusText(row.orderItemStatus) }}
                  </el-tag>
                </template>
              </el-table-column>
              <!-- <el-table-column prop="personCount" label="人数" min-width="100"  /> -->
              <el-table-column prop="cargoWeight" label="货物重量(kg)" min-width="80"  />
              <!-- <el-table-column 
                  label="操作" 
                  min-width="120"
                  fixed="right"
                /> -->
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getDailyOrderAnalysis, getMonthlyOrderAnalysis, getYearlyOrderAnalysis } from '@/api/analysis/taskAnalysis'

export default {
  name: 'taskAnalysis',
  data() {
    return {
      loading: false,
      trendChart: null,
      timeRanges: [
        { label: '日', value: 'day' },
        { label: '月', value: 'month' },
        { label: '年', value: 'year' }
      ],
      statCards: [
        { label: '任务完成率', valueKey: 'completionRate', unit: '%', footerText: '完成数/总数', footerValueKey: 'completedTaskCount', icon: 'el-icon-success', colorClass: 'green-card' },
        { label: '任务失败率', valueKey: 'failedRate', unit: '%', footerText: '失败数', footerValueKey: 'failedTaskCount', icon: 'el-icon-error', colorClass: 'red-card' },
        { label: '平均任务周期', valueKey: 'averageTaskCycle', unit: '分钟', footerText: '进行中', footerValueKey: 'processingTaskCount', icon: 'el-icon-time', colorClass: 'blue-card' },
        { label: '无人机使用率', valueKey: 'droneUsageRate', unit: '%', footerText: '未开始', footerValueKey: 'notStartedTaskCount', icon: 'el-icon-data-line', colorClass: 'purple-card' }
      ],
      filter: {
        timeRange: 'month',
        startDate: '',
        endDate: ''
      },
      dateRange: [],
      startPickerOptions: {
        disabledDate: time => this.dateRange[1] && time.getTime() > new Date(this.dateRange[1]).getTime()
      },
      endPickerOptions: {
        disabledDate: time => this.dateRange[0] && time.getTime() < new Date(this.dateRange[0]).getTime()
      },
      stats: {
        averageTaskCycle: 0,
        completedTaskCount: 0,
        completionRate: 0,
        droneUsageRate: 0,
        failedRate: 0,
        failedTaskCount: 0,
        notStartedTaskCount: 0,
        processingTaskCount: 0,
        totalTaskCount: 0
      },
      orderDetailList: [],
      chartData: {
        dates: [],
        completed: [],
        failed: []
      }
    }
  },
  computed: {
    datePickerType() {
      return this.filter.timeRange === 'year' ? 'year' : 
             this.filter.timeRange === 'month' ? 'month' : 'date'
    },
    dateFormat() {
      return this.filter.timeRange === 'year' ? 'yyyy年' : 
             this.filter.timeRange === 'month' ? 'yyyy年MM月' : 'yyyy年MM月dd日'
    },
    dateValueFormat() {
      return this.filter.timeRange === 'year' ? 'yyyy' : 
             this.filter.timeRange === 'month' ? 'yyyy-MM' : 'yyyy-MM-dd'
    },
    startPlaceholder() {
      return this.filter.timeRange === 'year' ? '开始年份' : 
             this.filter.timeRange === 'month' ? '开始月份' : '开始日期'
    },
    endPlaceholder() {
      return this.filter.timeRange === 'year' ? '结束年份' : 
             this.filter.timeRange === 'month' ? '结束月份' : '结束日期'
    }
  },
  mounted() {
    this.initDefaultDateRange()
    this.fetchData()
    this.initChart()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    if (this.trendChart) this.trendChart.dispose()
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    initDefaultDateRange() {
      const now = new Date()
      const year = now.getFullYear()
      const month = (now.getMonth() + 1).toString().padStart(2, '0')
      
      switch (this.filter.timeRange) {
        case 'year':
          this.dateRange = [`${year - 2}-01-01`, `${year}-12-31`]
          break
        case 'month':
          const startDate = new Date(year, now.getMonth() - 5, 1)
          const startMonth = `${startDate.getFullYear()}-${(startDate.getMonth() + 1).toString().padStart(2, '0')}`
          this.dateRange = [startMonth, `${year}-${month}`]
          break
        default:
          const endDay = now.toISOString().split('T')[0]
          const startDay = new Date()
          startDay.setDate(now.getDate() - 6)
          this.dateRange = [startDay.toISOString().split('T')[0], endDay]
      }
      
      this.filter.startDate = this.formatDateForApi(this.dateRange[0])
      this.filter.endDate = this.formatDateForApi(this.dateRange[1])
    },
    
    formatDateForApi(date) {
      if (!date) return ''
      const dateObj = new Date(date)
      
      if (this.filter.timeRange === 'year') return dateObj.getFullYear().toString()
      if (this.filter.timeRange === 'month') return `${dateObj.getFullYear()}-${(dateObj.getMonth() + 1).toString().padStart(2, '0')}`
      return date
    },
    
    async fetchData() {
      this.loading = true
      try {
        const params = { startDate: this.filter.startDate, endDate: this.filter.endDate }
        const apiMap = {
          day: getDailyOrderAnalysis,
          month: getMonthlyOrderAnalysis,
          year: getYearlyOrderAnalysis
        }
        const res = await apiMap[this.filter.timeRange](params)

        this.stats = {
          averageTaskCycle: res.averageTaskCycle || 0,
          completedTaskCount: res.completedTaskCount || 0,
          completionRate: res.completionRate || 0,
          droneUsageRate: res.droneUsageRate || 0,
          failedRate: res.failedRate || 0,
          failedTaskCount: res.failedTaskCount || 0,
          notStartedTaskCount: res.notStartedTaskCount || 0,
          processingTaskCount: res.processingTaskCount || 0,
          totalTaskCount: res.totalTaskCount || 0
        }

        this.orderDetailList = res.orderDetailList || []
        
        const keyMap = {
          day: { time: 'date', completed: 'dailyCompletedCount', failed: 'dailyFailedCount' },
          month: { time: 'month', completed: 'monthlyCompletedCount', failed: 'monthlyFailedCount' },
          year: { time: 'year', completed: 'yearlyCompletedCount', failed: 'yearlyFailedCount' }
        }
        const keys = keyMap[this.filter.timeRange]
        
        this.chartData = {
          dates: res.timeSeriesData.map(item => item[keys.time]),
          completed: res.timeSeriesData.map(item => item[keys.completed] || 0),
          failed: res.timeSeriesData.map(item => item[keys.failed] || 0)
        }
        
        this.updateChart()
      } catch (error) {
        console.error('获取数据失败:', error)
        this.$message.error('获取数据失败')
      } finally {
        this.loading = false
      }
    },
    
    initChart() {
      this.trendChart = echarts.init(this.$refs.trendChartContainer)
      this.updateChart()
    },
    
    updateChart() {
      if (!this.trendChart) return
      
      const option = {
        tooltip: {
          trigger: 'axis',
          formatter: params => {
            return `
              <div style="font-weight:bold;margin-bottom:5px">${params[0].axisValue}</div>
              <div style="display:flex;justify-content:space-between">
                <span style="color:#36a2eb">任务完成: ${params[0].value}次</span>
              </div>
              <div style="display:flex;justify-content:space-between">
                <span style="color:#ff6384">任务失败: ${params[1].value}次</span>
              </div>
            `
          }
        },
        legend: { data: ['任务完成', '任务失败'], right: 20, top: 0 },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.chartData.dates,
          axisLabel: { 
            rotate: this.chartData.dates.length > 10 ? 45 : 0,
            formatter: value => {
              if (this.filter.timeRange === 'day') return value.split('-').slice(1).join('-')
              if (this.filter.timeRange === 'month') return value.split('-')[1] + '月'
              return value + '年'
            }
          },
          name: this.filter.timeRange === 'day' ? '日期' : 
                this.filter.timeRange === 'month' ? '月份' : '年份',
          nameLocation: 'end',
        },
        yAxis: {
          type: 'value',
          name: '任务数量(次)',
          min: 0,
          max: Math.max(3, ...this.chartData.completed, ...this.chartData.failed) + 1,
          interval: 1,
          axisLabel: { formatter: value => Math.floor(value) === value ? value : '' }
        },
        series: [
          {
            name: '任务完成',
            type: 'line',
            smooth: true,
            lineStyle: { width: 3, color: '#36a2eb' },
            itemStyle: { color: '#36a2eb' },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(54, 162, 235, 0.5)' },
                { offset: 1, color: 'rgba(54, 162, 235, 0.1)' }
              ])
            },
            data: this.chartData.completed
          },
          {
            name: '任务失败',
            type: 'line',
            smooth: true,
            lineStyle: { width: 3, color: '#ff6384' },
            itemStyle: { color: '#ff6384' },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(255, 99, 132, 0.5)' },
                { offset: 1, color: 'rgba(255, 99, 132, 0.1)' }
              ])
            },
            data: this.chartData.failed
          }
        ]
      }
      
      this.trendChart.setOption(option)
    },
    
    changeTimeRange(range) {
      this.filter.timeRange = range
      this.initDefaultDateRange()
      this.refreshData()
    },
    
    handleStartDateChange(val) {
      if (!val || (this.dateRange[1] && new Date(val) > new Date(this.dateRange[1]))) {
        this.$message.warning('开始日期不能晚于结束日期')
        return
      }

      this.dateRange = [val, this.dateRange[1] || val]
      this.filter.startDate = this.formatDateForApi(val)
      this.filter.endDate = this.formatDateForApi(this.dateRange[1])
      this.refreshData()
    },
    
    handleEndDateChange(val) {
      if (!val || (this.dateRange[0] && new Date(val) < new Date(this.dateRange[0]))) {
        this.$message.warning('结束日期不能早于开始日期')
        return
      }

      this.dateRange = [this.dateRange[0] || val, val]
      this.filter.startDate = this.formatDateForApi(this.dateRange[0])
      this.filter.endDate = this.formatDateForApi(val)
      this.refreshData()
    },
    
    refreshData() {
      this.fetchData()
    },
    
    handleResize() {
      if (this.trendChart) this.trendChart.resize()
    },
    
    getStatusTagType(status) {
      const types = ['info', 'primary', 'success']
      return types[status] || 'info'
    },
    
    getStatusText(status) {
      const texts = ['未开始', '进行中', '已完成']
      return texts[status] || '未知状态'
    }
  }
}
</script>

<style scoped>
.order-analysis-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  font-family: 'Arial', sans-serif;
}

.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.content-box {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 24px;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.stat-card {
  padding: 12px;
  min-height: 60px;
  border-radius: 6px;
  transition: transform 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.stat-card:hover {
  transform: translateY(-5px);
}

.green-card { background: linear-gradient(to bottom right, #ecfdf5, white) }
.red-card { background: linear-gradient(to bottom right, #fff1f0, white) }
.blue-card { background: linear-gradient(to bottom right, #e6f7ff, white) }
.purple-card { background: linear-gradient(to bottom right, #f9f0ff, white) }

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.card-label {
  font-size: 14px;
  font-weight: 700;
}

.card-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.8);
}

.green-card .card-icon { color: #52c41a }
.red-card .card-icon { color: #ff4d4f }
.blue-card .card-icon { color: #1890ff }
.purple-card .card-icon { color: #722ed1 }

.card-value {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}

.card-footer {
  font-size: 11px;
  color: #666;
}

.filter-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 12px;
  background-color: #f9fafb;
  border-radius: 8px;
  flex-wrap: wrap;
  gap: 16px;
}

.filter-group {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.filter-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.filter-label {
  font-size: 14px;
  color: #666;
  margin-right: 12px;
}

.time-range-buttons {
  display: flex;
  gap: 8px;
}

.time-button {
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  background: #f5f7fa;
  cursor: pointer;
  font-size: 14px;
}

.time-button.active {
  background: #409eff;
  color: white;
  border-color: #409eff;
}

.date-range-picker {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chart-section {
  margin-bottom: 32px;
}

.chart-box {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  padding: 20px;
}

.chart-title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin-bottom: 16px;
}

.chart-wrapper {
  width: 100%;
  height: 400px;
}

.task-list-section {
  margin-bottom: 24px;
}

.task-detail-table {
  margin: 0 auto;
  table-layout: fixed;
}

.task-detail-table .el-table__header-wrapper th {
  background-color: #f5f7fa;
  font-weight: bold;
}

.task-detail-table .el-table__body td {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.task-detail-table .el-table__row td {
  padding: 8px 0;
}

.task-detail-table.el-table--fit {
  width: 100% !important;
}

.section-title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin-bottom: 16px;
}

@media (max-width: 1200px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
  
  .filter-section {
    flex-direction: column;
  }
  
  .filter-group, .time-range-buttons, .date-range-picker {
    width: 100%;
  }
  
  .filter-item {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>