<script setup lang="ts">
import WorkbenchModuleCard from './workbench-module-card.vue';

defineOptions({ name: 'WorkbenchMyWeekWorklog' });

interface Props {
  editing?: boolean;
  collapsed?: boolean;
}
withDefaults(defineProps<Props>(), { editing: false, collapsed: false });
defineEmits<{ (e: 'hide'): void; (e: 'toggle-collapse'): void }>();

const days = ['周一', '周二', '周三', '周四', '周五', '今日'];
const hoursPerDay = [4, 7, 6, 8, 7.5, 0]; // 今日为 0（未填报）
const total = hoursPerDay.reduce((s, h) => s + h, 0);
const target = 40;
const todayProgress = 32.5; // 截至当前小时数（含历史 + 今日已提交部分）
const delta = todayProgress - target * 0.75; // 目标按周 75% 进度
const deltaText = delta >= 0 ? `领先目标 +${delta.toFixed(1)}h` : `落后目标 ${delta.toFixed(1)}h`;
const deltaClass = delta >= 0 ? 'text-success' : 'text-danger';

// 折线坐标计算（基于 200x80 viewBox）
const padX = 10;
const padY = 10;
const width = 200;
const height = 80;
const innerW = width - padX * 2;
const innerH = height - padY * 2;
const maxY = 10;
const points = hoursPerDay.map((h, i) => {
  const x = padX + (i / (hoursPerDay.length - 1)) * innerW;
  const y = padY + innerH - (h / maxY) * innerH;
  return { x: Number(x.toFixed(1)), y: Number(y.toFixed(1)) };
});
const polyline = points.map(p => `${p.x},${p.y}`).join(' ');
</script>

<template>
  <WorkbenchModuleCard
    title="我的本周工时"
    icon="mdi:chart-line"
    :editing="editing"
    :collapsed="collapsed"
    @hide="$emit('hide')"
    @toggle-collapse="$emit('toggle-collapse')"
  >
    <svg viewBox="0 0 200 80" preserveAspectRatio="none" class="spark">
      <line x1="0" y1="20" x2="200" y2="20" stroke="var(--el-border-color-lighter)" stroke-dasharray="3,3" />
      <polyline :points="polyline" fill="none" stroke="var(--el-color-primary)" stroke-width="2" />
      <circle v-for="(p, i) in points" :key="i" :cx="p.x" :cy="p.y" r="3" fill="var(--el-color-primary)" />
    </svg>
    <div class="ww-x">
      <span v-for="d in days" :key="d">{{ d }}</span>
    </div>
    <div class="ww-foot">
      <span>
        累计
        <b>{{ todayProgress }}h</b>
        / {{ target }}h
      </span>
      <span :class="deltaClass">{{ deltaText }}</span>
    </div>
    <div class="ww-hint">本周总和（含今日）：{{ total.toFixed(1) }}h</div>
  </WorkbenchModuleCard>
</template>

<style scoped>
.spark {
  width: 100%;
  height: 80px;
  display: block;
}
.ww-x {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--el-text-color-secondary);
  margin-top: 4px;
}
.ww-foot {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-top: 10px;
}
.ww-foot b {
  font-weight: 700;
}
.ww-hint {
  margin-top: 4px;
  font-size: 11px;
  color: var(--el-text-color-placeholder);
}
.text-success {
  color: var(--el-color-success);
}
.text-danger {
  color: var(--el-color-danger);
}
</style>
