<!--
 * 严肃声明：
 * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
 * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
 * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
 * Copyright (c) 2020 陈尼克 all rights reserved.
 * 版权所有，侵权必究！
 *
-->

<template>
    <div>
        <LHeader v-bind:text="text"></LHeader>
        <div class="card">
            <div>问题位置：{{list.address}}</div>
            <div>责任单位：{{list.deptNames}}</div>
            <div>问题描述：{{list.context}}</div>
            <div>法律依据：{{list.checkBasis}}</div>
            <div>图片展示：<van-uploader multiple :deletable="false" :show-upload="false"  v-model="list.pictures" /></div>
            <div>视频展示：
                <van-uploader  multiple :deletable="false" :show-upload="false" v-model="list.videos" >
                    <template #preview-cover="{ url }">
                        <video muted autoplay :src="url" style="width:100%;height:100%;object-fit:cover;"></video>
                    </template>
                </van-uploader>
            </div>
        </div>
        <tab-bar :index="1"></tab-bar>
    </div>
</template>

<script>
import tabBar from "@/components/TabBar";
import LHeader from '@/components/header.vue'
import { getFun,postFun } from '@/service/table'
export default {
    name: 'detail',
    components: {
        "LHeader":LHeader,
        "tabBar":tabBar
    },
    data() {
        return {
            text:'整改问题详情',//顶部文本
            list:{},//详情列表
            id:'',//详情列表id
        }
    },
    mounted() {
        this.id=this.$route.query.id
        this.init()
    },
    methods: {
        /* 获取详情列表 */
        init(){
            this.list={}
            getFun('check/notify/trouble/'+this.id).then((Response)=>{
                this.list=JSON.parse(JSON.stringify(Response.data))
                //数据处理
                this.list.deptNames=this.list.deptNames.join('/')
                this.list.pictures=[]
                this.list.videos=[]
                Response.data.pictures.forEach((item) => {
                    this.list.pictures.push({
                        url:item
                    })
                });
                Response.data.videos.forEach((item) => {
                    this.list.videos.push({
                        url:item
                    })
                });
            })
        }
    }
}
</script>
<style lang="less" scoped>
    .card{
        width:90%;
        box-shadow: 0px 0px 10px 2px #F3F3F3;
        padding: 0.25rem;
        margin:0.4rem auto;
        background: white;
        border-radius: 4%;
    }
    .card div{
        font-size: 0.4rem;
        line-height: 0.8rem;
    }
</style>
