<template>
	<el-form
		label-width="140px"
		:model="ruleForm"
		:rules="rules"
		ref="ruleForm"
	>
		<el-row>
			<el-col :span="12">
				<el-form-item label="招标备案编号:" prop="xmzbbabh">
					<el-input
						placeholder="请输入招标备案编号"
						v-model="ruleForm.xmzbbabh"
						disabled
					></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="招标方式:" prop="xmzbfs">
					<el-input
						placeholder="请输入招标方式"
						v-model="ruleForm.xmzbfs"
						disabled
					></el-input>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="12">
				<el-form-item label="招标价格:" prop="xmzbjg">
					<el-input
						type="number"
						placeholder="请输入招标价格"
						v-model.number="ruleForm.xmzbjg"
						disabled
					></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="中标金额:" prop="zbjg">
					<el-input
						placeholder="请输入中标金额"
						v-model.number="ruleForm.zbjg"
						disabled
					></el-input>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="12">
				<el-form-item label="中标单位:" prop="zbdw">
					<el-input
						placeholder="请输入中标单位"
						v-model="ruleForm.zbdw"
						disabled
					></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="中标时间:" prop="zbsj">
					<el-date-picker
						v-model="ruleForm.zbsj"
						type="date"
						placeholder="选择日期"
						disabled
					></el-date-picker>
				</el-form-item>
			</el-col>
		</el-row>
		<el-row>
			<el-form-item label="项目招标情况附件:" prop="xmzbFileVOList">
				<div class="fileTable">
					<table>
						<thead>
							<tr>
								<th width="10%">序号</th>
								<th width="25%">附件名称</th>
								<th width="25%">上传时间</th>
								<th width="30%">附件</th>
								<!-- <th width="10%" v-if="fatherObj.type != 1 && xmsqIdForm.xmlxzt">
                  操作
                </th> -->
							</tr>
						</thead>
						<tbody>
							<tr
								v-for="(item, index) in ruleForm.xmzbqkList"
								:key="index"
								v-show="ruleForm.xmzbqkList != 0"
							>
								<td>{{ index + 1 }}</td>
								<td>
									<el-form-item>
										<el-input
											placeholder="请输入附件名称"
											v-model="item.xmclmc"
											:disabled="
												fatherObj.type == 1 ||
													xmsqIdForm.xmlxzt > 8
											"
										></el-input>
									</el-form-item>
								</td>
								<td>
									<el-form-item>
										<el-input
											placeholder="请输入上传时间"
											v-model="item.xmclsbsj"
											disabled
										></el-input>
									</el-form-item>
								</td>
								<td>
									<el-upload
										class="upload-demo"
										:action="actionUrl"
										:on-preview="handlePreview"
										:on-remove="handleRemove"
										:before-remove="beforeRemove"
										multiple
										:limit="1"
										:on-exceed="handleExceed"
										:on-success="handleAvatarSuccess"
										:show-file-list="false"
										v-if="
											fatherObj.type < 1 ||
												xmsqIdForm.xmlxzt < 9
										"
										:disabled="fatherObj.type == 1"
									>
										<div @click="getIndex(index)">
											<el-button
												type="primary"
												size="small"
												:disabled="
													editable ||
														fatherObj.type == 1
												"
												>点击上传</el-button
											>
										</div>
									</el-upload>
									<div
										class="fileList"
										v-for="(item2,
										index2) in item.xmclFileList"
										:key="index2"
										v-show="item2.status == 1"
									>
										<i
											class="close"
											@click="deleteFile(index, index2)"
											v-if="
												fatherObj.type !== 1 &&
													xmsqIdForm.xmlxzt < 9
											"
										></i>
										<span
											class="name"
											@click="downLoadFile(item2.fileId)"
										>
											{{ item2.fileName }}
										</span>
									</div>
								</td>
								<!-- <td align="center" v-if="fatherObj.type != 1 && xmsqIdForm.xmlxzt">
                  <el-tooltip class="item" effect="light" content="删除" placement="top">
                    <el-button
                      @click="removeList(index)"
                      type="primary"
                      class="operate_delete_btn iconfont iconshanchu"
                      size="small"
                    ></el-button>
                  </el-tooltip>
                </td> -->
							</tr>
							<tr
								v-if="
									ruleForm.xmzbqkList &&
										ruleForm.xmzbqkList.length == 0
								"
							>
								<td
									colspan="5"
									style="padding: 0; color: #909399; line-height: 60px;"
								>
									暂无数据
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<!-- <div v-if="ruleForm.xmzbFileVOList" v-for="(item, index) in ruleForm.xmzbFileVOList" :key="index">
          <span style="cursor: pointer;" @click="downLoad(item.fileId)">{{ item.fileName }}</span>
        </div> -->
			</el-form-item>
		</el-row>
		<el-row class="center">
			<el-button
				type="primary"
				class="iconfont iconfanhui"
				@click="dialogVisible"
				>返回</el-button
			>
		</el-row>
	</el-form>
</template>
<script>
import { fileApi } from '@/api'
import {
	projectBidding,
	projectBiddingDetail
} from '@/api/projectManagement/index'
export default {
	name: 'shejidbiao',
	props: {
		// 父组件方法
		showDialog6: {
			type: Function,
			default: null
		},
		getList6: {
			type: Function,
			default: null
		},
		// 父组件参数
		fatherObj: {
			type: Object,
			default: null
		},
		fatherEchoForm: {
			type: Object,
			default: null
		},
		xmsqIdForm: {
			type: Object,
			default: null
		},
		xmIdForm: {
			type: Object,
			default: null
		}
	},
	data() {
		return {
			// 下拉框
			xmndValue: '',
			// 表单验证
			rules: {
				xmzbbabh: [
					{
						required: true,
						message: '请输入招标备案编号',
						trigger: 'blur'
					}
				],
				xmzbfs: [
					{
						required: true,
						message: '请输入招标方式',
						trigger: 'blur'
					}
				],
				xmzbjg: [
					{
						type: 'number',
						required: true,
						message: '请输入招标价格',
						trigger: 'blur'
					}
				],
				zbjg: [
					{
						type: 'number',
						required: true,
						message: '请输入中标金额',
						trigger: 'blur'
					}
				],
				zbdw: [
					{
						required: true,
						message: '请输入中标单位',
						trigger: 'blur'
					}
				],
				zbsj: [
					{
						required: true,
						message: '请输入中标时间',
						trigger: 'blur'
					}
				],
				xmzbFileVOList: [
					{
						required: true,
						message: '请上传项目招标情况附件',
						trigger: 'blur'
					}
				]
			},
			// 提交form
			ruleForm: {
				xmzbbabh: '',
				xmzbfs: '',
				xmzbjg: '',
				zbjg: '',
				zbdw: '',
				zbsj: ''
			},
			// 回显form
			echoForm: {},
			// 文件上传路径
			actionUrl: fileApi + '/file/upload',
			fileList: [],
			// 子组件obj
			childObj: {}
		}
	},
	methods: {
		beforeUpload(file) {
			console.log(file.name, file.type)
			var isLimitFile = [
				'.zip',
				'.rar',
				'.jpg',
				'.png',
				'.gif',
				'.jpeg',
				'.bmp',
				'.7z'
			].some((ext) => {
				file.name.endsWith(ext)
			})
			if (
				isLimitFile ||
				file.type.includes('image') ||
				file.type.includes('x-zip-compressed') ||
				file.type.includes('x-rar-compressed')
			) {
				this.$message.error('不能上传图片或者压缩文件')
				return false
			}
		},
		// 文件上传的方法
		handleRemove(file, fileList) {
			console.log(file, fileList)
		},
		handlePreview(file) {
			console.log(file)
		},
		handleExceed(files, fileList) {
			this.$message.warning(
				`当前限制选择 1 个文件，本次选择了 ${
					files.length
				} 个文件，共选择了 ${files.length + fileList.length} 个文件`
			)
		},
		beforeRemove(file, fileList) {
			return this.$confirm(`确定移除 ${file.name}？`, '提示')
		},
		// 文件下载
		downLoad(id) {
			window.open(`${fileApi}/file/download?id=${id}`)
		},
		downLoadFile(id) {
			window.open(`${fileApi}/file/download?id=${id}`)
		},
		// 取消按钮
		dialogVisible() {
			this.$emit('showDialog6', 'false')
			this.$emit('getList6')
		},
		getInfo() {
			let data = {
				xmsqId: this.fatherObj.xmsqId,
				xmzblx: 2
			}
			projectBiddingDetail(data).then((res) => {
				if (res.data) {
					if (res.infoCode === 200) {
						this.ruleForm = res.data
						if (res.data.zbsj) {
							this.ruleForm.zbsj = res.data.zbsj.slice(0, 10)
						}
					} else {
						// this.$message({
						// 	type: 'error',
						// 	message: res.msg,
						// });
					}
				}
			})
		},
		// saveInfo，type = 0为保存，1位提交
		saveInfo(type) {
			let data = this.ruleForm
			data.dataStatus = type
			data.xmzblx = 2
			data.xmsqId = this.fatherObj.xmsqId
			projectBidding(data).then((res) => {
				if (res.infoCode === 200) {
					this.$message({
						type: 'success',
						message: res.msg
					})
				} else {
					// this.$message({
					// 	type: 'error',
					// 	message: res.msg,
					// });
				}
			})
			this.dialogVisible()
		}
	},
	mounted() {
		this.getInfo()
	}
}
</script>

<style lang="scss" scoped>
.center {
	text-align: center;
}
.operate_delete_btn {
	float: none;
}
.check-icon-box {
	width: 100%;
	text-align: right;
	margin-right: 25px;
	.check-icon {
		display: inline-block;
		width: 10%;
		text-align: center;
		line-height: 1.5em;
		margin: 0 auto 10px;
		vertical-align: top;
		color: #006bd5;
		font-size: 32px;
		cursor: pointer;
	}
}
.fileTable {
	width: 100%;
	table,
	th,
	td {
		border: 1px #eaeaea solid;
		border-collapse: collapse;
	}
	th,
	td {
		text-align: center;
		color: #333;
		font-size: 14px;
		height: 35px;
	}
	th,
	tr:hover td {
		background-color: #f6f7f9;
	}
	table {
		width: 100%;
	}
	th {
		font-weight: bold;
	}
	td {
		padding: 20px 10px;
		transition: background-color 0.25s ease;
	}
}
.upload-demo {
	padding: 0 0 10px;
	height: auto;
	line-height: initial;
}

.fileList {
	position: relative;
	height: 25px;
	line-height: 25px;
	&:hover .name {
		color: #409eff;
	}
	.name {
		cursor: pointer;
		color: #606266;
		transition: color 0.3s;
	}
	.close {
		position: absolute;
		top: 50%;
		right: 7px;
		margin-top: -7px;
		width: 14px;
		height: 14px;
		cursor: pointer;
		z-index: 1;
		&:after,
		&:before {
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -5px;
			content: '';
			width: 1px;
			height: 10px;
			background-color: #606266;
		}
		&:after {
			transform: rotate(45deg);
		}
		&:before {
			transform: rotate(-45deg);
		}
	}
}
</style>
