<template>
	<div>
		<div class="content">
			<dataBreadcrumb :breads="breads"></dataBreadcrumb>
			<changeNav :navs="navs"></changeNav>
			<div class="message">
				<el-form ref="form" :model="form" :rules="rules" label-width="160px" class="demo-ruleForm">
					<div class="flex-between">
						<div>项目编号：{{projectCode}}</div>
						<div>项目名称：{{projectName}}</div>
					</div>
					<div class="flex-between">
						<el-form-item label="合同名称：" prop="contractName">
							<el-input v-model="form.contractName" placeholder="请输入"></el-input>
						</el-form-item>
						<el-form-item label="合同类型：" prop="contractType">
							<el-input v-model="form.contractType" placeholder="请输入"></el-input>
						</el-form-item>
					</div>
					<div class="flex-between">
						<el-form-item label="工期：" prop="timeLimit">
							<el-input v-model="form.timeLimit" placeholder="请输入"></el-input>
						</el-form-item>
						<el-form-item label="总负责人名称：" prop="principalName">
							<el-input v-model="form.principalName" placeholder="请输入"></el-input>
						</el-form-item>
					</div>
					<div class="flex-between">
						<el-form-item label="总负责人身份证号：" prop="principalIdNumber">
							<el-input v-model="form.principalIdNumber" placeholder="请输入"></el-input>
						</el-form-item>
						<el-form-item label="采购商名称：" prop="companyName">
							<el-input v-model="form.companyName" placeholder="请输入"></el-input>
						</el-form-item>
					</div>
					<div class="flex-between">
						<el-form-item label="是否联合体投标：" prop="isAlliance">
							<el-radio v-model="form.isAlliance" :label="true">是</el-radio>
							<el-radio v-model="form.isAlliance" :label="false">否</el-radio>
						</el-form-item>
						<el-form-item label="合同总价（元）：" prop="contractPrice">
							<el-input v-model="form.contractPrice" placeholder="请输入"></el-input>
						</el-form-item>
					</div>
					<div class="flex-between">
						<el-form-item label="合同有效期起止日期：" prop="validityTime">
							<el-date-picker v-model="form.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="form.deadline" placeholder="请输入"></el-input>
						</el-form-item>
					</div>
					<el-form-item label="合同文件：" prop="file">
						<singleUpload :limit="1" :max="100" accept=".pdf" tip="支持上传一个pdf格式文件,大小不超过100M" @input="getfile" :fileList="ruleForm.contractFileName"></singleUpload>
					</el-form-item>
					<el-form-item label="其它附件：">
						<singleUpload :limit="3" :max="100" tip="支持上传三份附件,大小不超过100M" @input="getfile1" :fileList="ruleForm.fileList"></singleUpload>
					</el-form-item>
					<el-form-item label="合同范围：" prop="remark">
						<el-input v-model="form.remark" :rows="4" placeholder="请输入" type="textarea"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div class="centerButton">
				<el-button @click="back">返回</el-button>
				<el-button type="primary">保存</el-button>
			</div>
		</div>
	</div>
</template>

<script>
import singleUpload from '@components/Upload/Upload.vue'
	import {
		contractdetail
	} from '@api/supply/bid'
	import dataBreadcrumb from '@components/dataBreadcrumb.vue'
	import changeNav from '@components/changeNav.vue'
	export default {
		components: {
			dataBreadcrumb,
            changeNav,
            singleUpload
		},
		data() {
			return {
				projectCode:"",
				projectName:"",
				breads: ['投标管理 ', '我参加的项目', '工作台'],
				navs: ['合同管理'],
				form: {
					contractName: "",
					contractType: "",
					timeLimit: "",
					principalName: "",
					principalIdNumber: "",
					companyName: '',
					isAlliance: "",
					contractPrice: "",
					validityTime: "",
					deadline: "",
					/* FilePO: [], */
                    remark: "",
                    fileList:[],
                    contractFileName:[]
				},
				rules: {
					validityTime: [{
						required: true,
						message: '请选择',
						trigger: 'blur'
					}],
					contractName: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
                    }],
                    file: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
                    }],
				},
				projectCode: "",
				projectName: ""
			}
		},
		methods: {
			back() {
				this.$router.go(-1)
			},
			async getcontractdetaill() {
				let projectId = localStorage.getItem("projectId")
				const {
					data,
					code
				} = await contractdetail(projectId)
				if(code==200){
                    this.ruleForm = data
                    for(let item in data.contractFileName){
                        this.form.contractName = item
                    }
                    for(let item1 in data.fileList){
                        this.form.fileList = item1
                    }
                }
            },
            getfile(val) {
				this.form.contractFileName = val
			},
			getfile1(val) {
				this.form.fileList = val
			},
		},
		created() {
			this.projectCode = localStorage.getItem("projectCode");
			this.projectName = localStorage.getItem("projectName");
			this.getcontractdetaill()
		}

	}
</script>
<style scoped>
	.message {
		width: 60%;
		margin: 0 auto
	}
</style>
