<template>
	<div>
		<div class="content-head">
			<dataBreadcrumb :breads="breads"></dataBreadcrumb>
			<h3>确认凭证</h3>
			<h5>确认应收账款等凭证</h5>
		</div>
		<div class="content">
			<div class="flex-item">
				<div>下载合同：</div>
				<ul>
					<li class="flex-item">
						<div>{{detail.fileName}}</div>
						<!-- <el-button size="mini">下载</el-button> -->
						<a target="_blank" :href="detail.fileUrl">下载</a>
					</li>
				</ul>
			</div>
			<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 {
				imgList: ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
					'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
				],
				breads: ['应收账款买断管理', '应收账款买断列表'],
				srcList: [
					'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
					'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
				],
				id:"",
				detail:""
			}
		},
		created() {
			this.getevidenceDetail()
		},
		methods: {
			back() {
				this.$router.go(-1)
			},
			// 查看详情
			async getevidenceDetail() {
			    let message={}
				message.projectId = this.id
				message.companyId =localStorage.getItem("companyId")
				const {
					data,
					code
				} = await evidenceDetail(message)
				if (code == 200) {
					this.detail = data
				}
			},
			// 提出
			async submitData() {
				try {
					let projectId = this.id
					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.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: 200px;
		margin: 200px auto 30px;
	}
</style>
