<template>
	<div>
		<div class="content">
			<dataBreadcrumb :breads=" breads"></dataBreadcrumb>
			<changeNav :navs="navs"></changeNav>
			<div class="message">
				<div class="flex-between" style="margin-bottom: 20px;">
					<div>项目编号：{{projectCode}}</div>
					<div>项目名称：{{projectName}}</div>
				</div>
				<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="180px" class="demo-ruleForm">
					<div class="flex-between">
						<el-form-item label="合同名称:" prop="contractName">
							<el-input v-model.trim="ruleForm.contractName" placeholder="请输入" maxlength="30"></el-input>
						</el-form-item>
						<el-form-item label="合同类型:" prop="contractType">
							<el-radio v-model="ruleForm.contractType" label="1">項目合同</el-radio>
							<el-radio v-model="ruleForm.contractType" label="2">应收账款合同</el-radio>
						</el-form-item>
					</div>
					<div class="flex-between">
						<el-form-item label="工期:" prop="timeLimit">
							<el-input v-model.trim="ruleForm.timeLimit" placeholder="请输入" maxlength="30"></el-input>
						</el-form-item>
						<el-form-item label="合同类型总负责人名称:" prop="principalName" class="titlename"> 
							<el-input v-model.trim="ruleForm.principalName" placeholder="请输入" maxlength="30" style="titleinput"></el-input>
						</el-form-item>
					</div>
					<div class="flex-between">
						<el-form-item label="总负责人身份证号:" prop="principalIdNumber">
							<el-input v-model.trim="ruleForm.principalIdNumber" placeholder="请输入" maxlength="30"></el-input>
						</el-form-item>
						<el-form-item label="承包单位名称:" prop="companyName">
							<el-input v-model.trim="ruleForm.companyName" placeholder="请输入" maxlength="30"></el-input>
						</el-form-item>
					</div>
					<div class="flex-between">
						<el-form-item label="是否联合体投标:" prop="isAlliance">
							<el-radio v-model="ruleForm.isAlliance" :label="true">是</el-radio>
							<el-radio v-model="ruleForm.isAlliance" :label="false">否</el-radio>
						</el-form-item>
						<el-form-item label="合同总价（元）:" prop="contractPrice">
							<el-input v-model.trim="ruleForm.contractPrice" placeholder="请输入" maxlength="30"></el-input>
						</el-form-item>
					</div>
					<div class="flex-between">
						<el-form-item label="合同有效期起止日期:" prop="validityTime">
							<el-date-picker v-model="ruleForm.validityTime" type="datetimerange" range-separator="至" start-placeholder="开始日期"
							 end-placeholder="结束日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="合同期限（天）:" prop="deadline">
							<el-input v-model.trim="ruleForm.deadline" placeholder="请输入" maxlength="30"></el-input>
						</el-form-item>
					</div>
					<el-form-item label="合同文件：" prop="file">
						<singleUpload :limit="1" accept=".pdf" tip="支持扩展名：.rar .zip .doc .docx .pdf .jpg..." @input="getfile"></singleUpload>
					</el-form-item>
					<el-form-item label="其他附件：">
						<singleUpload :limit="3" :max="3" tip="支持扩展名：.rar .zip .doc .docx .pdf .jpg..." @input="getfile1"></singleUpload>
					</el-form-item>
					<el-form-item label="合同范围:" prop="remark">
						<el-input v-model.trim="ruleForm.remark" placeholder="请输入" type="textarea" :rows="2" maxlength="300"></el-input>
					</el-form-item>
				</el-form>
				<div class="button flex-center">
					<el-button>返回</el-button>
					<el-button type="primary" @click="submitData">保存</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		contract
	} from '@api/purchaser/bid'
	import dataBreadcrumb from '@components/dataBreadcrumb.vue'
	import changeNav from '@components/changeNav.vue'
	import singleUpload from '@components/Upload/Upload.vue'
	import multiUpload from '@components/Upload/multiUpload.vue'
	export default {
		components: {
			dataBreadcrumb,
			changeNav,
			singleUpload,
			multiUpload
		},
		data() {
			return {
				projectCode: "",
				projectName: "",
				navs: ['合同管理'],
				breads: ['招标管理', '招标项目管理','工作台'],
				ruleForm: {
					contractName: "",
					contractType: "",
					timeLimit: "",
					principalName: "",
					principalIdNumber: "",
					companyName: '',
					isAlliance: "",
					contractPrice: "",
					validityTime: "",
					deadline: "",
					FilePO: [],
					remark: ""
				},
				rules: {
					validityTime: [{
						required: true,
						message: '请选择',
						trigger: 'blur'
					}],
					contractName: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
                    }],
                    file: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
                    }],
				}
			}
		},
		methods: {
			examine() {
				this.$router.push('/admin/bid/bidingDetail')
			},
			getfile(val) {
				console.log(val)
			},
			getfile1(val) {
				console.log(val)
			},
			// 提交表单
			async submitData() {
				try {
					const valid = await this.$refs['ruleForm'].validate()
					if (valid) {
						const {
							code,
							msg
						} = await contract(this.ruleForm);
						if (code === 200) {
							this.$message({
								message: "成功",
								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");
		}
	}
</script>

<style scoped>
	.message {
		width: 80%;
		margin: 0 auto
	}

	.button {
		width: 100%;
		height: 100px;
	}
</style>
