<template>
	<div>
		<div class="content-head">
			<dataBreadcrumb :breads="breads"></dataBreadcrumb>
			<h3>报名</h3>
			<h5>投标报名</h5>
		</div>
		<div class="content">
			<div class="table_pos">
				<el-form ref="form" :model="form" label-width="80px" :rules="rules">
					<el-form-item label="单位名称：">
						<el-input v-model="form.companyName" class="input" disabled></el-input>
					</el-form-item>
					<el-form-item label="联系人：" prop="userId">

						<el-select v-model="form.userId" placeholder="请选择" style="width:300px">
							<el-option v-for="item in users" :label="item.userName" :value="item.id" :key="item.id"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="手机号：">
						<el-input v-model="form.phone" class="input" disabled></el-input>
					</el-form-item>
					<el-form-item label="邮箱：">
						<el-input v-model="form.email" class="input" disabled></el-input>
					</el-form-item>
					<div class="flex-item">
						<div>是否买断账期：</div>
						<el-radio v-model="is_payment_days" label="false">否</el-radio>
						<el-radio v-model="is_payment_days" label="true">是</el-radio>
					</div>
					<div class="flex-center buttom">
						<el-button @click="cancel">取消</el-button>
						<el-button type="primary" @click="sendTo">提交</el-button>
					</div>
				</el-form>
			</div>
		</div>
		<el-dialog :visible.sync="dialogFormVisible">
			<div class="flex">
				<i class="el-icon-warning"></i>
				<h3>请勾选是否买断账期</h3>
			</div>
			<p>买断账期服务是平台提供的优化供应商现金流的服务，选择此服务的供应商仅需支付服务费即可凭借应收账款凭证及在平台的中标数据获得金融公司提供的资产抵押服务，不中标，该服务不生效。详情咨询客服：400-123-123。</p>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	import {
		userList,
		userphone
	} from '@api/common/list'
	import {
		projectapply
	} from '@api/supply/bid'
	import dataTable from '@components/dataTable.vue'
	import dataBreadcrumb from '@components/dataBreadcrumb.vue'

	export default {
		components: {
			dataTable,
			dataBreadcrumb
		},
		data() {
			return {
				is_payment_days: "",
				users: [],
				dialogFormVisible: false,
				breads: ['投标管理', '在线报名', '报名'],
				form: {
					companyName: 1,
					userId: '',
					phone: '1',
					email: '1',
					is_payment_days: ""
				},
				rules: {
					userId: [{
						required: true,
						message: '请选择',
						trigger: 'blur'
					}]

				}
			}
		},
		created() {
			this.form.projectId =localStorage.getItem("projectId")
			this.getuserList();
			this.getuserphone();
			this.form.companyId = localStorage.getItem("companyId")
			this.form.companyName = JSON.parse(localStorage.getItem("userInfo")).companyName
		},
		methods: {
			cancel() {
				this.$router.push("/supply/bid/joinProject/projectList")
			},
			// 提交
			async sendTo() {
				try {
					let is_payment_days = this.is_payment_days
					if (!is_payment_days) {
						this.dialogFormVisible = true
					} else {
						const valid = await this.$refs['form'].validate()
						if (valid) {
							let form = this.form;
							form.is_payment_days = this.is_payment_days
							const {
								code,
								msg
							} = await projectapply(this.form)
							if (code === 200) {
								this.$message({
									message: msg,
									type: 'success',
									duration: 1500
								})
								setTimeout(() => {
									this.$router.go(-1)
								}, 1500)
							}else if(code==500){
								this.$message({
									message: msg,
									type: 'success',
								})
							}
						}
					}
				} catch (e) {
					console.log(e)
				}
			},
			async getuserphone() {
				let id = JSON.parse(localStorage.getItem("userInfo")).userId
				const {
					data,
					code
				} = await userphone(id)
				this.form.email = data.email
				this.form.phone = data.phoneNumber
			},
			async getuserList() {
				let companyId = localStorage.getItem("companyId")
				const {
					data,
					code
				} = await userList(companyId)
				this.users = data
			}
		}
	}
</script>

<style scoped>
	h3 {
		margin-top: 20px;
		margin-left: 20px;
	}

	h5 {
		margin-top: 20px;
		margin-bottom: 5px;
		margin-left: 20px;
	}

	.home {
		padding: 30px;
		box-sizing: border-box;
	}

	.home>.user {
		padding-left: 20px;
		padding-top: 20px;
		box-sizing: border-box;
		background: #fff;
		height: 550px;
	}

	.input {
		width: 300px;
	}

	.table_pos {
		display: flex;
		justify-content: center;
		padding-bottom: 100px;
	}

	.buttom {
		margin-top: 50px;
	}
</style>
