<template>
	<div>
		<div class="content-head">
			<dataBreadcrumb :breads="breads"></dataBreadcrumb>
			<h3>{{title}}</h3>
			<h5>{{title}}保证金缴费信息</h5>
			<div class="flex state">
				<div>状态:{{state}}</div>
				<div></div>
			</div>
		</div>
		<div class="othercontent">
			<el-form ref="ruleForm" :model="ruleForm" label-width="200px" class="demo-ruleForm">
				<div class="message">
					<div>
						<div class="describe">单位信息</div>
						<div class="message-form">
							<div>
								<el-form-item label="单位名称" prop="companyName">
									<el-input v-model.trim="ruleForm.companyName" disabled></el-input>
								</el-form-item>
							</div>
							<div class="flex-between">
								<el-form-item label="联系人：" >
									<el-input v-model.trim="ruleForm.contacts" disabled maxlength="30"></el-input>
								</el-form-item>
								<el-form-item label="固定电话：" prop="companyTel">
									<el-input v-model.trim="ruleForm.companyTel" disabled maxlength="30"></el-input>
								</el-form-item>
							</div>
							<div class="flex-between">
								<el-form-item label="手机：" prop="companyPhone">
									<el-input v-model.trim="ruleForm.companyPhone" disabled maxlength="30"></el-input>
								</el-form-item>
								<el-form-item label="传真：" prop="companyFacsimile">
									<el-input v-model.trim="ruleForm.companyFacsimile" disabled maxlength="30"></el-input>
								</el-form-item>
							</div>
							<div>
								<el-form-item label="邮箱：" prop="companyEmail">
									<el-input v-model.trim="ruleForm.companyEmail" disabled maxlength="30"></el-input>
								</el-form-item>
							</div>
						</div>
					</div>
					<div>
						<div class="describe">邮寄信息</div>
						<div class="message-form">
							<div class="flex-between">
								<el-form-item label="收件人名称：">
									<el-input v-model.trim="ruleForm.recipientsName" disabled maxlength="30"></el-input>
								</el-form-item>
								<el-form-item label="收件人单位：">
									<el-input v-model.trim="ruleForm.recipientsCompany" disabled maxlength="30"></el-input>
								</el-form-item>
							</div>
							<div class="flex-between">
								<el-form-item label="联系方式：">
									<el-input v-model.trim="ruleForm.recipientsPhone" disabled maxlength="30"></el-input>
								</el-form-item>
								<el-form-item label="邮政编码：">
									<el-input v-model.trim="ruleForm.recipientsMail" disabled maxlength="30"></el-input>
								</el-form-item>
							</div>
							<div>
								<el-form-item label="邮寄地址：">
									<el-input v-model.trim="ruleForm.recipientsAddress " disabled maxlength="30"></el-input>
								</el-form-item>
							</div>
						</div>
					</div>
					<div>
						<div class="describe">缴费信息</div>
						<div class="message-form">
							<el-form-item label="付款方式：" prop="feeWay">
								<el-input v-model.trim="ruleForm.feeWay" disabled maxlength="30">
								</el-input>
							</el-form-item>
							<el-form-item label="备注：" prop="remark">
								<el-input :rows="5" v-model.trim="ruleForm.remark" type="textarea" disabled maxlength="300">
								</el-input>
							</el-form-item>
							<el-form-item label="上传缴费凭证：" v-if="ruleForm.voucherUrl">
							   <ul>
								   <li v-for="(item,index) in ruleForm.voucherList" :key="index">
									   <a :href="item.fileUrl">{{item.fileName}}</a>
								   </li>
							   </ul>
							</el-form-item>
						</div>
					</div>
				</div>
			</el-form>
		</div>
		<!-- 拒绝原因 -->
		<el-dialog title="审核拒绝" :visible.sync="dialogFormVisible">
			<el-form :model="form" :rules="rules" ref="form">
				<el-form-item label="拒绝原因" label-width="100" prop="reason">
					<el-input v-model="form.reason" type="textarea" :rows="2" placeholder="请输入内容"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="refuse">确 定</el-button>
			</div>
		</el-dialog>
		<div class="bottomButton" v-if="type=='see'">
			<el-button @click="back">返回</el-button>
		</div>
		<div class="bottomButton" v-else>
			<el-button @click="back">取消</el-button>
			<el-button type="primary" @click="dialogFormVisible = true">审核拒绝</el-button>
			<el-button type="primary" @click="adopt">审核通过</el-button>
		</div>
	</div>

</template>

<script>
import {
		earnestDetail,
		aduit
	} from '@api/purchaser/bid'
	import dataBreadcrumb from '@components/dataBreadcrumb.vue'

	export default {
		components: {
			dataBreadcrumb,

		},
		data() {
			return {
				dialogFormVisible:false,
				state:"",
				breads: ['招标管理', '招标项目管理', '工作台'],
				ruleForm:{},
				form: {
					reason: ""
				},
			    rules: {
			    	reason: [{
			    		required: true,
			    		message: '请输入',
			    		trigger: 'blur'
			    	}]
			    }
			}
		},
		methods: {
			back() {
				this.$router.go(-1)
			},
			async getearnestDetail() {
				// let message={}
				// message.feeId=this.feeId
				// message.projectId=localStorage.getItem("projectId")
				let feeId=this.feeId
				try {
					const {
						data,
						code
					} = await earnestDetail(feeId)
					if (code == 200) {
						this.ruleForm = data
					}
				} catch (e) {
					console.log(e)
				}
			},
			// 审核拒绝
			async refuse() {
				try {
					const valid = await this.$refs['form'].validate()
					if (valid) {
						let form = this.form;
						form.aduit = 2
						form.id = this.feeId
						const {
							code,
							msg
						} = await aduit(form)
						if (code === 200) {
							this.$message({
								message: msg,
								type: 'success',
								duration: 1500
							})
							setTimeout(() => {
								this.$router.go(-1)
							}, 1500)
						} else {
							this.$success.error(msg)
						}
					}
				} catch (e) {
					console.log(e)
				}
			},
			//审核通过
			async adopt() {
				try {
					let form = {};
					form.aduit = 1
					form.id = this.feeId
					const {
						code,
						msg
					} = await aduit(form)
					if (code === 200) {
						this.$message({
							message: msg,
							type: 'success',
							duration: 1500
						})
						setTimeout(() => {
							this.$router.go(-1)
						}, 1500)
					} else {
						this.$success.error(msg)
					}
				} catch (e) {
					console.log(e)
				}
			}
		},
		created(){
			this.state=this.$route.query.state;
			this.type = this.$route.query.type;
			if (this.type == "examine") {
				this.title = "审核"
			} else {
				this.title = "查看"
			}
			let feeId = this.$route.query.feeId;
			this.feeId = feeId
			this.getearnestDetail();
		}
	}
</script>


<style scoped>
	.message {}

	.message>div {
		background: #fff;
		margin-bottom: 20px;
		padding-bottom: 20px;
	}

	.message-form {
		width: 70%;
		margin: 0 auto
	}
	.content-head{
		position: relative;
	}
	.state{
		position: absolute;
		right: 10px;
		bottom:10px
	}
</style>
