<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getAllWorkInfoService } from '@/api/scbg.js'

// 查询表单数据
const formInline = ref({
    status: '',
    generalOrder: '',
    workerId: ''
})

// 工作信息数据
const workInfos = ref([])

// 统计数据
const statistics = ref({
    unstarted: 0,
    completed: 0,
    inProgress: 0
})

// 获取工作信息数据
const getWorkInfo = async () => {
    try {
        const result = await getAllWorkInfoService()
        workInfos.value = result.data
        
        // 计算统计数据
        statistics.value = workInfos.value.reduce((acc, curr) => {
            switch(curr.status) {
                case '未领取':
                    acc.unstarted++
                    break
                case '已完成':
                    acc.completed++
                    break
                case '进行中':
                    acc.inProgress++
                    break
            }
            return acc
        }, { unstarted: 0, completed: 0, inProgress: 0 })
    } catch (error) {
        console.error('获取数据失败:', error)
    }
}

// 查询方法
const onSubmit = () => {
    getWorkInfo()
}

// 操作方法
const handleApprove = (index: number, row: any) => {
    // 处理批准逻辑
    console.log('批准', row)
}

const handleReject = (index: number, row: any) => {
    // 处理驳回逻辑
    console.log('驳回', row)
}

// 页面加载时获取数据
onMounted(() => {
    getWorkInfo()
})

// 添加获取状态类型的方法
const getStatusType = (status) => {
    switch(status) {
        case '进行中':
            return 'success'  // 绿色
        case '已完成':
            return ''        // 默认蓝色
        case '未领取':
            return 'danger'  // 红色
        default:
            return 'info'
    }
}
</script>

<template>
    <h1>生产报工</h1>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="报工状态">
            <el-select
                v-model="formInline.status"
                placeholder="请选择报工状态"
                clearable
            >
                <el-option label="未领取" value="未领取" />
                <el-option label="进行中" value="进行中" />
                <el-option label="已完成" value="已完成" />
            </el-select>
        </el-form-item>
        <el-form-item label="总制令">
            <el-input v-model="formInline.generalOrder" placeholder="请输入总制令" clearable />
        </el-form-item>
        <el-form-item label="工号">
            <el-input v-model="formInline.workerId" placeholder="请输入工号" clearable />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <el-row :gutter="20" class="mb-4">
        <el-col :span="8">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>未领取订单数量</span>
                    </div>
                </template>
                <div class="text-item">
                    <span class="value">{{ statistics.unstarted }}</span>
                </div>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>已完成订单数量</span>
                    </div>
                </template>
                <div class="text-item">
                    <span class="value">{{ statistics.completed }}</span>
                </div>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <span>进行中订单数量</span>
                    </div>
                </template>
                <div class="text-item">
                    <span class="value">{{ statistics.inProgress }}</span>
                </div>
            </el-card>
        </el-col>
    </el-row>

    <el-table :data="workInfos" style="width: 100%">
        <el-table-column prop="generalOrder" label="总制令" />
        <el-table-column prop="divisionOrder" label="分制令" />
        <el-table-column prop="subordinateOrder" label="子制令" />
        <el-table-column prop="productName" label="产品名称" />
        <el-table-column prop="process" label="工序" />
        <el-table-column prop="teamName" label="班组" />
        <el-table-column prop="name" label="工人姓名" />
        <el-table-column prop="quantity" label="数量" />
        <el-table-column prop="status" label="状态">
            <template #default="scope">
                <el-tag 
                    :type="getStatusType(scope.row.status)"
                >
                    {{ scope.row.status }}
                </el-tag>
            </template>
        </el-table-column>
    </el-table>
</template>

<style scoped>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}

.text-item {
    text-align: center;
}

.value {
    font-size: 24px;
    font-weight: bold;
    color: var(--el-color-primary);
}
</style>