<template>
    <view class="container">
        <!-- 任务列表 -->
        <view class="task-list">
            <view v-for="(item, index) in taskList" :key="index" class="task-card" @click="handleTaskClick(item)">
                <view class="task-header">
                    <text class="task-no">作业单号：{{ item.taskNo }}</text>
                </view>
                <view class="task-content">
                    <view class="flex-a mb-10">
                        <text class="label">仓库：</text>
                        <text class="value">{{ item.warehouse }}</text>
                    </view>
                    <view class="flex-a mb-10">
                        <text class="label">任务数量：</text>
                        <text class="value">{{ item.quantity }}</text>
                    </view>
                    <view class="flex-a">
                        <text class="label">作业状态：</text>
                        <text class="value">{{ item.status }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

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

// 搜索文本
const searchText = ref('')

// 任务列表数据
const taskList = ref([
    {
        taskNo: 'XJ20245451421',
        warehouse: '河南仓',
        quantity: 40,
        status: '待作业'
    },
    {
        taskNo: 'XJ20245451421',
        warehouse: '河南仓',
        quantity: 40,
        status: '待作业'
    }
])

// 搜索处理
const onSearch = () => {
    // 实现搜索逻辑
}

// 打开扫码
const openScan = () => {
    // #ifdef APP-PLUS || MP-WEIXIN
    uni.scanCode({
        success: (res) => {
            searchText.value = res.result
            onSearch()
        },
        fail: (err) => {
            uni.showToast({
                title: '扫码失败',
                icon: 'error'
            })
        }
    })
    // #endif

    // #ifdef H5
    uni.showToast({
        title: 'H5环境不支持扫码',
        icon: 'none'
    })
    // #endif
}

// 点击任务卡片
const handleTaskClick = (task) => {
    // 处理任务点击，可以跳转到详情页
    uni.navigateTo({
        url: `/pages/index/wms/task-detail?taskNo=${task.taskNo}`
    })
}
</script>

<style scoped>
.task-card {
    background-color: #ffffff;
    padding: 20rpx;
    margin-top: 16rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;
}

.task-no {
    font-size: 28rpx;
    font-weight: bold;
}
</style>