<template>
	<div>
		<div class="content-head">
			<dataBreadcrumb :breads="breads"></dataBreadcrumb>
			<h3>提交</h3>
			<h5>提交保证金缴纳信息</h5>
		</div>
		<div class="othercontent">
			<el-form ref="ruleForm" :model="ruleForm" :rules="formrules" 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="联系人：" prop="projectCode">
									<el-input v-model.trim="ruleForm.projectCode" placeholder="请输入" maxlength="30"></el-input>
								</el-form-item>
								<el-form-item label="固定电话：" prop="companyTel">
									<el-input v-model.trim="ruleForm.companyTel" placeholder="请输入" 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" placeholder="请输入" maxlength="30"></el-input>
								</el-form-item>
								<el-form-item label="传真：" prop="companyFacsimile">
									<el-input v-model.trim="ruleForm.companyFacsimile" placeholder="请输入" maxlength="30"></el-input>
								</el-form-item>
							</div>
							<div>
								<el-form-item label="邮箱：" prop="companyEmail">
									<el-input v-model.trim="ruleForm.companyEmail" placeholder="请输入" 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" placeholder="请输入" maxlength="30"></el-input>
								</el-form-item>
								<el-form-item label="收件人单位：">
									<el-input v-model.trim="ruleForm.recipientsCompany" placeholder="请输入" maxlength="30"></el-input>
								</el-form-item>
							</div>
							<div class="flex-between">
								<el-form-item label="联系方式：">
									<el-input v-model.trim="ruleForm.recipientsPhone" placeholder="请输入" maxlength="30"></el-input>
								</el-form-item>
								<el-form-item label="邮政编码：">
									<el-input v-model.trim="ruleForm.recipientsMail" placeholder="请输入" maxlength="30"></el-input>
								</el-form-item>
							</div>
							<div>
								<el-form-item label="邮寄地址：">
									<el-input v-model.trim="ruleForm.recipientsAddress " placeholder="请输入" 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" placeholder="请输入" maxlength="30">
								</el-input>
							</el-form-item>
							<el-form-item label="备注：" prop="remark">
								<el-input :rows="5" v-model.trim="ruleForm.remark" type="textarea" placeholder="请输入内容" maxlength="300">
								</el-input>
							</el-form-item>
							<el-form-item label="上传缴费凭证：" prop="voucherUrl">
								<Upload :limit="5" :max="5" tip="完成上传5份文件,每份不超过10M" @input="getfile"></Upload>
							</el-form-item>
						</div>
					</div>
				</div>
			</el-form>
		</div>
		<div class="bottomButton">
			<el-button>取消</el-button>
			<el-button type="primary" @click="submitData">提交</el-button>
		</div>
	</div>

</template>

<script>
	import {
		bidderEarnestpayment
	} from '@api/supply/bid'
	import dataBreadcrumb from '@components/dataBreadcrumb.vue'
	import Upload from '@components/Upload/Upload.vue'
	export default {
		components: {
			dataBreadcrumb,
			Upload
		},
		data() {
			// 测试图片
			let checkimg = (rule, value, callback) => {
				if (this.ruleForm.voucherUrl.length === 0) {
					callback(new Error('请上传凭证'));
				} else {
					callback();
				}
			};
			return {
				breads: ['招标管理', '招标项目管理', '工作台'],
				ruleForm: {
					companyName: '',
					companyTel: '',
					companyPhone: '',
					companyFacsimile: '',
					recipientsName: "",
					recipientsCompany: "",
					recipientsPhone: "",
					recipientsMail: "",
					recipientsAddress: "",
					feeWay: '',
					remark: "",
					companyEmail: "",
					voucherUrl: []
				},
				formrules: {
					companyName: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					companyPhone: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
				
					feeWay: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					voucherUrl: [{
						required: true,
						validator: checkimg,
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			getfile(val) {
				this.ruleForm.voucherUrl = val
			},
			async submitData() {
				try {
					const valid = await this.$refs['ruleForm'].validate()
					if (valid) {
						let message = this.ruleForm
						message.companyId = localStorage.getItem("companyId"),
							message.projectId = localstorage.getitem("projectId")
						const {
							code,
							msg
						} = await bidderEarnestpayment(message)
						if (code === 200) {
							this.$message({
							             message: msg,
							             type: 'success',
									  duration:1500
							           })
									setTimeout(()=>{
										 this.$router.go(-1)
									},1500)
						}
					}
				} catch (e) {
					console.log(e)
				}
			}
		},
	}
</script>


<style scoped>
	.message {}

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

	.message-form {
		width: 70%;
		margin: 0 auto
	}
</style>
