<template>
    <div class="page">
        <headNav :title="title"></headNav>

        <div class="illegal-container">
            <van-cell title="通知时间" :value="date"></van-cell>
            <div class="img" @click="previewFile">
                <img :src="url" alt="" srcset="">
            </div>

            <div class="btn" @click="previewFile">
                <span>全屏查看</span>
            </div>
        </div>
    </div>
</template>

<script>
import headNav from '@/components/headNav.vue';
import { handleProblemImgs } from '@/utils/index.js';

import { ImagePreview } from 'vant';

export default {
    components: {
        headNav,
    },
    computed: {
        id() {
            return this.$route.params.id;
        },
        type() {
            return this.$route.params.type;
        },
        title() {
            return this.type == 2 ? '简易处罚决定书' : '行为告知单';
        },
        url() {
            if (this.id > 0) {
                return handleProblemImgs(this.id);
            }
            return '';
        },
        date() {
            return this.$route.params.date || '';
        },
    },
    methods: {
        previewFile() {
            ImagePreview([this.url]);
        },
    }
}
</script>

<style lang="scss" scoped>
.illegal-container {
    margin-top: 47px;
    height: calc(100vh - 47px);
    overflow-y: auto;
    position: relative;
    .img {
        padding: 20px;
        &>img {
            width: 100%;
        }
    }
    .btn {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 50px;
        background-color: #3F8DFF;
        color: #FFFFFF;
        font-size: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
</style>