<template>
	<div>
		<div class="content-head">
			<dataBreadcrumb :breads="breads"></dataBreadcrumb>
			<h3>递交投标文件</h3>
			<h5>递交投标文件</h5>
		</div>
		<div class="othercontent">
			<div>
				<div class="describe">投标信息</div>
				<div class="message">
					<div>
						<div>项目编号：{{projectName}}</div>
						<div>项目名称：{{projectCode}}</div>
					</div>
					<div>
						<div v-if="!state">投标状态：待递交投标文件</div>
						<div v-else>投标状态：投标文件递交成功</div>
						<div>投标文件成功递交时间：{{submitTime}}</div>
					</div>
					<div>
						<div>投标截止（开标）时间：{{openBidTime}}</div>
						<div class="flex-item">
							<div>投标截止时间倒计时：</div>
							<timeDown  :endTime='openBidTime'></timeDown>
						</div>
					</div>
					<el-form ref="form" :model="form" :rules="rules" label-width="120px" class="demo-ruleForm">
						<div class="flex-between">
							<el-form-item label="联系人姓名：" prop="bidderName">
								<el-input v-model="form.bidderName"></el-input>
							</el-form-item>
							<el-form-item label="联系人手机：" prop="bidderPhone">
								<el-input v-model="form.bidderPhone"></el-input>
							</el-form-item>
						</div>
						<div>
							<el-form-item label="投标文件：" prop="bidbookId">
								<el-select v-model="form.bidbookId" placeholder="请选择">
									<el-option v-for="item in options" :key="item.id" :label="item.fileName" :value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
						</div>
					</el-form>
				</div>
			</div>
			<!-- <div>
				<div class="describe">上传投标文件</div>
				<div class="message" style="padding:30px 0">

				</div>
			</div> -->
			<div class="bottomButton">
				<el-button @click="back">取消</el-button>
				<!-- <el-button>下载回执</el-button> -->
				<el-button :disabled="!state" type="primary" @click="withdraw">撤回投标文件</el-button>
				<el-button :disabled="state" type="primary" @click="submitData">递交投标文件</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import timeDown from '@components/dayDown.vue'
	import {
		bidBooks,
		bidFile,
		revocationBidbFile,
		timeInfo
	} from '@api/supply/bid'
	import {
		getTime
	} from '@utils/time'
	import dataBreadcrumb from '@components/dataBreadcrumb.vue'
	import Upload from '@components/Upload/Upload.vue'
	export default {
		components: {
			dataBreadcrumb,
			Upload,
			timeDown
		},
		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}$/
					if (reg.test(value)) {
						callback();
					} else {
						return callback(new Error('请输入正确的手机号'));
					}
				}
			};
			return {
				compareTime:"",
				openBidTime:"",
				bidFileId: "",
				submitTime: "暂无",
				state: false,
				options: [],
				projectName: "",
				projectCode: "",
				breads: ['投标管理', '我参与的项目', '工作台'],
				form: {
					bidderName: '',
					bidderPhone: '',
					bidbookId: ""
				},
				rules: {
					bidderName: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					bidderPhone: [{
						required: true,
						validator: checkPhone,
						trigger: 'blur'
					}],
					bidbookId: [{
						required: true,
						message: '请选择',
						trigger: 'change'
					}],
				}
			}
		},
		methods: {
			remaintimeEnd(){
				
			},
			back() {
				this.$router.go(-1)
			},
			// 获取时间
			async gettimeInfo(projectId) {
				
				const {
					data,
					code
				} = await timeInfo(projectId)
				this.openBidTime=data.openBidTime
			},
			// 获取文件列表
			async getbidBooks(projectId) {
			
				const {
					data,
					code
				} = await bidBooks(projectId)
				this.options = data
			},
			// 提交
			async submitData() {
				try {
					const valid = await this.$refs['form'].validate()
					if (valid) {
						let form = this.form
						const {
							code,
							msg
						} = await bidFile(form)
						if (code === 200) {
							//          this.$message.success(msg)
							// this.submitTime=getTime()
							// this.state=true
							// this.bidFileId=form.bidbookId;
							// this.getbidBooks()
							this.$message({
								message: msg,
								type: 'success',
								duration: 1500
							})
							setTimeout(() => {
								this.$router.go(-1)
							}, 1500)
						} else {
							this.$message.error(msg)
						}
					}
				} catch (e) {
					console.log(e)
				}
			},
			// 撤回
			async withdraw() {
				try {
					const {
						msg,
						code
					} = await revocationBidbFile(this.bidFileId)
					if (code === 200) {
						// this.$message.success(msg)
						// this.state=false
						// this.submitTime="暂无"
						// this.getbidBooks()
						this.$message({
							message: msg,
							type: 'success',
							duration: 1500
						})
						setTimeout(() => {
							this.$router.go(-1)
						}, 1500)
					} else {
						this.$message.error(msg)
					}
				} catch (e) {
					console.log(e)
				}
			}
		},
		created() {
			this.projectCode = localStorage.getItem("projectCode")
			this.projectName = localStorage.getItem("projectName")
			let projectId = localStorage.getItem("projectId")
			this.getbidBooks(projectId)
			this.gettimeInfo(projectId)
		}
	}
</script>


<style scoped>
	.othercontent>div {
		background: #fff;
		margin-bottom: 20px;
	}

	.message {
		width: 60%;
		margin: 0 auto;
		padding-bottom: 30px;
	}

	.message>div {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
	}
</style>
