<template>
	<div>
		<el-card class="box-card">
			<el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="12">
				<div class="grid-content bg-purple ">
					<span style="font-weight: 600;">合同基础信息</span>
					<div class="titlein">
						<span class="titlename">合同名称</span>
						<span class="meatatitle">{{ contract.name }}</span>
					</div>
					<div class="titlein">
						<span class="titlename">合同编号</span>
						<span class="meatatitle">{{ contract.contractNo }}</span>
					</div>
					<div class="titlein">
						<span class="titlename">合同附件</span>
						<div style="display: flex;">
							<div class="imgbox">
								<el-image style="width: 100px; height: 100px" :src="url[0]"
									:preview-src-list="picList[0]" />
							</div>
							<div class="imgbox">
								<el-image style="width: 100px; height: 100px" :src="url[1]"
									:preview-src-list="picList[1]" />
							</div>
						</div>
					</div>
					<div class="titlein">
						<span class="titlename">发票附件</span>
						<div style="display: flex;">
							<div class="imgbox">
								<el-image style="width: 100px; height: 100px" :src="url[1]"
									:preview-src-list="picList[1]" />
							</div>
							<div class="imgbox">
								<el-image style="width: 100px; height: 100px" :src="url[1]"
									:preview-src-list="picList[1]" />
							</div>
						</div>
					</div>

				</div>
			</el-col>
			<el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="12">
				<div class="jas">
					<div class="titlein jas">
						<span class="titlename">贸易合同</span>
						<div style="display: flex;">
							<div class="imgbox">
								<el-image style="width: 100px; height: 100px" :src="url[0]"
									:preview-src-list="picList[0]" />
							</div>
							<div class="imgbox">
								<el-image style="width: 100px; height: 100px" :src="url[1]"
									:preview-src-list="picList[1]" />
							</div>
						</div>
					</div>
					<div class="yusa jas">
						<!-- <el-tag type="warning" effect="dark">
              <span>合同状态：</span>
              <span style="color: #D05C39;">待审核</span>
            </el-tag> -->
						<div class="boxas">
							<span style="color: #fff;">合同状态：</span>
							<span style="color: #D05C39;">{{ contract.statusText }}</span>
						</div>
						<span class="aoiisp">审核结果：<p style="color: #D8AB5A;">审核通过</p></span>
					</div>
					<div class="yusa">
						<el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="10" class="jas">
							<el-form ref="form" :model="feed" label-width="0px">
								<span class="sah">审核反馈：</span>
								<el-form-item label="">
									<el-input v-model="feed.feedback" type="textarea" />
								</el-form-item>

							</el-form>
						</el-col>
						<el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14" class="jas">
							<span class="sah">审核截图：</span>
							<div style="display: flex;justify-content: flex-end;">
								<div class="imgbox">
									<el-image style="width: 100px; height: 100px" :src="url[0]"
										:preview-src-list="picList" />
								</div>
								<div class="imgbox">
									<el-image style="width: 100px; height: 100px" :src="url[1]"
										:preview-src-list="picList" />
								</div>
							</div>
						</el-col>
					</div>
					<div slot="" class="clearfix">
						<el-button type="primary" style="float: right; margin-left: 10px;" @click="Exports">导出
						</el-button>
						<el-button type="danger" style="float: right; " @click="deletedContract">删除</el-button>

						<el-button v-if="role===1" type="primary" style="float: right; " @click="recoverContract">恢复
						</el-button>
						<el-button v-if="role===1" type="warning" style="float: right; " @click="failed">审核失败
						</el-button>
						<el-button v-if="role===1" type="success" style="float: right; " @click="success">审核成功
						</el-button>
					</div>
				</div>
			</el-col>
		</el-card>

		<el-card class="box-card">
			<el-table v-loading="listLoading" :data="temporaryList" element-loading-text="Loading" border fit
				highlight-current-row @select="handleSelectionChange" @select-all="handleAll">
				<el-table-column align="center" label="" width="55" type="selection" />
				<el-table-column label="汇票名称" align="center" prop="name" />
				<el-table-column label="汇票编号" align="center" prop="draftNo" />
				<el-table-column label="承兑人" align="center" prop="acceptorName" />
				<el-table-column label="金额" align="center">
					<template slot-scope="scope">
						{{ scope.row.money }}
					</template>
				</el-table-column>
				<el-table-column label="服务费" align="center">
					<template slot-scope="scope">
						{{ scope.row.serviceMoney }}
					</template>
				</el-table-column>
				<el-table-column label="汇票状态" align="center" prop="draftStatusText" />
				<el-table-column label="审核状态" align="center">
					<template slot-scope="scope">
						{{ scope.row.statusText }}
					</template>
				</el-table-column>
				<el-table-column align="center" prop="created_at" label="操作" width="250">
					<template slot-scope="scope">
						<el-tag type="primary" style="cursor: pointer;margin-right: 15px;"
							@click="tapDetail(scope.row.id)">查看详情</el-tag>
						<el-tag type="success" style="margin-right: 15px;cursor: pointer;"
							@click="recover(scope.row.id)" v-if="(scope.row.draftStatus==1)">恢复</el-tag>
						<el-tag type="danger" style="margin-right: 15px;cursor: pointer;" @click="deleted(scope.row.id)"
							v-if="(scope.row.draftStatus==0)">删除</el-tag>
					</template>
				</el-table-column>
			</el-table>

			<div class="pagesip">
				<el-button v-if="role===2" type="primary" style="float: right;margin-right: 10px; " @click="addNewBill">
					新增汇票</el-button>
				<el-button type="primary" size="small"
					style="background-color: #d8ab5a; border-color: #d8ab5a; margin: 0 20px" @click="jumpFirstPage">首页
				</el-button>
				<el-pagination background layout="prev, pager, next" :total="list.length" :page-size="10"
					prev-text="上一页" ref="pagination" next-text="下一页" :hide-on-single-page="false"
					@current-change="handleCurrentChange" />
				<el-button type="primary" size="small"
					style="background-color: #d8ab5a; border-color: #d8ab5a; margin: 0 20px" @click="jumpLastPage">尾页
				</el-button>
				<el-button type="primary" size="small" @click="back">返回
				</el-button>
			</div>

		</el-card>
	</div>

</template>

<script>
	import {
		getList
	} from '@/api/table'
	import {
		dataConversionUtil
	} from '../../utils/Excel.js'
	export default {
		data() {
			return {
				role: '',
				srcList: [],
				temporaryList: [],
				list: [],
				contract: {},
				currentPage: 1,
				multipleSelection: [],
				pagesize: 11,
				listLoading: false,
				checked: '',
				form: '',
				url: [],
				picList: [],
				feed: {
					id: '',
					feedback: '',
					feedbackPicList: [],
					approveStatus: ''
				}
			}
		},
		created() {},
		mounted() {
			this.role = this.$store.state.user.userInfo.type
			console.log(this.$store.state.user.userInfo.type)
			this.checked = this.$store.state.user.checked
			this.getData()
		},
		methods: {
			getData() {
				const id = this.$route.query.id
				this.$request({
					url: '/api/Contract/' + id,
					method: 'get'
				}).then((res) => {
					this.contract = res.data
					this.url = this.contract.invoicePicList
					this.picList = this.contract.picList
					this.list = res.data.contractDraft.result
					this.feed.feedbackPicList = this.picList
					this.feed.id = this.$route.query.id
					this.getPageData()
				})
			},
			addNewBill() {
				this.$router.push({
					name: 'addnewbill'
				})
			},
			tapDetail(id) {
				this.$router.push({
					name: 'billDetail',
					query: {
						id: id
					}
				})
			},
			handleAll(data) {
				this.multipleSelection = data
				console.log(this.multipleSelection)
			},
			handleSelectionChange(data) {
				this.multipleSelection = data
				console.log(this.multipleSelection)
			},
			handleCurrentChange(val) {
				this.currentPage = val
				this.getPageData()
			},
			jumpFirstPage() {
				this.$refs.pagination.handleCurrentChange(1)
				this.$emit('handleCurrentChange', 1)
			},
			jumpLastPage() {
				const font = this.$refs.pagination
				const cpage = Math.ceil(font.total / font.pageSize)
				font.handleCurrentChange(cpage)
			},
			getPageData() {
				const start = (this.currentPage - 1) * this.pagesize
				const end = start + this.pagesize
				this.srcList = this.list.slice(start, end)
				this.temporaryList = this.srcList
			},
			Exports() {
				// var tableHeader = [
				// 	['序号', '汇票名称', '汇票编号', '承兑人', '金额', '服务费','汇票状态','审核状态'],
				// ]
				// var dataList = []
				// this.multipleSelection.forEach((item, index) => {
				// 	dataList.push([index + 1, item.name, item.draftNo, item.acceptorName,item.money,item.serviceMoney, item.draftStatusText, item
				// 		.statusText
				// 	]);
				// })
				// dataConversionUtil.dataToExcel('出票人列表', tableHeader, dataList)
				// this.$message.success('导出成功!');
			},
			success() {
				// this.feed.feedbackPicList=this.picList
				// this.feed.id=this.$route.query.id
				this.feed.approveStatus = 1
				this.$request({
					url: '/api/Contract/approveContract',
					method: 'post',
					data: this.feed
				}).then((res) => {
					if (res.code == 200) {
						this.$message({
							type: 'success',
							message: res.msg
						})
						this.getData()
					} else {
						this.$message({
							type: 'error',
							message: '提交失败'
						})
						this.getData()
					}
				})
			},
			failed() {
				this.feed.approveStatus = 2
				this.$request({
					url: '/api/Contract/approveContract',
					method: 'post',
					data: this.feed
				}).then((res) => {
					if (res.code == 200) {
						this.$message({
							type: 'success',
							message: res.msg
						})
						this.getData()
					} else {
						this.$message({
							type: 'error',
							message: '提交失败'
						})
						this.getData()
					}
				})
			},
			recoverContract() {
				const id = this.$route.query.id
				this.$request({
					url: '/api/Contract/manage',
					method: 'post',
					data: {
						ids: [id],
						operateType: 2
					}
				}).then((res) => {
					if (res.code == 200) {
						this.$message({
							type: 'success',
							message: res.msg
						})
						this.getData()
					} else {
						this.$message({
							type: 'error',
							message: '提交失败'
						})
						this.getData()
					}
				})
			},
			deletedContract() {
				const id = this.$route.query.id
				this.$request({
					url: '/api/Contract/manage',
					method: 'post',
					data: {
						ids: [id],
						operateType: 1
					}
				}).then((res) => {
					if (res.code == 200) {
						this.$message({
							type: 'success',
							message: res.msg
						})
						this.getData()
					} else {
						this.$message({
							type: 'error',
							message: '提交失败'
						})
						this.getData()
					}
				})
			},
			recover(id) {
				this.$request({
					url: '/api/Contract/contractDraft/manager',
					method: 'post',
					data: {
						ids: [id],
						operateType: 2
					}
				}).then((res) => {
					if (res.code == 200) {
						this.$message({
							type: 'success',
							message: res.msg
						})
						this.getData()
					} else {
						this.$message({
							type: 'error',
							message: '提交失败'
						})
						this.getData()
					}
				})
			},
			deleted(id) {
				this.$request({
					url: '/api/Contract/contractDraft/manager',
					method: 'post',
					data: {
						ids: [id],
						operateType: 1
					}
				}).then((res) => {
					if (res.code == 200) {
						this.$message({
							type: 'success',
							message: res.msg
						})
						this.getData()
					} else {
						this.$message({
							type: 'error',
							message: '提交失败'
						})
						this.getData()
					}
				})
			},
			back() {
				this.$router.go(-1)
			}
		}
	}
</script>

<style lang="scss">
	.box-card {
		width: 98%;
		margin: 0 auto;
		margin-top: 10px;
	}

	.el-textarea__inner {
		padding: 30px 0;
	}

	.imgbox {
		margin-left: 15px;
	}

	.titlein {
		display: flex;
		justify-content: space-between;
		margin: 20px 0;

		.titlename {
			color: #BEBDBB;
		}

		.meatatitle {
			color: #1F242A;
		}
	}

	.yusa {
		display: flex;

	}

	.jas {
		margin: 20px 20px;
		margin-bottom: 0;
	}

	.sah {
		display: block;
		color: #68625B;
		padding-bottom: 10px;
	}

	.el-tag {
		// font-size: 18px;
	}

	.grid-content {
		margin: 15px 20px;
	}

	.bors {

		height: 100%;
	}

	.aoiisp {
		margin-left: 20px;
		display: flex;
		align-items: center;
	}

	.pagesip {
		width: 100%;
		margin: 20px auto;
		display: flex;
		// align-items: center;
		justify-content: flex-end;
	}

	.el-pagination.is-background .el-pager li:not(.disabled).active {
		background-color: #D8AB5A;
	}

	.el-col {
		margin-bottom: 20px;
	}

	.boxas {
		font-size: 18px;
		width: 211px;
		height: 40px;
		background: linear-gradient(to right, #FFE1AD, #D8AB5A);
		box-shadow: 0 10px 20px 1px rgba(179, 116, 5, 0.2000);
		border-radius: 0 26px 26px 0;
		line-height: 40px;
		text-align: center;
	}
</style>
