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

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

<style scoped>
.img-list {
    flex-wrap: wrap;
}

.img-list > div {
    margin-right: 20px;
}

ul > li > div {
    margin-right: 10px;
}

.backButton {
    width: 200px;
    margin: 200px auto 30px;
}
</style>
