<template>
    <div class="page">
        <headNav @backPage="backPage" title="隐患详情"></headNav>
        <div class="content">
            <van-cell-group>
                <van-cell title="检查时间" :value="info.time" />
                <van-cell title="检查结果" :value="info.status" />
            </van-cell-group>
            <div class="records" v-if="info.records">
                <div class="record" v-for="(record, ind) in info.records" :key="record.id">
                    <van-cell class="visible_cell__value1" :title="`检查情况${ind+1}`" :value="record.check_desc || ''" />
                    <van-cell title="现场图片">
                        <template #default>
                            <div class="pics" v-if="record.images">
                                <van-image v-for="(item, index) in record.images" :key="index" width="50" height="50" :src="item" @click="previewImage(record.images, index)" />
                            </div>
                        </template>
                    </van-cell>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import headNav from "@/components/headNav.vue"
import {formatDate} from '@/utils/tool';
import { handleProblemImgs } from '@/utils/index';
import { ImagePreview } from 'vant'

export default {
    components: {
        headNav
    },
    computed: {
        info() {
            const data = this.$route.params;
            if (data) {
                data.time = formatDate(data.create_time, true);
                data.status = this.parseStatus(data.check_status);
                if (data.records) {
                    const vm = this;
                    data.records.map(record => {
                        const images = []
                        if (record.pictures) {
                            record.pictures.split(',').map(id => {
                                images.push(vm.handleProblemImgs(id))
                            })
                        }
                        record.images = images;
                    })
                }
            }
            return data
        },
    },
    methods: {
        backPage() {
            this.$router.back()
        },
        parseStatus(status) {
            if (status == 0) {
                return '不涉及'
            }
            if (status == 1) {
                return '合格'
            }
            return '不合格'
        },
		handleProblemImgs,
        previewImage(urls, index) {
            ImagePreview({
                images: urls,
                startPosition: index,
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.pics {

}
</style>