<template>
  <view class="app-container pb-20">
    <TopBar title="明日任务" show-back />
    
    <view class="px-4 mt-3">
      <view v-if="taskStore.loading" class="py-10 text-center">
        <text class="text-gray-400">加载中...</text>
      </view>
      
      <view v-else-if="tomorrowTasks.length === 0">
        <EmptyState message="暂无明日任务" />
      </view>
      
      <uni-list v-else border>
        <uni-list-item 
          v-for="task in tomorrowTasks" 
          :key="task.id"
          :title="task.projectName"
          :note="task.address"
          :right-text="task.scheduleTime"
          show-arrow
          @click="goToDetail(task.id)"
        >
          <template #header>
            <view class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center mr-3">
              <text class="uni-icons uniui-calendar-filled text-blue-500"></text>
            </view>
          </template>
        </uni-list-item>
      </uni-list>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useTaskStore } from '../../stores/task'
import TopBar from '../../components/common/TopBar.vue'
import EmptyState from '../../components/common/EmptyState.vue'
import UniList from '../../components/uni-list/uni-list.vue'
import UniListItem from '../../components/uni-list/uni-list-item.vue'

const taskStore = useTaskStore()

const tomorrowTasks = computed(() => {
  const tomorrow = new Date()
  tomorrow.setDate(tomorrow.getDate() + 1)
  const tomorrowStr = tomorrow.toISOString().split('T')[0]
  return taskStore.tasks.filter(t => t.scheduleDate === tomorrowStr)
})

function goToDetail(taskId: string) {
  taskStore.setCurrentTask(taskId)
  uni.navigateTo({ url: '/subPackages/pages-construction/taskDetail' })
}

onMounted(() => {
  taskStore.fetchTasks()
})
</script>
