<template>
    <home-container>

        <view class="container">


            <!-- <scroll-view scroll-y class="content"> -->
            <view class="content">
                <!-- 基础信息 -->
                <uni-card title="基础信息">
                    <view class="row">
                        <text class="label">任务名称：</text>
                        <text class="value">{{ inspection.documentName || '未命名' }}</text>
                    </view>
                    <view class="row">
                        <text class="label">检查人：</text>
                        <text class="value">{{ inspection.checkerName }}</text>
                    </view>
                    <view class="row">
                        <text class="label">检查时间：</text>
                        <text class="value">{{ inspection.checkTime }}</text>
                    </view>
                    <view class="row">
                        <text class="label">评分：</text>
                        <text class="value">{{ inspection.scoreTotal }} 分</text>
                    </view>
                    <view class="row">
                        <text class="label">状态：</text>
                        <!-- <text class="value status" :style="{ color: getColor(inspection.correctionStatus) }">
                            {{ inspection.correctionStatusDesc }}
                        </text> -->

                        <text class="value status" :style="{ color: inspection.statusColor }">
                            {{ inspection.correctionStatusDesc }}
                        </text>
                    </view>
                </uni-card>

                <uni-card title="负面问题记录">
                    <view v-for="(it, i) in problems || []" :key="i" class="issue">
                        <view v-if="it.categoryNameOne" class="reward">
                            问题类型：{{ it.categoryNameOne + "/" + it.categoryNameTwo }}
                        </view>
                        <view v-if="it.problemDescription" class="reward">
                            问题描述：{{ it.problemDescription }}
                        </view>
                        <view class="users">
                            涉及人员：
                            {{(it.checkUserList || []).map(u => u.userName).join('，')}} </view>
                    </view>
                </uni-card>

                <!-- 问题/优秀事例 -->
                <uni-card title="优秀事例记录">
                    <view v-for="(it, i) in goodExamples || []" :key="i" class="issue">
                        <view v-if="it.categoryNameOne" class="reward">
                            问题类型：{{ it.categoryNameOne + "/" + it.categoryNameTwo }}
                        </view>
                        <view v-if="it.problemDescription" class="reward">
                            问题描述：{{ it.problemDescription }}
                        </view>
                        <view class="users">
                            涉及人员：
                            {{(it.checkUserList || []).map(u => u.userName).join('，')}} </view>
                        <view v-if="it.rewardSuggestion" class="reward">
                            奖励建议：{{ it.rewardSuggestion }}
                        </view>
                    </view>
                </uni-card>



                <!-- 总体评价 -->
                <uni-card title="总体评价">
                    <text class="value">{{ inspection.comprehensiveEvaluation || '无' }}</text>
                </uni-card>

                <uni-card title="附件列表">
                    <view v-for="(file, idx) in inspection.baseAttachmentList" :key="idx" class="file-item"
                        @tap="handleDownload(file)">
                        <uni-icons type="paperclip" size="18" color="#007aff" class="icon" />
                        <text class="file-name">{{ file.attachmentName }}</text>
                        <text class="file-size" v-if="file.fileSize">
                            ({{ (file.fileSize / 1024).toFixed(1) }} KB)
                        </text>
                    </view>

                    <!-- <view v-if="!inspection.baseAttachmentList.length" class="no-file">
                        暂无附件
                    </view> -->
                </uni-card>
            </view>
            <!-- </scroll-view> -->
        </view>
    </home-container>

</template>

<script>
import HomeContainer from "@/components/HomeContainer.vue";

import { getInspectionListById } from '@/api/check/checkReward.js'

export default {
    components: { HomeContainer },

    data() {
        return {
            inspection: {},
            problems: [],
            goodExamples: []
        }
    },
    onLoad(options) {
        const id = Number(options.id); // 确保是数字
        this.fetchDetail(id);
        console.log(id); // 现在就是真正的 id

    },
    methods: {
        handleDownload(file) {
            const url = file.attachmentUrl;
            if (!url) return;

            // 如果是图片，直接预览；否则下载
            if (/\.(jpg|jpeg|png|gif)$/i.test(url)) {
                uni.previewImage({ urls: [url] });
            } else {
                uni.showLoading({ title: '下载中…' });
                uni.downloadFile({
                    url,
                    success: (res) => {
                        if (res.statusCode === 200) {
                            uni.openDocument({
                                filePath: res.tempFilePath,
                                showMenu: true,
                                fail: () => uni.showToast({ title: '无法打开文件', icon: 'none' })
                            });
                        } else {
                            uni.showToast({ title: '下载失败', icon: 'none' });
                        }
                    },
                    complete: () => uni.hideLoading()
                });
            }
        },
        async fetchDetail(id) {
            uni.showLoading({ title: '加载中' });
            const res = await getInspectionListById(id);
            // 后端返回 { code, msg, data }
            this.inspection = res.data || {};


            const scoreMap = {
                0: { desc: '不合格', color: '#ff4d4f' },
                1: { desc: '不合格', color: '#ff4d4f' },
                2: { desc: '不合格', color: '#ff4d4f' },
                3: { desc: '合格', color: '#52c41a' },
                4: { desc: '合格', color: '#52c41a' },
                5: { desc: '优秀', color: '#1890ff' }
            }
            const score = this.inspection.scoreTotal ?? 0
            const info = scoreMap[score] || { desc: '未知', color: '#666' }
            this.inspection.correctionStatusDesc = info.desc
            this.inspection.statusColor = info.color




            this.problems = res.data.checkProjectItemList?.filter(item => item.evaluationType === '0') || [];
            this.goodExamples = res.data.checkProjectItemList?.filter(item => item.evaluationType === '1') || [];

            uni.hideLoading();
        },

        getColor(status) {
            const map = { QUALIFIED: '#52c41a', UNQUALIFIED: '#ff4d4f', PENDING: '#faad14' }
            return map[status] || '#666'
        },
        preview(url) {
            uni.previewImage({ urls: [url] })
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    padding: 20rpx;
    background-color: #f5f5f5;
}

.content {
    // height: calc(100vh - 88rpx);
    padding-top: 180rpx;

}

.row {
    display: flex;
    margin-bottom: 16rpx;

    .label {
        width: 160rpx;
        color: #666;
    }

    .value {
        flex: 1;
    }
}

.issue {
    margin-bottom: 20rpx;
    padding: 20rpx;
    background: #fff;
    border-radius: 8rpx;

    .title {
        font-weight: bold;
        margin-bottom: 10rpx;
    }

    .users,
    .reward {
        font-size: 26rpx;
        color: #666;
        margin-top: 8rpx;
    }
}

.file {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
}

.status {
    font-weight: bold;
}

.file-item {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #eee;

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

    .icon {
        margin-right: 12rpx;
    }

    .file-name {
        flex: 1;
        color: #007aff;
    }

    .file-size {
        font-size: 24rpx;
        color: #999;
    }
}

.no-file {
    color: #999;
    text-align: center;
    padding: 30rpx 0;
}
</style>