<template>
	<el-form label-width="140px" ref="fatherObj">
		<el-row>
			<el-form-item label="项目申请条件标题:">
				<el-input
					placeholder="请输入项目申请条件标题"
					v-model="submitForm.xmfabt"
					disabled
				></el-input>
			</el-form-item>
		</el-row>
		<el-row>
			<el-form-item label="年度:">
				<el-input
					placeholder="请输入项目年度"
					v-model="submitForm.xmnd"
					disabled
				></el-input>
			</el-form-item>
		</el-row>
		<el-row>
			<el-form-item label="项目申请单位:">
				<el-input
					placeholder="请输入申请单位名称"
					v-model="submitForm.xmsqdw"
					disabled
				></el-input>
			</el-form-item>
		</el-row>
		<el-row>
			<el-form-item label="方案详情:">
				<el-input
					type="textarea"
					:rows="3"
					placeholder="请输入方案详情"
					v-model="submitForm.xmfaxq"
					disabled
				></el-input>
			</el-form-item>
		</el-row>
		<el-row>
			<el-form-item label="项目申请条件附件:">
				<div class="fileTable" style="width: 100%;">
					<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 this.xmsqtjList"
								:key="index"
								v-if="xmsqtjLength != 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="xmsqtjLength == 0">
								<td
									colspan="4"
									style="padding: 0; color: #909399; line-height: 60px;"
								>
									暂无数据
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</el-form-item>
		</el-row>
		<el-row style="padding-top: 20px; border-top: 1px #409eff solid;">
			<el-form-item label="项目申请:">
				<el-input
					type="textarea"
					:rows="3"
					placeholder="请输入内容"
					v-model="submitForm.xmsqnr"
					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 submitForm.xmsqclList"
								:key="index"
								v-if="xmsqclLength != 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"
									>
										<!-- <i class="close" @click="deleteFile(index, index2)" v-if="!editable"></i> -->
										<span
											class="name"
											@click="downLoadFile(item2.fileId)"
										>
											{{ item2.fileName }}
										</span>
									</div>
								</td>
							</tr>
							<tr v-if="xmsqclLength == 0">
								<td
									colspan="4"
									style="padding: 0; color: #909399; line-height: 60px;"
								>
									暂无数据
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div
					class="check-icon-box"
					v-if="
						fatherObj.type == 0 ||
							(fatherObj.type != 1 && xmsqIdForm.xmlxzt < 2)
					"
				>
					<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>
		<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 {
	projectApplication,
	projectApplicationGet,
	getProject
} from '@/api/projectManagement/index'
export default {
	name: 'xiangmushenqing',
	props: {
		// 父组件方法
		showDialog1: {
			type: Function,
			default: null
		},
		getList1: {
			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: '',
			// 文件上传路径
			actionUrl: FileApi + '/file/upload',
			fileList: [],
			// 提交form
			submitForm: {
				xmId: '',
				xmlxzt: '',
				xmfabt: '',
				xmsqdw: '',
				xmnd: '',
				fbsj: '',
				xmsqtjList: [],
				xmsqnr: '',
				xmsqclList: []
			},
			// 申请条件附件
			xmsqtjList: [],
			// 申请条件数组长度
			xmsqtjLength: '',
			// 项目材料附件
			xmsqclList: [],
			// 项目材料数组长度
			xmsqclLength: '',
			// 系统当前时间
			newTime: '',
			editable: false
		}
	},
	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:', file)
			console.log('文件删除fileList:', 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}？`, '提示')
		},
		// 获取上传返回信息
		handleAvatarSuccess(res, file) {
			let obj = {
				fileId: res.data.id,
				fileName: res.data.name,
				name: res.data.name,
				status: 1
			}
			this.xmsqclList.forEach((item, index) => {
				console.log(this.buttonIndex, index)
				if (this.buttonIndex == index) {
					item.xmclFileList.push(obj)
				}
			})
			console.log('上传.res:', res)
			console.log('上传.obj:', obj)
			console.log('上传.this.xmsqFileList:', this.xmsqFileList)
		},
		// 文件下载
		downLoad(id) {
			window.open(`${FileApi}/file/download?id=${id}`)
		},
		downLoadFile(id) {
			window.open(`${FileApi}/file/download?id=${id}`)
		},
		// 删除文件
		deleteFile(index, index2) {
			this.xmsqclList[index].xmclFileList[index2].status = 0
		},
		// 返回按钮
		dialogVisible() {
			this.$emit('showDialog1', 'false')
			this.$emit('getList1')
		},
		getInfo() {
			if (this.fatherObj.type != 0) {
				if (this.fatherObj.type == 1) {
					this.editable = true
				} else if (this.fatherObj.type == 2) {
					this.editable = false
				}
				let data = {
					xmsqId: this.fatherObj.xmsqId
				}
				projectApplicationGet(data).then((res) => {
					if (res.data) {
						if (res.infoCode === 200) {
							this.submitForm = res.data
							this.xmsqtjList = res.data.xmsqtjList
							this.xmsqtjLength = res.data.xmsqtjList.length
							this.xmsqclList = res.data.xmsqclList
							this.xmsqclLength = res.data.xmsqclList.length
							console.log(
								'项目申请查看/修改this.submitForm:',
								this.submitForm
							)
						} else {
							this.$message({
								type: 'error',
								message: '获取失败!'
							})
						}
					}
				})
			} else if (this.fatherObj.type == 0) {
				// this.submitForm = this.fatherObj;
				this.editable = false
				let data = {
					xmId: this.fatherObj.xmId
				}
				getProject(data.xmId).then((res) => {
					if (res.data) {
						if (res.infoCode === 200) {
							this.submitForm = res.data
							this.submitForm.xmsqdw = sessionStorage.getItem(
								'orgName'
							)
							this.xmsqtjList = res.data.xmsqtjList
							this.xmsqtjLength = res.data.xmsqtjList.length
							console.log(
								'项目申请新增this.submitForm:',
								this.submitForm
							)
						} else {
							this.$message({
								type: 'error',
								message: '获取失败!'
							})
						}
					}
				})
			}
		},
		// 0保存 1提交
		saveInfo(type) {
			if (type == 0) {
				this.submitForm.type = 0
				this.submitForm.xmlxzt = 1
				console.log('保存:', this.submitForm)
			} else {
				this.submitForm.type = 1
				this.submitForm.xmlxzt = 2
				console.log('提交:', this.submitForm)
			}
			this.submitForm.orgid = sessionStorage.getItem('orgCode')
			this.submitForm.xmsqdw = sessionStorage.getItem('orgName')
			let data = this.submitForm
			console.log('项目申请data:', data)
			projectApplication(data).then((res) => {
				if (res.infoCode === 200) {
					let msg = ''
					type == 0 ? (msg = '保存成功!') : (msg = '提交成功!')
					this.$message({
						type: 'success',
						message: msg
					})
				} else {
					this.$message({
						type: 'error',
						message: res.msg
					})
				}
				this.dialogVisible()
			})
		},
		addList() {
			let obj = {
				sjId: '',
				xmsqId: '',
				xmcllx: 2,
				xmclmc: '',
				xmclsbsj: this.nowTime,
				xmclFileList: []
			}
			obj.xmclsbsj = this.nowTime
			this.xmsqclList.push(obj)
			this.xmsqclLength = this.xmsqclList.length
			this.submitForm.xmsqclList = this.xmsqclList
			console.log('addList方法this.xmsqclList:', this.xmsqclList)
		},
		removeList() {
			this.submitForm.xmsqclList.pop()
			this.xmsqclLength = this.submitForm.xmsqclList.length
		},
		// 获取上传按钮在表格中的索引
		getIndex(index) {
			this.buttonIndex = index
			console.log('getIndex方法index:', index)
		},
		deleteInfo(row) {
			let data = {
				xmId: row.xmId
			}
			deleteProject(data).then((res) => {
				if (res.infoCode === 200) {
					this.$message({
						type: 'success',
						message: '删除成功!'
					})
					this.getList()
				} else {
					this.$message({
						type: 'error',
						message: '删除失败!'
					})
				}
			})
		}
	},
	mounted() {
		this.getInfo()
		this.nowTime =
			String(new Date().getFullYear()) +
			'-' +
			String(new Date().getMonth() + 1) +
			'-' +
			String(new Date().getDate())
	}
}
</script>

<style lang="scss" scoped>
.center {
	text-align: center;
}
.check-icon-box {
	float: left;
	width: 8%;
	text-align: center;
	.check-icon {
		display: block;
		margin: 0 auto 10px;
		vertical-align: top;
		color: #006bd5;
		font-size: 32px;
		cursor: pointer;
	}
}
.fileTable {
	float: left;
	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>
