<template>
  <div>
    <div class="page-header">
      <h1>个人统计</h1>
      <p>查看您的工时分布与月度趋势</p>
    </div>

    <div class="stat-cards">
      <div class="stat-card purple">
        <div class="label">参与项目数</div>
        <div class="value">{{ stats.projects?.length || 0 }}<span class="unit">个</span></div>
      </div>
      <div class="stat-card green">
        <div class="label">累计总工时</div>
        <div class="value">{{ stats.total_hours || 0 }}<span class="unit">小时</span></div>
      </div>
    </div>

    <div class="content-card">
      <div class="card-title">
        <span>各项目工时明细</span>
        <div class="filter-bar" style="margin-bottom: 0;">
          <el-date-picker v-model="dateRange" type="daterange" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" size="default"
            @change="loadStats" />
        </div>
      </div>
      <el-table :data="stats.projects || []" stripe>
        <el-table-column prop="client_name" label="客户/项目" min-width="180" />
        <el-table-column prop="total_hours" label="总工时(h)" width="120" />
        <el-table-column prop="work_days" label="工作天数" width="110" />
        <el-table-column prop="first_date" label="首次填报" width="130" />
        <el-table-column prop="last_date" label="最近填报" width="130" />
      </el-table>
    </div>

    <div class="content-card">
      <div class="card-title">各项目工时对比</div>
      <div ref="chartRef" class="chart-container"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { rdApi } from '../../api'
import * as echarts from 'echarts'

const stats = ref({})
const chartRef = ref(null)
let chartInstance = null

const getRecentMonthRange = () => {
  const end = new Date()
  const start = new Date()
  start.setMonth(start.getMonth() - 1)
  const pad = (n) => String(n).padStart(2, '0')
  const format = (d) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
  return [format(start), format(end)]
}
const dateRange = ref(getRecentMonthRange())

async function loadStats() {
  const params = {}
  if (dateRange.value) {
    params.start_date = dateRange.value[0]
    params.end_date = dateRange.value[1]
  }
  const res = await rdApi.getStats(params)
  stats.value = res.data
  await nextTick()
  renderChart()
}

function renderChart() {
  if (!chartRef.value) return
  if (!chartInstance) chartInstance = echarts.init(chartRef.value, 'dark')
  const projects = stats.value.projects || []
  chartInstance.setOption({
    backgroundColor: 'transparent',
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
    xAxis: {
      type: 'category',
      data: projects.map(p => p.client_name),
      axisLabel: { color: '#94a3b8', interval: 0, rotate: 30 }
    },
    yAxis: { type: 'value', name: '工时(h)', axisLabel: { color: '#94a3b8' } },
    series: [{
      type: 'bar',
      barMaxWidth: 60,
      data: projects.map(p => p.total_hours),
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#6366f1' },
          { offset: 1, color: '#4338ca' }
        ]),
        borderRadius: [4, 4, 0, 0]
      }
    }]
  })
}

onMounted(loadStats)
</script>
