<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="reminderTasks.length === 0">
        <EmptyState message="暂无任务提醒" />
      </view>
      
      <view v-else class="gap-y-3">
        <uni-card 
          v-for="task in reminderTasks" 
          :key="task.id"
          :title="task.projectName"
          icon="uniui-notification-filled"
          extra="待确认"
          extra-color="#ff3b30"
          @click="goToDetail(task.id)"
        >
          <view class="text-sm text-gray-500 mb-1">
            <text class="uni-icons uniui-location-filled text-gray-400 mr-1"></text>
            {{ task.address }}
          </view>
          <view class="text-sm text-gray-500 mb-2">
            <text class="uni-icons uniui-calendar-filled text-gray-400 mr-1"></text>
            预计: {{ task.scheduleDate }} {{ task.scheduleTime }}
          </view>
          
          <template #footer>
            <view class="flex gap-2">
              <button class="flex-1 py-2 bg-blue-500 text-white text-xs rounded-lg" @click.stop="confirmTask(task.id)">
                <text class="uni-icons uniui-checkmarkempty mr-1"></text>
                确认
              </button>
              <button class="flex-1 py-2 bg-gray-200 text-gray-600 text-xs rounded-lg" @click.stop="rejectTask(task.id)">
                <text class="uni-icons uniui-close mr-1"></text>
                拒绝
              </button>
            </view>
          </template>
        </uni-card>
      </view>
    </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 UniCard from '../../components/uni-card/uni-card.vue'

const taskStore = useTaskStore()

const reminderTasks = computed(() => {
  return taskStore.tasks.filter(t => t.status === 'pending')
})

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

function confirmTask(taskId: string) {
  uni.showModal({
    title: '确认任务',
    content: '确认接受此任务吗？',
    success: (res) => {
      if (res.confirm) {
        uni.showToast({ title: '已确认', icon: 'success' })
      }
    },
  })
}

function rejectTask(taskId: string) {
  uni.showModal({
    title: '拒绝任务',
    content: '确定要拒绝此任务吗？',
    success: (res) => {
      if (res.confirm) {
        uni.showToast({ title: '已拒绝', icon: 'none' })
      }
    },
  })
}

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