<template>
    <view class="accept page-common">
        <div class="card">
            <div class="card-header">
                <span class="title">任务信息</span>
            </div>
            <uni-forms :model="taskInfo" label-width="160rpx" :border="true">
                <uni-forms-item label="退料单位：" name="unitName">
                    <span style="height: 100%;display: flex;align-items: center;">{{ taskInfo.unitName }}</span>
                </uni-forms-item>
                <uni-forms-item label="退料工程：" name="proName">
                    <span style="height: 100%;display: flex;align-items: center;">{{ taskInfo.proName }}</span>
                </uni-forms-item>
                <uni-forms-item label="退料单号：" name="code">
                    <span style="height: 100%;display: flex;align-items: center;">{{ taskInfo.code }}</span>
                </uni-forms-item>
                <uni-forms-item label="制单人员：" name="backPerson">
                    <span style="height: 100%;display: flex;align-items: center;">{{ taskInfo.backPerson }}</span>
                </uni-forms-item>
                <uni-forms-item label="退料电话：" name="phone">
                    <span style="height: 100%;display: flex;align-items: center;">{{ taskInfo.phone }}</span>
                </uni-forms-item>
				<uni-forms-item label="创建人员：" name="backPerson">
                    <span style="height: 100%;display: flex;align-items: center;">{{ detailInfo.createBy }}</span>
                </uni-forms-item>
                <uni-forms-item label="创建时间：" name="phone">
                    <span style="height: 100%;display: flex;align-items: center;">{{ detailInfo.createTime }}</span>
                </uni-forms-item>
            </uni-forms>
        </div>
        <div class="card" style="margin-top: 20px;">
            <div>退料物资</div>
            <div style="width: 92%;height: auto;margin: 10px;">
                <uni-table border stripe emptyText="暂无更多数据" >
                    <!-- 表头行 -->
                    <uni-tr>
                        <uni-th width="100px" style="font-size: 24rpx;" align="center">类型名称</uni-th>
                        <uni-th width="100px" style="font-size: 24rpx;" align="center">规格型号</uni-th>
                        <uni-th width="80px" style="font-size: 24rpx;" align="center">在用数</uni-th>
                        <uni-th width="80px" style="font-size: 24rpx;" align="center">退料数</uni-th>
                        <!-- <uni-th width="100px" style="font-size: 24rpx;" align="center">外观</uni-th>  -->
                        <uni-th width="100px" style="font-size: 24rpx;" align="center">完好数量</uni-th> 
                        <uni-th width="100px" style="font-size: 24rpx;" align="center">不合格数量</uni-th>
                    </uni-tr>
                    <!-- 表格数据行 -->
                    <uni-tr v-for="(item,index) in typeList" :key="item.id">
                        <uni-td style="font-size: 24rpx;text-align: center;">{{item.typeName}}</uni-td>
                        <uni-td style="font-size: 24rpx;text-align: center;">{{item.typeModel}}</uni-td>
                        <uni-td style="font-size: 24rpx;text-align: center;">{{item.num}}</uni-td>
                        <uni-td style="font-size: 24rpx;text-align: center;">
                            <span>{{item.preNum}}</span> 
                        </uni-td>
                        <!-- <uni-td style="font-size: 24rpx;text-align: center;">
                            <span>{{item.apDetection}}</span> 
                        </uni-td> -->
                        <uni-td style="font-size: 24rpx;text-align: center;">
                            <span>{{item.goodNum}}</span> 
                        </uni-td>
                        <uni-td style="font-size: 24rpx;text-align: center;">
                            <span>{{item.badNum}}</span> 
                        </uni-td>
                    </uni-tr>
                </uni-table>
            </div>
        </div>

        <!-- <div class="btn"> -->
            <!-- <button class="btn-cont" @click="reject">取消</button> -->
            <!-- <button class="btn-cont">确认</button> -->
        <!-- </div> -->
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'  
import { getDetailsByIdApi } from '../../services/back.js';
const taskInfo = ref({})    
const rowData = ref({})     
const typeList = ref([])
const detailInfo = ref({})    
//获取明细
const getDetails = async () => {
	let param={
		parentId:rowData.value.parentId,
		typeId:rowData.value.typeId
	}
    const res = await getDetailsByIdApi(param)
	detailInfo.value=res.data[0]  
}
  

onLoad((options)=>{
	console.log(options)
	taskInfo.value = JSON.parse(options.taskInfo)
    console.log(taskInfo.value)
    rowData.value = JSON.parse(options.rowData)
    console.log(rowData.value)
    typeList.value = [rowData.value]
    console.log(typeList.value)
	getDetails()
                      
})
</script>

<style lang="scss">
.accept {
    padding: 24rpx;
    height: 100vh;
    word-break: break-all;
    background-color: #f7f8fa;
    display: flex;
    flex-direction: column;

    // 卡片样式
    .card {
        padding: 32rpx;
        background-color: #fff;
        border-radius: 20rpx;
        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
        margin-bottom: 24rpx;

        // 卡片标题
        > div:first-child {
            font-size: 32rpx;
            font-weight: 600;
            color: #262626;
            margin-bottom: 24rpx;
            position: relative;
            padding-left: 24rpx;

            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 6rpx;
                height: 28rpx;
                background: #3784fb;
                border-radius: 6rpx;
            }
        }

        // 表单样式
        :deep(.uni-forms) {
            .uni-forms-item {
                padding: 24rpx 0;
                margin-bottom: 0;
                border-bottom: 2rpx solid #f5f5f5;

                &:last-child {
                    border-bottom: none;
                }

                .uni-forms-item__label {
                    color: #8c8c8c;
                }

                span {
                    color: #262626;
                    font-size: 28rpx;
                }
            }
        }

        // // 表格区域
        // :deep(.uni-table) {
        //     margin: 24rpx -32rpx 0;
        //     width: calc(100% + 64rpx);
            
        //     .uni-table-tr {
        //         .uni-table-th {
        //             padding: 20rpx 16rpx;
        //             font-size: 26rpx;
        //             color: #8c8c8c;
        //             background-color: #f7f8fa;
        //             border-right: 2rpx solid #f0f0f0;
        //             border-bottom: 2rpx solid #f0f0f0;

        //             &:last-child {
        //                 border-right: none;
        //             }
        //         }

        //         .uni-table-td {
        //             padding: 20rpx 16rpx;
        //             font-size: 26rpx;
        //             color: #262626;
        //             border-right: 2rpx solid #f0f0f0;
        //             border-bottom: 2rpx solid #f0f0f0;

        //             &:last-child {
        //                 border-right: none;
        //             }

        //             span {
        //                 display: block;
        //                 text-align: center;
        //             }
        //         }
        //     }
        // }
    }

    // 底部按钮
    .btn {
        margin-top: auto;
        padding: 32rpx;
        background: #fff;
        box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);

        .btn-cont {
            width: 100%;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            background: linear-gradient(135deg, #4b8eff 0%, #3784fb 100%);
            color: #fff;
            border-radius: 44rpx;
            font-size: 32rpx;
            font-weight: 600;
            box-shadow: 0 6rpx 20rpx rgba(55, 132, 251, 0.2);
            transition: all 0.3s ease;

            &:active {
                transform: scale(0.98);
                opacity: 0.9;
                box-shadow: 0 2rpx 8rpx rgba(55, 132, 251, 0.2);
            }
        }
    }
}
</style>
