<script setup>
import { computed, ref } from 'vue';

// Props from parent component
const props = defineProps({
  year: {
    type: Number,
    required: true,
  },
  weekNumber: {
    type: Number,
    required: true,
    alias: 'week-number',
  },
});

// 模拟任务数据
const tasks = ref([
  {
    id: 1,
    name: '未来路摄像头抓图AI检查',
    date: '2025-12-15',
    status: 'processable',
    department: '管理部',
  },
  {
    id: 2,
    name: '龙飞街摄像头抓图AI检查',
    date: '2025-12-15',
    status: 'processable',
    department: '管理部',
  },
  {
    id: 3,
    name: '中州大道监控设备维护',
    date: '2025-12-15',
    status: 'not-started',
    department: '技术部',
  },
  {
    id: 4,
    name: '农业路交通流量分析',
    date: '2025-12-15',
    status: 'cancelled',
    department: '数据分析部',
  },
  {
    id: 5,
    name: '未来路摄像头抓图AI检查',
    date: '2025-12-16',
    status: 'processable',
    department: '管理部',
  },
  {
    id: 6,
    name: '龙飞街摄像头抓图AI检查',
    date: '2025-12-16',
    status: 'processable',
    department: '管理部',
  },
  {
    id: 7,
    name: '文化路监控系统升级',
    date: '2025-12-16',
    status: 'completed',
    department: '技术部',
  },
  {
    id: 8,
    name: '纬五路设备巡检',
    date: '2025-12-16',
    status: 'overdue',
    department: '运维部',
  },
  {
    id: 9,
    name: '未来路摄像头抓图AI检查',
    date: '2025-12-17',
    status: 'processable',
    department: '管理部',
  },
  {
    id: 10,
    name: '龙飞街摄像头抓图AI检查',
    date: '2025-12-17',
    status: 'processable',
    department: '管理部',
  },
  {
    id: 11,
    name: '经三路摄像头调试',
    date: '2025-12-17',
    status: 'not-started',
    department: '技术部',
  },
  {
    id: 12,
    name: '东风路设备更新计划',
    date: '2025-12-17',
    status: 'cancelled',
    department: '采购部',
  },
  {
    id: 13,
    name: '未来路摄像头抓图AI检查',
    date: '2025-12-18',
    status: 'processable',
    department: '管理部',
  },
  {
    id: 14,
    name: '龙飞街摄像头抓图AI检查',
    date: '2025-12-18',
    status: 'processable',
    department: '管理部',
  },
  {
    id: 15,
    name: '花园路监控中心改造',
    date: '2025-12-18',
    status: 'completed',
    department: '技术部',
  },
  {
    id: 16,
    name: '桐柏路设备维护',
    date: '2025-12-18',
    status: 'overdue',
    department: '运维部',
  },
  {
    id: 17,
    name: '未来路摄像头抓图AI检查',
    date: '2025-12-19',
    status: 'processable',
    department: '管理部',
  },
  {
    id: 18,
    name: '龙飞街摄像头抓图AI检查',
    date: '2025-12-19',
    status: 'processable',
    department: '管理部',
  },
  {
    id: 19,
    name: '大学路监控设备安装',
    date: '2025-12-19',
    status: 'not-started',
    department: '技术部',
  },
  {
    id: 20,
    name: '汝河路系统测试',
    date: '2025-12-19',
    status: 'cancelled',
    department: '质量部',
  },
  {
    id: 21,
    name: '未来路摄像头抓图AI检查',
    date: '2025-12-20',
    status: 'processable',
    department: '管理部',
  },
  {
    id: 22,
    name: '龙飞街摄像头抓图AI检查',
    date: '2025-12-20',
    status: 'processable',
    department: '管理部',
  },
  {
    id: 23,
    name: '航海路监控数据分析',
    date: '2025-12-20',
    status: 'completed',
    department: '数据分析部',
  },
  {
    id: 24,
    name: '长江路设备巡检',
    date: '2025-12-20',
    status: 'overdue',
    department: '运维部',
  },
  {
    id: 25,
    name: '未来路摄像头抓图AI检查',
    date: '2025-12-21',
    status: 'processable',
    department: '管理部',
  },
  {
    id: 26,
    name: '龙飞街摄像头抓图AI检查',
    date: '2025-12-21',
    status: 'processable',
    department: '管理部',
  },
  {
    id: 27,
    name: '嵩山路监控系统优化',
    date: '2025-12-21',
    status: 'not-started',
    department: '技术部',
  },
  {
    id: 28,
    name: '紫荆山路设备调试',
    date: '2025-12-21',
    status: 'completed',
    department: '技术部',
  },
  {
    id: 29,
    name: '商城路设备维护计划',
    date: '2025-12-21',
    status: 'overdue',
    department: '运维部',
  },
  {
    id: 30,
    name: '金水路交通管理培训',
    date: '2025-12-21',
    status: 'cancelled',
    department: '人力资源部',
  },
]);

// Calculate the 7 days of the specified week
const weekDays = computed(() => {
  const days = [];
  const firstDayOfWeek = new Date(props.year, 0, 1);
  const diff = firstDayOfWeek.getDay() === 0 ? 6 : firstDayOfWeek.getDay() - 1;

  firstDayOfWeek.setDate(
    firstDayOfWeek.getDate() - diff + (props.weekNumber - 1) * 7,
  );

  for (let i = 0; i < 7; i++) {
    const currentDate = new Date(firstDayOfWeek);
    currentDate.setDate(currentDate.getDate() + i);

    const dateStr = currentDate.getDate().toString();
    const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
    const weekday = weekdays[currentDate.getDay()];

    days.push({
      date: dateStr,
      weekday,
      fullDate: currentDate.toISOString().split('T')[0],
    });
  }

  return days;
});

// Get tasks for a specific day
const getTasksForDay = (date) => {
  return tasks.value.filter((task) => {
    if (typeof task.date === 'string') {
      const taskDate = new Date(task.date);
      const dayDate = new Date(props.year, 0, 1);
      const diff = dayDate.getDay() === 0 ? 6 : dayDate.getDay() - 1;
      dayDate.setDate(
        dayDate.getDate() -
          diff +
          (props.weekNumber - 1) * 7 +
          Number.parseInt(date) -
          1,
      );

      return taskDate.toDateString() === dayDate.toDateString();
    }
    return false;
  });
};

// Get task status class based on task properties
const getTaskStatusClass = (task) => {
  switch (task.status) {
    case 'cancelled':
    case 'not-started': {
      return 'not-started';
    }
    case 'completed': {
      return 'completed';
    }
    case 'overdue': {
      return 'overdue';
    }
    case 'processable': {
      return 'processable';
    }
    default: {
      return 'not-started';
    }
  }
};
</script>
<template>
<div class="week-schedule">
    <div class="status-legend">
      <div class="legend-item">
        <span class="status-indicator not-started"></span>
        <span>灰色任务名：任务未开始/任务取消</span>
      </div>
      <div class="legend-item">
        <span class="status-indicator processable"></span>
        <span>黑色任务名：任务可处理</span>
      </div>
      <div class="legend-item">
        <span class="status-indicator overdue"></span>
        <span>红色任务名：任务过期未完成</span>
      </div>
      <div class="legend-item">
        <span class="status-indicator completed"></span>
        <span>黑色任务名：任务已完成</span>
      </div>
    </div>
    
    <div class="week-container">
      <div 
        v-for="day in weekDays" 
        :key="day.date" 
        class="day-column"
      >
        <div class="day-header">
          <div class="date-weekday">{{ day.date }} {{ day.weekday }}</div>
        </div>
        <div class="tasks-container">
          <div 
            v-for="task in tasks" 
            :key="task.id" 
            class="task-item"
            :class="getTaskStatusClass(task)"
          >
            <div class="task-name">{{ task.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.week-schedule {
  width: 100%;
  overflow-x: auto;
}

.status-legend {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}

.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.status-indicator.not-started {
  background-color: #ccc;
}

.status-indicator.processable {
  background-color: #000;
}

.status-indicator.overdue {
  background-color: #ff0000;
}

.status-indicator.completed {
  background-color: #000;
  position: relative;
}

.status-indicator.completed::after {
  content: '';
  position: absolute;
  top: 50%;
  left: -2px;
  right: -2px;
  height: 1px;
  background-color: #fff;
  transform: rotate(45deg);
}

.week-container {
  display: flex;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.day-column {
  flex: 1;
  border-right: 1px solid #e0e0e0;
  min-width: 120px;
}

.day-column:last-child {
  border-right: none;
}

.day-header {
  background-color: #fafafa;
  padding: 8px;
  text-align: center;
  border-bottom: 1px solid #e0e0e0;
  font-weight: bold;
}

.date-weekday {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

.tasks-container {
  padding: 8px;
  min-height: 300px;
}

.task-item {
  margin-bottom: 6px;
  padding: 4px;
  transition: all 0.2s;
}

.task-item:hover {
  cursor: pointer;
}

.task-item.not-started:hover {
  cursor: default;
}

.task-name {
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

.task-assignee {
  font-size: 11px;
  color: #888;
  line-height: 1.3;
}

/* Task status styles */
.task-item.not-started {
  color: #999;
  pointer-events: none;
}

.task-item.processable {
  color: #000;
}

.task-item.overdue {
  color: #ff0000;
}

.task-item.completed {
  color: #000;
  text-decoration: line-through;
}
</style>
