<template>
	<div>
		<div class="content-head">
			<dataBreadcrumb :breads="breads"></dataBreadcrumb>
			<h3>发布中标公告</h3>
			<h5>发布中标公告</h5>
		</div>
		<div class="content">
			<div class="message">
				<div class="flex-between">
					<div>项目编号：{{projectCode}}</div>
					<div>项目名称：{{projectName}}</div>
				</div>
				<div class="flex-between">
					<div class="flex">
						<div class="adjustment">上传附件：</div>
	
						<singleUpload :limit="1" tip="支持上传1个附件,不超过20M" @input="getfile"></singleUpload>
					</div>
					<div>发布媒体：捷安采官网</div>
				</div>
				<div class="flex-item">
					<div style="width: 50px;">备注：</div>
					<el-input :rows="4" v-model.trim="remark" type="remark" placeholder="请输入备注" maxlength="300">
					</el-input>
				</div>
			</div>
			<div class="form">
				<h3>确定中标人</h3>
				<dataTable :table-data="tableData" :columns="columns" :is-pageobj="false">
					<el-table-column slot="operate" label="操作" align="center" fixed="right" width="200">
						<template slot-scope="scope">
							<el-button type="text" size="small" @click="edit(scope.row)">输入中标价</el-button>
						</template>
					</el-table-column>
				</dataTable>
				<h3 style="margin-top:30px">中标公告内容</h3>
				<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
					<el-form-item label="公告标题" prop="title">
						<el-input v-model.trim="ruleForm.title" maxlength="30"></el-input>
					</el-form-item>
					<el-form-item label="公告内容" prop="content">
						<quill-editor ref="text" v-model.trim="ruleForm.content" :options="editorOption" class="myQuillEditor" />
					</el-form-item>
				</el-form>
			</div>
			<div class="bottomButton flex-center">
				<el-button>返回</el-button>
				<el-button type="primary" @click="submitData">提交审批</el-button>
			</div>
		</div>
		<el-dialog :visible.sync="dialogFormVisible" title="收货地址" width="30%">
			<el-form :model="form">
				<el-form-item label-width="120px" label="输入中标价">
					<el-input-number v-model="form.price" :min="0" :controls="false" :precision="2" placeholder="输入"></el-input-number>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		createwin,
		winPersonInfo
	} from '@api/purchaser/bid'
	import {
		quillEditor
	} from 'vue-quill-editor'
	import 'quill/dist/quill.core.css'
	import 'quill/dist/quill.snow.css'
	import 'quill/dist/quill.bubble.css'
	import dataTable from '@components/nopageTable.vue'
	import dataBreadcrumb from '@components/dataBreadcrumb.vue'
	import singleUpload from '@components/Upload/Upload.vue'
	export default {
		components: {
			dataTable,
			dataBreadcrumb,
			singleUpload, 
			quillEditor
		},
		data() {
			return {
				projectCode: "",
				projectName: "",
				editorOption: {},
				ruleForm: {
					title: '',
					content: '',
					accessoryPOList:[]
				},
				rules: {
					title: [{
						required: true,
						message: '请填写标题',
						trigger: 'blue'
					}],
					content: [{
						required: true,
						message: '请填写内容',
						trigger: 'blue'
					}]
				},
				form: {
					price: ''
				},
				dialogFormVisible: false,
				remark: '',
				breads: ['招标管理', '招标项目管理', '工作台'],
				tableData: [],
				columns: [{
						label: '中标人',
						prop: 'companyName'
					},
					{
						label: '中标价(元)',
						prop: 'price'
					},
					{
						slot: 'operate'
					}
				] // 
			}
		},
		methods: {
			getfile(val) {
				this.ruleForm.accessoryPOList = val
			},
			edit(row) {
				this.dialogFormVisible = true
				this.form = row
			},
			// 中标人列表
			async getwinPersonInfo() {
				try {
					let projectId = localStorage.getItem("projectId")
					const {
						data,
						code
					} = await winPersonInfo(projectId)
					this.tableData.push(data)
				} catch (e) {
					console.log(e)
				}
			},
			async submitData() {
				try {
					const valid = await this.$refs['ruleForm'].validate()
					if (valid) {
						let ruleForm = this.ruleForm;
						ruleForm.projectId = localStorage.getItem("projectId")
						ruleForm.price=this.tableData[0].price
						const {
							code,
							msg
						} = await createwin(ruleForm)
						if (code === 200) {
							this.$message({
								message: msg,
								type: 'success',
								duration: 1500
							})
							setTimeout(() => {
								this.$router.go(-1)
							}, 1500)
						}
					}
				} catch (e) {
					console.log(e)
				}
			}
		},
		created() {
			this.projectCode = localStorage.getItem("projectCode")
			this.projectName = localStorage.getItem("projectName")
			this.getwinPersonInfo();
		}
	}
</script>


<style scoped>
	.message {
		width: 60%;
	}

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

	.form>h3 {
		font-weight: bold;
		margin-bottom: 30px;
	}

	.button {
		width: 100%;
		height: 50px;
		margin-top: 100px;
	}
</style>
