<template>
	<div>
		<div class="content">
			<dataBreadcrumb :breads="breads"></dataBreadcrumb>
			<div class="message">
				<div class="flex-between">
					<div>招标文件：<span @click="down(bidDetail.fileUrl)">{{bidDetail.fileName}}</span></div>
					<div>开标信息：<span @click="changeOpen">开标一览表</span></div>
				</div>
				<div class="flex upload">
					<div>变更信息：</div
					<ul class="title">
						<li class="flex" v-for="(item,index) in changeList" :key="index">
							<router-link :to="{path: '/purchaser/bid/bidStage/changeList/see', query: {id: item.noticeId }}">{{item.title}}</router-link>
						</li>
					</ul>
				</div>
				<!-- 投标文件 -->
				<div>
					<div>投标文件：</div>
					<dataTable :table-data="bids" :columns="bidTitle" :is-index="true">
						<el-table-column slot="operate" label="文件" align="center" fixed="right">
							<template slot-scope="scope">
								<div class="flex file">
									<div @click="down(scope.row.fileUrl)">{{scope.row.fileName}}</div>
									<div v-for="(file,index) in scope.row.fileList" :key="index" @click="down(file.fileUrl)">{{ file.fileName }}</div>
								</div>
							</template>
						</el-table-column>
					</dataTable>
				</div>
				<!-- 评审信息 -->
				<div style="margin-top:100px">
					<div class="flex-between">
						<h5>评审信息</h5>
						<el-button type="primary" size="small" @click="jump">澄清质询管理</el-button>
					</div>
					<dataTable :table-data="review" :columns="reviewTitle" :is-index="true">
						<el-table-column slot="operate" label="资格审查" align="center" fixed="right">
							<template slot-scope="scope">
								<div v-if="scope.row.qualification==true">通过</div>
								<div v-if="scope.row.qualification==false">未通过</div>
							</template>
						</el-table-column>
						<el-table-column slot="operate" label="符合性审查" align="center" fixed="right">
							<template slot-scope="scope">
								<div v-if="scope.row.conformity==true">通过</div>
								<div v-if="scope.row.conformity==false">未通过</div>
							</template>
						</el-table-column>
						<el-table-column slot="operate" label="手动废标" align="center" fixed="right">
							<template slot-scope="scope">
								<div v-if="scope.row.bidRejection==true">通过</div>
								<div v-if="scope.row.bidRejection==false">未通过</div>
							</template>
						</el-table-column>
						<el-table-column slot="operate" label="结论" align="center" fixed="right">
							<template slot-scope="scope">
								<div v-if="scope.row.conclusion==true">通过</div>
								<div v-if="scope.row.conclusion==false">未通过</div>
							</template>
						</el-table-column>
						<el-table-column slot="operate" label="操作" align="center" fixed="right">
							<template slot-scope="scope">
								<el-button type="text" size="small" @click="handleEdit(scope.row,scope.$index)">编辑</el-button>
							</template>
						</el-table-column>
					</dataTable>
				</div>
				<!-- 排名信息 -->
				<div>
					<h5>排名信息</h5>
					<dataTable :table-data="rank" :columns="rankTitle" :is-index="true">
						<el-table-column slot="operate" label="是否中标候选人" align="center" fixed="right">
							<template slot-scope="scope">
                               <div v-if="scope.row.winPerson=='true'">是</div>
							    <div v-if="scope.row.winPerson=='false'">否</div>
							</template>
						</el-table-column>
						<el-table-column slot="operate" label="排名" align="center" fixed="right">
							<template slot-scope="scope">
								<div v-if="scope.row.finalScore">{{scope.$index+1}}</div>
							</template>
						</el-table-column>
						<el-table-column slot="operate" label="最终得分" align="center" fixed="right">
							<template slot-scope="scope">
								<div v-if="scope.row.finalScore">{{(scope.row.finalScore)}}</div>
							</template>
						</el-table-column>
						<el-table-column slot="operate" label="操作" align="center" fixed="right">
							<template slot-scope="scope">
								<el-button type="text" size="small" @click="Edit(scope.row,scope.$index)">编辑</el-button>
							</template>
						</el-table-column>
					</dataTable>
				</div>
				<div class="flex">
					<div>评标附件：</div>
					<singleUpload :limit="5" :max="100" tip="最多上传5份，每份不超过100M." @input="getfile"></singleUpload>
				</div>
				<div class="button">
					<el-button @click="back">返回</el-button>
					<el-button type="primary" @click="complete">完成</el-button>
				</div>
			</div>
		</div>
		<!-- 编辑评审信息-->
		<el-dialog :visible.sync="isEvaluate" title="编辑">
			<el-form :model="evaluateForm" ref="evaluateForm" label-width="100px" :rules="rules">
				<el-form-item label="资格审查" prop="qualification">
					<el-radio v-model="evaluateForm.qualification" :label="true">通过</el-radio>
					<el-radio v-model="evaluateForm.qualification" :label="false">未通过</el-radio>
				</el-form-item>
				<el-form-item label="符合性审查" prop="conformity">
					<el-radio v-model="evaluateForm.conformity" :label="true">通过</el-radio>
					<el-radio v-model="evaluateForm.conformity" :label="false">未通过</el-radio>
				</el-form-item>
				<el-form-item label="手动废标" prop='bidRejection'>
					<el-radio v-model="evaluateForm.bidRejection" :label="true">通过</el-radio>
					<el-radio v-model="evaluateForm.bidRejection" :label="false">未通过</el-radio>
				</el-form-item>
				<el-form-item label="结论" prop="conclusion">
					<el-radio v-model="evaluateForm.conclusion" :label="true">通过</el-radio>
					<el-radio v-model="evaluateForm.conclusion" :label="false">未通过</el-radio>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="isEvaluate = false">取 消</el-button>
				<el-button type="primary" @click="editCompanyEvaluate">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 编辑公司排名-->
		<el-dialog title="编辑" :visible.sync="isRank" width="40%">
			<el-form :model="rankForm" ref="rankForm" :rules="rules">
				<el-form-item label="商务评分" prop="commercialGrade">
					<el-input-number v-model="rankForm.commercialGrade" :min="0" :controls="false" :precision="2" placeholder="请输入"></el-input-number>
				</el-form-item>
				<el-form-item label="技术评分" prop="skillGrade">
					<el-input-number v-model="rankForm.skillGrade" :min="0" :controls="false" :precision="2" placeholder="请输入"></el-input-number>
				</el-form-item>
				<el-form-item label="价格评分" prop="priceGrade">
					<el-input-number v-model="rankForm.priceGrade" :min="0" :controls="false" :precision="2" placeholder="请输入"></el-input-number>

				</el-form-item>
				<el-form-item label="评标价" prop="evaluationPrice">
					<el-input-number v-model="rankForm.evaluationPrice" :min="0" :controls="false" :precision="2" placeholder="请输入"></el-input-number>
				</el-form-item>
				<el-form-item label="是否中标候选人" prop="winPerson">
					<el-radio v-model="rankForm.winPerson" label="true">是</el-radio>
					<el-radio v-model="rankForm.winPerson" label="false">否</el-radio>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="isRank = false">取 消</el-button>
				<el-button type="primary" @click="editCompanyRank">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 开标一览表 -->
		<el-dialog title="开标一览表" :visible.sync="isOpenInfo">
			<dataTable :tableData="tableData" :columns="nopagecolumns" :margin-top="0" :margin-bottom="0">
			</dataTable>
			<div slot="footer" class="dialog-footer">
				<el-button @click="isOpenInfo = false">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		bidderlist,
		saveCompanyEvaluate,
		saveCompanyRank,
		bidBookDownload,
		changeNoticelist,
		bidFilelist,
		accessoryupload,
		openInfo
	} from '@api/purchaser/bid'
	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
		},
		data() {
			return {
				isOpenInfo:false,
				tableData:[],
				nopagecolumns: [{
						label: '投标人名称',
						prop: 'companyName'
					},
					{
						label: '投标报价(元)',
						prop: 'price'
					},
					{
						label: '是否签名',
						prop: 'isSign',
					},
				], //
				rules: {
					qualification: [{
						required: true,
						message: '请选择',
						trigger: 'change'
					}],
					conformity: [{
						required: true,
						message: '请选择',
						trigger: 'change'
					}],
					bidRejection: [{
						required: true,
						message: '请选择',
						trigger: 'change'
					}],
					conclusion: [{
						required: true,
						message: '请选择',
						trigger: 'change'
					}],
					commercialGrade: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					skillGrade: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					priceGrade: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					evaluationPrice: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}],
					winPerson: [{
						required: true,
						message: '请选择',
						trigger: 'change'
					}]
				},
				file: [],
				downloadList: [],
				changeList: [],
				bidDetail: "",
				evaluateForm: {
					qualification: '',
					conformity: '',
					bidRejection: '',
					conclusion: ''
				},
				evaluateIdx: '',
				isEvaluate: false,
				rankForm: {
					price: "",
				},
				rankIdx: "",
				isRank: false,
				projectId: 2,
				rankTitle: [{
						label: '投标人名称',
						prop: 'companyName'
					},
					{
						label: '投标价(元)',
						prop: 'price'
					},
					{
						label: '商务评分',
						prop: 'commercialGrade'
					},
					{
						label: '技术评分',
						prop: 'skillGrade'
					},
					{
						label: '价格评分',
						prop: 'priceGrade'
					},
					{
						label: '评标价(元)',
						prop: 'evaluationPrice'
					},
					{
						slot: 'operate'
					}
				],
				rank: [],
				bidTitle: [{
						label: '投标人',
						prop: 'companyName'
					},
					{
						slot: 'operate'
					}
				],
				bids: [],
				breads: ['招标管理', '招标项目管理', '工作台'],
				review: [],
				reviewTitle: [{
						label: '投标人名称',
						prop: 'companyName'
					},
					{
						slot: 'operate'
					}
				] // 操作列
			}
		},
		watch: {
			rank: {
				handler(newVal, oldVal) {
					console.log('深度监听rank', newVal, oldVal)
					if (newVal !== oldVal) {
						console.log("改变")
					}
				},
				deep: true
			},
			review: {
				handler(newVal, oldVal) {
					console.log('深度监听review', newVal, oldVal)
					if (newVal !== oldVal) {
						console.log("改变")
					}
				},
				deep: true
			}
		},
		created() {
			this.getbidFilelist();
			this.getchangeNoticelist();
			this.getbidBookDownload();
			this.getbidderlist()
		},
		methods: {
			changeOpen(){
				this.isOpenInfo=true;
				this.getopenInfo() ;
			},
			// 开标一览表
			async getopenInfo() {
				try {
					let projectId = localStorage.getItem("projectId")
					const {
						data,
						code
					} = await openInfo(projectId)
					if (code == 200) {
						for (let item of data) {
							if (item.isSign) {
								item.isSign = "是"
							} else {
								item.isSign = "否"
							}
						}
						this.tableData = data
					}
				} catch (e) {
					console.log(e)
				}
			},
			down(url) {
				window.open(url)
			},
			jump() {
				this.$router.push("/purchaser/bid/bidEvaluation/review/clear")
			},
			compare(property) {
				return function(a, b) {
					var value1 = a[property];
					var value2 = b[property];
					return value2 - value1;
				}
			},
			getfile(val) {
				this.file = val
			},
			// 完成按钮
			async complete() {
				try {
					let message = {}
					message.projectId = localStorage.getItem("projectId")
					message.fileList = this.file
					const {
						msg,
						code
					} = await accessoryupload(message)
					if (code === 200) {
						this.$message({
							message: msg,
							type: 'success',
							duration: 1500
						})
						setTimeout(() => {
							this.$router.go(-1)
						}, 1500)

					} else {
						this.$message.error(msg)
					}
				} catch (e) {
					console.log(e)
				}
			},
			back() {
				this.$router.go(-1)
			},
			download(url) {
				window.open(url)
			},
			async getbidBookDownload() {
				try {
					let projectId = localStorage.getItem("projectId")
					const {
						data,
						code
					} = await bidBookDownload(projectId)
					if (code === 200) {
						this.bidDetail = data
					}
				} catch (e) {
					console.log(e)
				}
			},
			// 查看投标文件
			async getbidFilelist() {
				let projectId = localStorage.getItem("projectId");
				const {
					data,
					code
				} = await bidFilelist(projectId)
				if (code === 200) {
					this.bids = data
				}
			},
			// 查看变更信息
			async getchangeNoticelist() {
				let projectId = localStorage.getItem("projectId");
				const {
					data,
					code
				} = await changeNoticelist(projectId)
				if (code === 200) {
					this.changeList = data;
				}
			},

			// 排名信息编辑
			Edit(row, index) {
				this.rankForm = Object.assign({}, row)
				this.isRank = true,
					this.RankIdx = index
			},

			// 提交排名信息
			async editCompanyRank() {
				try {
					const valid = await this.$refs['rankForm'].validate()
					if (valid) {
						const {
							code,
							msg
						} = await saveCompanyRank(this.rankForm)
						if (code === 200) {
							this.$message.success(msg)
							this.isRank = false
							this.rankForm.finalScore = this.rankForm.commercialGrade + this.rankForm.skillGrade + this.rankForm.priceGrade
							this.$set(this.rank, this.RankIdx, this.rankForm)
							this.rank.sort(this.compare('finalScore'))
						}
					}
				} catch (e) {
					console.log(e)
				}
			},

			//评审信息编辑
			handleEdit(row, index) {
				this.evaluateForm = Object.assign({}, row)
				this.isEvaluate = true,
					this.evaluateIdx = index
			},
			// 提交评审信息
			async editCompanyEvaluate() {
				try {
					const valid = await this.$refs['evaluateForm'].validate()
					if (valid) {
						const {
							code,
							msg
						} = await saveCompanyEvaluate(this.evaluateForm)
						if (code === 200) {
							this.$message.success(msg)
							this.isEvaluate = false
							this.$set(this.review, this.evaluateIdx, this.evaluateForm)
						}
					}
				} catch (e) {
					console.log(e)
				}
			},


			async getbidderlist() {
				let projectId = localStorage.getItem("projectId");
				const {
					data,
					code
				} = await bidderlist(projectId)
				this.review = data
				this.rank = data
			}
		}
	}
</script>

<style scoped>
	.file>li {
		margin-right: 10px;
		color: #113DEE
	}

	.message {
		margin-left: 50px;
		margin-bottom: 50px;

	}

	.message span {
		color: #113DEE
	}

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

	.title>li {
		margin-bottom: 10px;
	}

	.upload button {
		border: 1px solid #000000;
		background: #fff;
		width: 50px;
		height: 20px;
		margin-left: 10px;
	}

	h5 {
		font-weight: bold;
		margin-bottom: 20px;
	}

	.button {
		width: 280px;
		margin: 80px auto 30px
	}
</style>
