<template>
    <!-- 领料出库详情 -->
    <view class="page-container">
        <uni-row :gutter="24" class="search-form">
            <uni-col :span="12">
                <view>
                    <uni-easyinput placeholder="请输入内容" />
                </view>
            </uni-col>
            <uni-col :span="4">
                <view class="search">查询</view>
            </uni-col>
            <uni-col :span="4">
                <view class="search" style="background-color: #19be6b" @tap="handleAllPass"
                    >通过</view
                >
            </uni-col>
            <uni-col :span="4">
                <view class="search" style="background-color: #ff4949" @tap="handleAllFail"
                    >驳回</view
                >
            </uni-col>
        </uni-row>

        <view class="table-list-item">
            <checkbox-group @change="onChangeAllChecked">
                <label>
                    全选
                    <checkbox
                        color="#409eff"
                        borderColor="#409eff"
                        activeBorderColor="#409eff"
                        :checked="allChecked"
                        value="all"
                        style="transform: scale(0.7)"
                    />
                </label>
            </checkbox-group>
        </view>

        <scroll-view scroll-y class="scroll-container">
            <view
                v-for="(item, index) in detailsList"
                :key="index"
                class="table-list-item"
                @tap="onRepairItem(item)"
            >
                <div class="title">
                    <span style="font-size: 15px; font-weight: 800">修试审核</span>
                    <!-- <span :style="{ color: active == 1 ? '#3784fb' : '#ff4d4f' }">{{active == 1 ? '已完成' : '未完成'}}</span> -->
                </div>
                <view class="line"></view>
                <uni-row :gutter="24">
                    <uni-col :span="2">
                        <checkbox-group @change="onChangeChecked(item)">
                            <label>
                                <checkbox
                                    color="#409eff"
                                    borderColor="#409eff"
                                    activeBorderColor="#409eff"
                                    :checked="item.isChecked"
                                    style="transform: scale(0.7)"
                                />
                            </label>
                        </checkbox-group>
                    </uni-col>
                    <uni-col :span="6">物资名称：</uni-col>
                    <uni-col :span="16">
                        <view class="cont">{{ item.machineTypeName }}</view>
                    </uni-col>
                </uni-row>
                <uni-row :gutter="24">
                    <uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
                    <uni-col :span="6">规格型号：</uni-col>
                    <uni-col :span="16">
                        <view class="cont">{{ item.specificationType }}</view>
                    </uni-col>
                </uni-row>
                <uni-row :gutter="24">
                    <uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
                    <uni-col :span="6">单位：</uni-col>
                    <uni-col :span="16">
                        <view class="cont">{{ item.unitName }}</view>
                    </uni-col>
                </uni-row>
                <uni-row :gutter="24">
                    <uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
                    <uni-col :span="6">已修数量：</uni-col>
                    <uni-col :span="16">
                        <view class="cont">{{ item.repairedNum }}</view>
                    </uni-col>
                </uni-row>

                <uni-row :gutter="24">
                    <uni-col :span="2" style="color: transparent">{{ index + 1 }}</uni-col>
                    <uni-col :span="6">管理模式：</uni-col>
                    <uni-col :span="16">
                        <uni-tag
                            text="编码"
                            type="warning"
                            v-if="item.manageType == 0"
                            size="small"
                        />
                        <uni-tag
                            text="数量"
                            type="success"
                            v-if="item.manageType == 1"
                            size="small"
                        />
                    </uni-col>
                </uni-row>
            </view>
        </scroll-view>
    </view>
</template>

<script setup>
import { ref, onUnmounted, computed } from 'vue'
import { getAuditInfo, innerAudit } from '@/services/repair/testExamine.js'
import { onLoad, onShow } from '@dcloudio/uni-app'
const detailsList = ref([])
// const query = defineProps() // 获取上级页面传递的路由参数
const taskId = ref('')

// 获取列表详情
const getDetailsData = async () => {
    const res = await getAuditInfo({ taskId: taskId.value })
    detailsList.value = res.rows
    detailsList.value = detailsList.value.map((e) => {
        return { ...e, isChecked: false }
    })
}

// 复选框全选
const onChangeAllChecked = (e) => {
    detailsList.value.forEach((item) => {
        if (e.detail.value.length > 0) {
            item.isChecked = true
        } else {
            item.isChecked = false
        }
    })
}
// 复选框每一项
const onChangeChecked = (val) => {
    val.isChecked = !val.isChecked
}

// 计算全选按钮是否选中
const allChecked = computed(() => {
    return detailsList.value.every((e) => e.isChecked == true)
})

// 点击合格按钮
const handleAllPass = async () => {
    const isSelect = detailsList.value.some((e) => e.isChecked == true)
    if (!isSelect) {
        uni.showToast({
            title: '请勾选需要需要合格的数据！',
            icon: 'none',
        })
        return
    }
    // 组装参数
    const ids = []
    detailsList.value.forEach((item) => {
        if (item.isChecked) {
            console.log(item)
            let obj = {
                id: item.id,
                status: '1',
                specificationType: item.specificationType,
                machineTypeName: item.machineTypeName,
                repairNum: item.repairNum,
                repairedNum: item.repairedNum,
                typeId: item.typeId,
                taskId: item.taskId,
                auditId: item.id,
                repairId: item.repairId,
                maId: item.maId,
            }
            ids.push(obj)
        }
    })
    console.log(ids)
    const res = await innerAudit(ids)
    if (res.code === 200) {
        uni.showToast({
            title: '操作成功！',
            icon: 'none',
        })
        getDetailsData()
    }
}

// 点击驳回按钮
const handleAllFail = async () => {
    const isSelect = detailsList.value.some((e) => e.isChecked == true)
    if (!isSelect) {
        uni.showToast({
            title: '请勾选需要需要驳回的数据！',
            icon: 'none',
        })
        return
    }
    // 组装参数
    const ids = []
    detailsList.value.forEach((item) => {
        if (item.isChecked) {
            console.log(item)
            let obj = {
                id: item.id,
                status: '2',
                specificationType: item.specificationType,
                machineTypeName: item.machineTypeName,
                repairNum: item.repairNum,
                repairedNum: item.repairedNum,
                typeId: item.typeId,
                taskId: item.taskId,
                auditId: item.id,
                repairId: item.repairId,
                maId: item.maId,
            }
            ids.push(obj)
        }
    })
    console.log(ids)
    const res = await innerAudit(ids)
    if (res.code === 200) {
        uni.showToast({
            title: '操作成功！',
            icon: 'none',
        })
        getDetailsData()
    }
}

// 点击跳转维修页面
const onRepairItem = (item) => {
    console.log(item)
    // let queryParams = null
    // let codingUrl = ''
    // if (item.manageType === 0) {
    //     codingUrl = '/pages/repair/repairManage/code-view' // 编码维修
    // }
    // if (item.manageType == 1) {
    //     codingUrl = '/pages/repair/repairManage/num-operate' // 数量维修
    // }
    // queryParams = item
    // uni.navigateTo({ url: `${codingUrl}?queryParams=${JSON.stringify(queryParams)}` })
}
onShow(() => {
    getDetailsData()
})
// 页面加载完毕
onLoad((options) => {
    taskId.value = options.taskId
    getDetailsData()
    // 监听出库完成事件 刷新列表
    uni.$on('onUpdate', () => {
        // console.log('监听事件')
        // 刷新列表
        getDetailsData()
    })
})
// 页面销毁时移除事件监听
onUnmounted(() => {
    uni.$off('onUpdate') // 移除事件监听
})
</script>

<style lang="scss" scoped>
.page-container {
    display: flex;
    height: 100%;
    padding: 0 15rpx;
    flex-direction: column;
    background-color: #e8f5fb;

    .search-form {
        margin: 10rpx 0;
        display: flex;
        align-items: center;
        box-sizing: content-box;
    }

    .search {
        height: 60rpx;
        background-color: #3784fb;
        text-align: center;
        line-height: 60rpx;
        color: #fff;
        border-radius: 10rpx;
    }

    .table-list-item {
        margin-bottom: 20rpx;
        padding: 20rpx;
        background-color: #fff;
        // min-height: 300rpx;
        border-radius: 10rpx;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .line {
            margin: 20rpx 0;
            height: 1px;
            background-color: #e8e8e8;
        }
    }
}
// 加载提示文字
.loading-text {
    text-align: center;
    font-size: 28rpx;
    color: #666;
    padding: 20rpx 0;
}
</style>
