<!-- 项目详情-整改记录 -->
<template>
    <view class="MainBox">
        <u-virtual-list :list-data="dataSource" :item-height="170" height="100%">
            <template #default="{ item }">
                <view class="CardBox">
                    <view class="ShadeBox">
                        <view class="FlexBox" style="justify-content: space-between;">
                            <view class="fw-600">{{ item.name }}</view>
                            <u-tag :text="item.status" :type="item.status === '待复核' ? 'warning' : 'success'"
                                plain></u-tag>
                        </view>
                        <view class="FlexBox">
                            <view class="imgBox">
                                <image :src="item.imgUrl" mode="aspectFill"></image>
                            </view>
                            <view class="InfoBox">
                                <view class="FlexBox">
                                    <view class="fw-600">识别时间：</view>
                                    <view>{{ item.time }}</view>
                                </view>
                                <view class="FlexBox">
                                    <view class="fw-600">施工单位自查：</view>
                                    <up-text :type="item.inspect === '合格' ? 'success' : 'error'"
                                        :text="item.inspect"></up-text>
                                </view>
                            </view>
                        </view>
                        <u-button text="复核" type="primary" size="small" disabled>已复核</u-button>
                    </view>
                </view>
            </template>

        </u-virtual-list>
    </view>
</template>
<script setup >
import { ref } from 'vue'

const dataSource = ref([
    {
        id: 1,
        name: '消防器械摆放不当',
        inspect: '合格',
        time: '2023-08-01 10:00:00',
        details: '已重新规划消防器械摆区域，并设置标识',
        opinion: '整改到位，符合项目要求',
        imgUrl: 'https://img95.699pic.com/photo/40225/7755.jpg_wh860.jpg',
        status: '已复核'
    },
    {
        id: 2,
        name: '项目风险管控类型',
        inspect: '不合格',
        time: '2023-08-02 10:00:00',
        details: '已重新规划消防器械摆区域，并设置标识',
        opinion: '整改到位，符合项目要求',
        imgUrl: 'https://img95.699pic.com/photo/40225/7755.jpg_wh860.jpg',
        status: '已复核'
    },
    {
        id: 3,
        name: '项目风险管控类型',
        inspect: '不合格',
        time: '2023-08-02 10:00:00',
        details: '已重新规划消防器械摆区域，并设置标识',
        opinion: '整改到位，符合项目要求',
        imgUrl: 'https://img95.699pic.com/photo/40225/7755.jpg_wh860.jpg',
        status: '已复核'
    },
    {
        id: 4,
        name: '项目风险管控类型',
        inspect: '不合格',
        time: '2023-08-02 10:00:00',
        details: '已重新规划消防器械摆区域，并设置标识',
        opinion: '整改到位，符合项目要求',
        imgUrl: 'https://img95.699pic.com/photo/40225/7755.jpg_wh860.jpg',
        status: '已复核'
    },
    {
        id: 5,
        name: '项目风险管控类型',
        inspect: '不合格',
        time: '2023-08-02 10:00:00',
        details: '已重新规划消防器械摆区域，并设置标识',
        opinion: '整改到位，符合项目要求',
        imgUrl: 'https://img95.699pic.com/photo/40225/7755.jpg_wh860.jpg',
        status: '已复核'
    },
])


</script>
<style lang="scss" scoped>
.FlexBox {
    display: flex;
    // align-items: flex-start;
    gap: 20rpx;
}

.fb-gray {
    color: #999;
}

.fw-600 {
    font-weight: bold;
    color: #333;
}



.MainBox {
    height: 100%;
    overflow: hidden;
    padding: 20rpx;
    background-color: #fff;
    padding: 20rpx;


    .CardBox {
        width: 100%;
        height: 280rpx;
        background-color: #fff;
        padding: 10rpx;


        .ShadeBox {
            padding: 20rpx;
            box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
            display: flex;
            flex-direction: column;
            border-radius: 10rpx;
            gap: 20rpx;
        }

        .LableBox {
            width: 160rpx;
            font-size: 24rpx;
            color: #666;
        }

        .TxtBox {
            width: calc(100% - 160rpx);
            font-size: 24rpx;
            color: #333;
            font-weight: bold;

            overflow: hidden;
            /* 隐藏溢出内容 */
            white-space: nowrap;
            /* 强制不换行 */
            text-overflow: ellipsis;
            /* 显示省略号 */
        }

        .imgBox {
            width: 100rpx;
            height: 100rpx;
            border-radius: 10rpx;
            overflow: hidden;

            image {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>