<template>
    <div>
        <div class="content-head">
            <dataBreadcrumb :breads="breads"></dataBreadcrumb>
            <h3>查看凭证</h3>
            <h5>查看应收账款等凭证</h5>
        </div>
        <div class="content">
            <div class="flex">
                <div>查看图片：</div>
                <div class="img-list flex">
                    <div v-for="(item, index) in imgList" :key="index">
                        <el-image :src="item.fileUrl" :preview-src-list="srcList" style="width: 100px; height: 100px"> </el-image>
                    </div>
                </div>
            </div>
            <div class="backButton">
                <el-button @click="back">返回</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { evidenceDetail } from '@api/purchaser/buyOut';
import dataBreadcrumb from '@components/dataBreadcrumb.vue';
export default {
    components: {
        dataBreadcrumb
    },
    data() {
        return {
            breads: ['应收账款买断管理', '应收账款买断列表'],
            id: '',
            imgList:[],
            srcList:[]
        };
    },
    methods: {
        back() {
            this.$router.go(-1);
        },
        // 查看详情
        async getevidenceDetail() {
            let message = {};
            message.projectId = this.id;
            message.companyId = localStorage.getItem('companyId');
            const { data, code, msg } = await evidenceDetail(message);
            if (code == 200) {
                this.imgList = data;
                for(let item of data ){
                   this.srcList.push(item.fileUrl)
                }
            } else {
                this.$message.error(msg);
            }
        }
    },
    created() {
        this.id = this.$route.query.id;
        this.getevidenceDetail();
    }
};
</script>

<style scoped>
.img-list {
    flex-wrap: wrap;
}
.img-list > div {
    margin-right: 20px;
}
ul > li > div {
    margin-right: 10px;
}
.backButton {
    width: 100px;
    margin: 200px auto 30px;
}
</style>