<template>
	<el-form
		label-width="200px"
		:model="ruleForm"
		:rules="rules"
		ref="ruleForm"
	>
		<el-row>
			<el-form-item label="项目名称:" prop="xmmc">
				<el-input
					placeholder="请输入项目名称"
					v-model="ruleForm.xmmc"
					disabled
				></el-input>
			</el-form-item>
		</el-row>
		<el-row>
			<el-form-item label="项目主体:" prop="xmztgs">
				<el-input
					placeholder="请输入项目主体"
					v-model="ruleForm.xmztgs"
					disabled
				></el-input>
			</el-form-item>
		</el-row>
		<el-row>
			<el-form-item label="项目位置:" prop="xmwz">
				<el-input
					placeholder="请输入项目位置"
					v-model="ruleForm.xmwz"
					disabled
				></el-input>
			</el-form-item>
		</el-row>
		<el-row>
			<el-form-item label="项目内容:" prop="xmnr">
				<el-input
					placeholder="请输入项目内容"
					v-model="ruleForm.xmnr"
					disabled
				></el-input>
			</el-form-item>
		</el-row>
		<el-row>
			<el-form-item label="预期效果:" prop="yqxg">
				<el-input
					placeholder="请输入预期效果"
					v-model="ruleForm.yqxg"
					disabled
				></el-input>
			</el-form-item>
		</el-row>
		<el-row>
			<el-form-item label="项目投资情况和资金来源:" prop="xmtzqkhzjly">
				<el-input
					placeholder="请输入项目投资情况和资金来源"
					v-model="ruleForm.xmtzqkhzjly"
					disabled
				></el-input>
			</el-form-item>
		</el-row>
		<el-row>
			<el-form-item label="项目建设期:" prop="xmjsq">
				<el-input
					placeholder="请输入项目建设期"
					v-model="ruleForm.xmjsq"
					disabled
				></el-input>
			</el-form-item>
		</el-row>
		<el-row>
			<el-form-item label="项目报建情况:">
				<div class="fileTable">
					<table>
						<thead>
							<tr>
								<th width="10%">序号</th>
								<th width="25%">附件名称</th>
								<th width="25%">上传时间</th>
								<th width="40%">附件</th>
							</tr>
						</thead>
						<tbody>
							<tr
								v-for="(item, index) in ruleForm.xmjysbgList"
								:key="index"
								v-if="xmjysbgLength != 0"
							>
								<td>{{ index + 1 }}</td>
								<td>
									<el-form-item>
										<el-input
											placeholder="请输入附件名称"
											v-model="item.xmclmc"
											disabled
										></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>
									<div
										class="fileList"
										v-for="(item2,
										index2) in item.xmclFileList"
										:key="index2"
										v-if="item2.status == 1"
									>
										<span
											class="name"
											@click="downLoadFile(item2.fileId)"
										>
											{{ item2.fileName }}
										</span>
									</div>
								</td>
							</tr>
							<tr v-if="xmjysbgLength == 0">
								<td
									colspan="4"
									style="padding: 0; color: #909399; line-height: 60px;"
								>
									暂无数据
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</el-form-item>
		</el-row>
		<div style="padding-top: 20px; border-top: 1px #409eff solid;">
			<el-row>
				<el-form-item label="审批结果:">
					<el-radio-group
						:disabled="
							fatherObj.type == 1 || xmsqIdForm.xmzbzt >= 5
						"
						v-model="ruleForm.psjgzt"
					>
						<el-radio :label="1">通过</el-radio>
						<el-radio :label="0">不通过</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-row>
			<el-row>
				<el-form-item label="审批意见:">
					<el-input
						type="textarea"
						:rows="3"
						placeholder="请输入审批意见"
						:disabled="
							fatherObj.type == 1 || xmsqIdForm.xmzbzt >= 5
						"
						v-model="ruleForm.psyj"
					></el-input>
				</el-form-item>
			</el-row>
			<el-row>
				<el-form-item label=" ">
					<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.xmzbzt < 5
										"
									>
										操作
									</th>
								</tr>
							</thead>
							<tbody>
								<tr
									v-for="(item, index) in attachFiles"
									:key="index"
									v-if="xmbgshLength != 0"
								>
									<td>{{ index + 1 }}</td>
									<td>
										<el-form-item>
											<el-input
												placeholder="请输入附件名称"
												v-model="item.xmclmc"
												:disabled="
													fatherObj.type == 1 ||
														xmsqIdForm.xmzbzt > 4
												"
											></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
											:before-upload="beforeUpload"
											class="upload-demo"
											:action="actionUrl"
											:on-preview="handlePreview"
											:on-remove="
												(file) =>
													handleRemove(file, index)
											"
											:before-remove="beforeRemove"
											:limit="1"
											:on-exceed="handleExceed"
											:on-success="
												(res) =>
													handleSuccess(res, index)
											"
											:file-list="item.xmclFileList"
											v-if="
												fatherObj.type < 1 ||
													xmsqIdForm.xmzbzt < 5
											"
										>
											<div @click="getIndex(index)">
												<el-button
													type="primary"
													size="small"
													:disabled="editable"
													>点击上传</el-button
												>
											</div>
										</el-upload>
										<div
											class="fileList"
											v-for="(item2,
											index2) in item.xmclFileList"
											:key="index2"
											v-if="
												fatherObj.type == 1 ||
													xmsqIdForm.xmzbzt >= 5
											"
										>
											<!-- <i
                        class="close"
                        @click="deleteFile(index, index2)"
                        v-if="fatherObj.type < 1 || xmsqIdForm.xmzbzt < 5"
                      ></i> -->
											<span
												class="name"
												@click="
													downLoadFile(item2.fileId)
												"
											>
												{{ item2.fileName }}
											</span>
										</div>
									</td>
									<td
										align="center"
										v-if="
											fatherObj.type != 1 &&
												xmsqIdForm.xmzbzt < 5
										"
									>
										<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="xmbgshLength == 0">
									<td
										colspan="5"
										style="padding: 0; color: #909399; line-height: 60px;"
									>
										暂无数据
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div
						class="check-icon-box"
						v-if="fatherObj.type != 1 && xmsqIdForm.xmzbzt < 5"
					>
						<!-- <span class="el-icon-remove check-icon" @click="removeList"></span> -->
						<span
							class="el-icon-circle-plus check-icon"
							@click="addList"
						></span>
					</div>
				</el-form-item>
			</el-row>
		</div>
		<el-row class="center">
			<el-button
				type="primary"
				class="iconfont iconshenhe"
				@click="saveInfo('ruleForm', 0)"
				v-if="fatherObj.type != 1 && xmsqIdForm.xmzbzt == 4"
				>审核</el-button
			>
			<el-button
				type="primary"
				class="iconfont iconfanhui"
				@click="dialogVisible"
				>返回</el-button
			>
		</el-row>
	</el-form>
</template>
<script>
import { fileApi } from '@/api'
import {
	projectProposalReport,
	projectProposalReportDetail,
	projectProposalReportApproval
} from '@/api/projectManagement/index'
export default {
	name: 'jianyishu',
	props: {
		// 父组件方法
		showDialog3: {
			type: Function,
			default: null
		},
		getList3: {
			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 {
			attachFiles: [],

			// 下拉框
			xmndValue: '',
			// 表单验证
			rules: {
				xmmc: [
					{
						required: true,
						message: '请输入项目名称',
						trigger: 'blur'
					}
				],
				xmztgs: [
					{
						required: true,
						message: '请输入项目主体',
						trigger: 'blur'
					}
				],
				xmwz: [
					{
						required: true,
						message: '请输入项目位置',
						trigger: 'blur'
					}
				],
				xmnr: [
					{
						required: true,
						message: '请输入项目内容',
						trigger: 'blur'
					}
				],
				yqxg: [
					{
						required: true,
						message: '请输入预期效果',
						trigger: 'blur'
					}
				],
				xmtzqkhzjly: [
					{
						required: true,
						message: '请输入项目投资情况和资金来源',
						trigger: 'blur'
					}
				],
				xmjsq: [
					{
						required: true,
						message: '请输入项目建设期',
						trigger: 'blur'
					}
				]
			},
			// 提交form
			ruleForm: {
				sjId: '',
				xmsqId: this.xmsqIdForm.xmsqId,
				xmwblx: 1
			},
			// 文件上传路径
			actionUrl: fileApi + '/file/upload',
			// 项目报建情况附件
			xmjysbgList: [],
			// 项目报建附件长度
			xmjysbgLength: '',
			buttonIndex: '',
			// 系统当前时间
			nowTime: '',
			editable: false,
			// 建议书审核附件
			xmbgshList: [],
			// 审核附件长度
			xmbgshLength: ''
		}
	},
	methods: {
		beforeUpload(file) {
			const isLt200M = file.size / 1024 / 1024 < 200
			if (!isLt200M) {
				this.$message.error('上传文件大小不能超过 200MB!')
			}
			return isLt200M
		},
		handleRemove(file, index) {
			if (!file.fileId) {
				return
			}

			if (file.sjId) {
				this.attachFiles[index].xmclFileList[0].status = 0
				this.attachFiles[index]._file = [
					...this.attachFiles[index].xmclFileList
				]
			}
			this.attachFiles[index].xmclFileList.length = 0
		},
		handlePreview(file) {
			this.downLoadFile(file.fileId)
		},
		handleExceed(files, fileList) {
			this.$message.warning(
				`当前限制选择 1 个文件，本次选择了 ${
					files.length
				} 个文件，共选择了 ${files.length + fileList.length} 个文件`
			)
		},
		beforeRemove(file, fileList) {
			if (!file.fileId) {
				return
			}

			return this.$confirm(`确定移除 ${file.name}？`, '提示')
		},
		handleSuccess(res, thisIndex) {
			let obj = {
				fileId: res.data.id,
				fileName: res.data.name,
				name: res.data.name,
				status: 1
			}
			this.attachFiles[thisIndex].xmclFileList = []
			this.attachFiles[thisIndex].xmclFileList.push(obj)
			this.ruleForm.xmbgshList = [...this.attachFiles]
		},
		// 文件下载
		downLoadFile(id) {
			window.open(`${fileApi}/file/download?id=${id}`)
		},
		// 删除文件
		deleteFile(index, index2) {
			this.attachFiles[index].xmclFileList[index2].status = 0
		},
		dialogVisible() {
			this.$emit('showDialog3', 'false')
			this.$emit('getList3')
		},
		getDetail() {
			let data = {
				xmsqId: this.xmsqIdForm.xmsqId,
				xmwblx: 1
			}
			projectProposalReportDetail(data).then((res) => {
				if (res.data && res.infoCode === 200) {
					this.ruleForm = res.data
					this.xmjysbgList = res.data.xmjysbgList
					this.xmjysbgLength = res.data.xmjysbgList.length
					this.attachFiles = res.data.xmbgshList
					this.attachFiles.forEach((d) => {
						let file = d.xmclFileList[0]
						file.name = file.fileName
					})
					this.xmbgshLength = res.data.xmbgshList.length
					console.log('建议书this.ruleForm:', this.ruleForm)
					console.log('建议书this.attachFiles:', this.attachFiles)
				}
			})
		},
		saveInfo(formName, type) {
			console.log(formName)
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.ruleForm.xmbgshList = this.attachFiles.map((d) => {
						if (d._file)
							return {
								...d,
								xmclFileList: [...d.xmclFileList, ...d._file]
							}
						else return d
					})
					let data = this.ruleForm
					console.log('建议书data:', data)
					projectProposalReportApproval(data).then((res) => {
						if (res.infoCode === 200) {
							this.$message({
								type: 'success',
								message: '审核成功!'
							})
						} else {
							this.$message({
								type: 'error',
								message: res.msg
							})
						}
						this.dialogVisible()
					})
				} else {
					console.log('error submit!!')
					return false
				}
			})
		},
		addList() {
			let obj = {
				sjId: '',
				xmsqId: '',
				xmcllx: 14,
				xmclmc: '',
				xmclsbsj: this.nowTime,
				xmclFileList: []
			}
			this.attachFiles.push(obj)
			this.xmbgshLength = this.attachFiles.length
			this.ruleForm.xmbgshList = this.attachFiles
			console.log('addList方法this.attachFiles:', this.attachFiles)
		},
		removeList(index) {
			//   this.ruleForm.xmbgshList.pop();
			this.attachFiles.splice(index, 1)
			this.xmbgshLength = this.attachFiles.length
		},
		// 获取上传按钮在表格中的索引
		getIndex(index) {
			this.buttonIndex = index
			console.log('getIndex方法index:', index)
		}
	},
	mounted() {
		this.getDetail()
		this.nowTime =
			String(new Date().getFullYear()) +
			'-' +
			String(new Date().getMonth() + 1) +
			'-' +
			String(new Date().getDate())
	}
}
</script>

<style lang="scss" scoped>
.center {
	text-align: center;
}
.operate_delete_btn {
	float: none !important;
}
.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>
