<template>
	<div>
		<div class="content-head">
			<dataBreadcrumb :breads="breads"></dataBreadcrumb>
			<h3>制作投标文件</h3>
			<h5>制作投标文件</h5>
		</div>
		<div class="othercontent">
			<div class="message">
				<div>
					<div class="describe">流程进度</div>
					<div class="step">
						<el-steps :active="active" finish-status="success">
							<el-step title="整本投标文件"></el-step>
							<el-step title="开标一览表"></el-step>
							<el-step title="附件"></el-step>
						</el-steps>
					</div>
				</div>
				<div v-show="active==0">
					<div class="describe">整本投标文件</div>
					<div class="flex-center content">
						<div class="upfile"><span>*</span>投标文件</div>
						<Upload :limit="1" :max="200" tip="请不要上传超过200M的PDF文件" accept=".pdf" @input="getfile"></Upload>
					</div>
				</div>
				<div v-show="active==1">
					<div class="describe">开标一览表</div>
					<div class="flex-center content">
						<el-form ref="form" :model="form" :rules="rules" label-width="150px" class="demo-ruleForm">
							<el-form-item label="投标人名称：">
								<div>{{companyName}}</div>
							</el-form-item>
							<el-form-item label="投标报价（元）：" prop="price">
								<el-input-number v-model="form.price" :min="0" :controls="false" :precision="2" placeholder="请输入"></el-input-number>
							</el-form-item>
						</el-form>
					</div>
				</div>
				<div v-show="active==2">
					<div class="describe">其他文件</div>
					<div class="flex-center content">
						<div style="margin-bottom: 30px;">上传附件：</div>
						<Upload :limit="5" :max="100" tip="支持上传5个文件，每个文件不能超过100M。" @input="getfile1"></Upload>
					</div>
				</div>
				<div class="bottomButton" v-if="active==0">
					<el-button style="margin-top: 12px;" @click="back">取消</el-button>
					<el-button style="margin-top: 12px;" @click="next" type="primary">下一步</el-button>
				</div>
				<div class="bottomButton" v-else-if="active==1">
					<el-button style="margin-top: 12px;" @click="prev">上一步</el-button>
					<el-button style="margin-top: 12px;" @click="next" type="primary">下一步</el-button>
				</div>
				<div class="bottomButton" v-else="active==0">
					<el-button style="margin-top: 12px;" @click="prev">上一步</el-button>
					<el-button style="margin-top: 12px;" @click="next" type="primary">生成投标文件</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		makeFile
	} from '@api/supply/bid'
	import dataBreadcrumb from '@components/dataBreadcrumb.vue'
	import Upload from '@components/Upload/Upload.vue'
	export default {
		components: {
			Upload,
			dataBreadcrumb
		},
		data() {
			return {
				bidFile: [],
               companyName:"",
				form: {
					fileList: [],
					price: undefined,
					bidFileName: "",
					bidFileUrl: ""
				},
				rules: {
					price: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}]
				},
				active: 0,
				breads: ['投标管理', '我参与的项目','工作台']
			}
		},
		methods: {
			async next() {
				try {
					let active = this.active;
					if (active == 0) {
						if (this.bidFile.length > 0) {
							this.form.bidFileName = this.bidFile[0].fileName
							this.form.bidFileUrl = this.bidFile[0].fileUrl
							this.active++
						} else {
							this.$message.error("请上传投标文件")
						}
					} else if (active == 1) {
						const valid = await this.$refs['form'].validate()
						if (valid) {
							this.active++
						}
					} else {
						try {
							let form = this.form;
							form.projectId = localStorage.getItem("projectId")
							const {
								msg,
								code
							} = await makeFile(form)
							if (code == 200) {
								this.$message({
									message: msg,
									type: 'success',
									duration: 1500
								})
								setTimeout(() => {
									this.$router.go(-1)
								}, 1500)
							}
						} catch (e) {
							console.log(e)
						}
					}
				} catch (e) {
					console.log(e)
				}

			},
			prev(){
				this.active--
			},
			back(){
				this.$router.go(-1)
			},
			// 主要文件
			getfile(val) {
				this.bidFile = val
			},
			//附件
			getfile1(val) {
				this.form.fileList = val
			},
		},
		created() {
			this.companyName = JSON.parse(localStorage.getItem("userInfo")).companyName
		}
	}
</script>


<style scoped>
	.upfile{
		margin-top: -25px;
		margin-right: 15px;
	}
	.upfile>span{
		color:#B21F2D;
	}
	.content {
		padding: 50px 0
	}

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

	.step {
		margin: 0 auto;
		width: 60%;
		padding: 50px 0
	}
</style>
