<!--
 * @Title: 
 * @Description: 巡检填报详情
 * @Author: swp
 * @Date: 2022-08-24 10:49:21
 * @LastEditors: 
 * @LastEditTime: 2022-08-24 10:49:21
-->
<template>
    <basic-container>
        <el-card shadow="hover" style="margin-top: 10px;">
            <div slot="header">
                <span>巡查照片</span>
            </div>
            <div style="width: 100%;">
                <el-row v-for="(item, index) in data.photoList" :key="index" type="flex">
                    <el-col :span="24">
                        <el-image :src=toOss(item)></el-image>
                    </el-col>
                </el-row>
            </div>

        </el-card>
    </basic-container>
</template>

<script>

import {
    getDetail,
} from "@/api/business/yj/yjdangerareacheck.js";

export default {
    components: {

    },
    props: {
        id: {
            type: [Number],
            required: true
        },
    },
    name: '',
    data() {
        return {
            data: {
                photoList: []
            }
        }
    },
    created() {
        this.initData();
    },
    methods: {
        toOss(path) {
            console.log("1111111111oss " + this.website.ossServer + path);
            return this.website.ossServer + path;
        },
        initData() {
            getDetail(this.id).then(res => {
                const data = res.data;
                console.log(JSON.stringify(data));
                if (data.success) {
                    let photos = data.data['checkPhotos'];

                    if (null != photos && photos.length > 0) {
                        console.log(photos)

                        let photoList = photos.split(",");
                        console.log(photoList)
                        this.data.photoList = photoList;
                    }

                }
            })
        },

    }
}
</script>


<style lang="scss" scoped>
.item-line-start {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.item-line-end {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.item-line-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
}

.block-line {
    border-bottom: 1px solid lightblue;
}

.item-title {
    display: flex;
    flex-direction: column;
    ;
    justify-content: center;
    font-size: 1rem;
}

.item-content {
    display: flex;
    flex-direction: column;
    ;
    justify-content: center;
    padding-left: 10px;
    color: grey;
    font-size: 1rem;
}
</style>

