<!-- 标书费缴纳 -->
<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">

							<div class="flex-between">
								<el-form-item label="发票类型：" prop="invoiceType">
									<el-radio-group v-model="ruleForm.invoiceType">
										<el-radio :label="1">增值税普通发票</el-radio>
										<el-radio :label="2">增值税专用发票</el-radio>
									</el-radio-group>
								</el-form-item>
								<el-form-item label="发票抬头：" prop="invoiceHead">
									<el-input v-model.trim="ruleForm.invoiceHead" placeholder="请输入" maxlength="30"></el-input>
								</el-form-item>
							</div>
							<div class="flex-between">
								<el-form-item label="纳税人识别号：" prop="invoiceTaxNumber ">
									<el-input v-model.trim="ruleForm.invoiceTaxNumber " placeholder="请输入" maxlength="30"></el-input>
								</el-form-item>
								<el-form-item label="地址：" prop="invoiceAddress">
									<el-input v-model.trim="ruleForm.invoiceAddress" placeholder="请输入" maxlength="30"></el-input>
								</el-form-item>
							</div>
							<div class="flex-between">
								<el-form-item label="电话：" prop="invoiceTel">
									<el-input v-model.trim="ruleForm.invoiceTel" placeholder="请输入" maxlength="30"></el-input>
								</el-form-item>
								<el-form-item label="开户行及账号：" prop="invoiceAccount">
									<el-input v-model.trim="ruleForm.invoiceAccount" 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="ruleForm.feeWay" placeholder="请输入">
								</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="voucherList">
								<Upload :limit="5" :max="10" 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 {
		bidBookpayment
	} from '@api/supply/bid'
	import dataBreadcrumb from '@components/dataBreadcrumb.vue'
	import Upload from '@components/Upload/Upload.vue'
	export default {
		components: {
			dataBreadcrumb,
			Upload
		},
		data() {
			let checkPhone = async (rule, value, callback) => {
				if (!value) {
					return callback(new Error('手机号不能为空'));
				} else {
					const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
					console.log(reg.test(value));
					if (reg.test(value)) {
						callback();
					} else {
						return callback(new Error('请输入正确的手机号'));
					}
				}
			};
			// 测试图片
			let checkimg = (rule, value, callback) => {
				if (this.ruleForm.voucherList.length === 0) {
					callback(new Error('请上传凭证'));
				} else {
					callback();
				}
			};
			return {
				breads: ['招标管理', '招标项目管理', '工作台'],
				ruleForm: {
					companyName: '',
					companyTel: '',
					companyPhone: '',
					companyFacsimile: '',
					recipientsName: "",
					recipientsCompany: "",
					recipientsPhone: "",
					recipientsMail: "",
					recipientsAddress: "",
					invoiceType: '',
					invoiceHead: "",
					invoiceTaxNumber: "",
					invoiceAddress: "",
					invoiceTel: "",
					invoiceAccount: '',
					feeWay: '',
					remark: "",
					companyEmail: "",
					voucherList: []
				},
				formrules: {
					companyName: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					companyPhone: [{
						required: true,
						validator: checkPhone,
						trigger: 'blur'
					}],
					invoiceType: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					invoiceTaxNumber: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					invoiceAddress: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					invoiceTel: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					invoiceAccount: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					feeWay: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					voucherList: [{
						required: true,
						validator: checkimg,
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			getfile(val) {
				this.ruleForm.voucherList = 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 bidBookpayment(message)
						if (code === 200) {
							this.$message({
								message: msg,
								type: 'success',
								duration: 1500
							})
							setTimeout(() => {
								this.$router.go(-1)
							}, 1500)
						}
					}
				} catch (e) {
					console.log(e)
				}
			}
		},
		created() {
			this.ruleForm.companyName = JSON.parse(localStorage.getItem("userInfo")).companyName
		}
	}
</script>


<style scoped>
	.message {}

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

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