<template>
  <scroll-view class="todo-scroll" scroll-y>
    <view class="todo-container">
      <view class="todo-item" v-for="todo in todoList" :key="todo.id" @click="handleTodoClick(todo)">
        <view class="todo-checkbox" @click.stop="toggleTodo(todo)">
          <text class="check-icon" v-if="todo.completed">✓</text>
        </view>
        <view class="todo-content" :class="{ completed: todo.completed }">
          <text class="todo-title">{{ todo.title }}</text>
          <text class="todo-desc" v-if="todo.description">{{ todo.description }}</text>
          <text class="todo-time">{{ todo.time }}</text>
        </view>
        <view class="todo-priority" :class="`priority-${todo.priority}`">
          {{ priorityText[todo.priority] }}
        </view>
      </view>
    </view>
  </scroll-view>
</template>

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

const priorityText = {
  high: '高',
  medium: '中',
  low: '低'
};

const todoList = ref([
  {
    id: 1,
    title: '完成项目需求文档',
    description: '需要整理所有功能点并编写详细文档',
    time: '2025-10-15 14:00',
    completed: false,
    priority: 'high'
  },
  {
    id: 2,
    title: '参加团队会议',
    description: '讨论本周工作进度和下周计划',
    time: '2025-10-16 10:00',
    completed: false,
    priority: 'medium'
  },
  {
    id: 3,
    title: '代码审查',
    description: '审查同事提交的代码',
    time: '2025-10-17 16:00',
    completed: true,
    priority: 'low'
  }
]);

const toggleTodo = (todo) => {
  todo.completed = !todo.completed;
};

const handleTodoClick = (todo) => {
  // 将待办数据存储到本地，供详情页使用
  uni.setStorageSync('taskDetailData', {
    id: todo.id,
    name: todo.title || '待办任务名称',
    project: '待办事项',
    statusTags: todo.priority === 'high' ? ['紧急'] : todo.priority === 'medium' ? ['重要'] : ['普通'],
    deadline: todo.time || '2025-10-14 18:00',
    creator: '系统',
    responsible: '当前用户',
    publishTime: todo.time || '2025-10-17',
    content: todo.description || '任务内容任务。这里是详细的任务描述，可以包含多行文本。根据实际需求，这里可以展示任务的详细要求、步骤说明、注意事项等。任务内容应该清晰明了，便于负责人理解和执行。',
    submitRecords: []
  });
  
  uni.navigateTo({
    url: `/pages/task-detail/index?id=${todo.id}`
  });
};
</script>

<style lang="scss" scoped>
.todo-scroll {
  height: calc(100vh - var(--status-bar-height, 0) - 100px);

  padding-bottom: 100px;
}

.todo-container {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.todo-item {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: opacity 0.2s, transform 0.1s;
}

.todo-item:active {
  opacity: 0.8;
  transform: scale(0.98);
}

.todo-checkbox {
  width: 24px;
  height: 24px;
  border: 2px solid #ddd;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.todo-checkbox .check-icon {
  color: #2885ff;
  font-size: 16px;
  font-weight: bold;
}

.todo-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.todo-content.completed {
  opacity: 0.6;
}

.todo-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  text-decoration: none;
}

.todo-content.completed .todo-title {
  text-decoration: line-through;
}

.todo-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.5;
}

.todo-time {
  font-size: 12px;
  color: #999;
}

.todo-priority {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  flex-shrink: 0;
}

.priority-high {
  background: #ffebee;
  color: #f44336;
}

.priority-medium {
  background: #fff3e0;
  color: #ff9800;
}

.priority-low {
  background: #e8f5e9;
  color: #4caf50;
}
</style>

