<template>
	<div>
		<el-form label-position="top">
			<el-form-item label="项目补充材料:">
				<div class="fileTable">
					<table>
						<thead>
							<tr>
								<th width="5%">序号</th>
								<th width="18%">补充材料名称</th>
								<th width="10%">项目阶段</th>
								<th width="25%">补充原因说明</th>
								<th width="12%">上传时间</th>
								<th width="15%">附件</th>
								<!-- <th width="5%" v-if="fatherObj.type != 1">操作</th> -->
							</tr>
						</thead>
						<tbody>
							<tr
								v-for="(item, index) in annexes"
								:key="index"
								v-if="annexes.length != 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-select
										disabled
										v-model="item.xmjd"
										placeholder="请选择项目阶段"
										filterable
									>
										<el-option
											v-for="(item, index) in projs"
											:key="index"
											:label="item"
											:value="item"
										></el-option>
									</el-select>
								</td>
								<td>
									<el-input
										placeholder="请输入补充原因说明"
										v-model="item.xmbcyysm"
										disabled
									></el-input>
								</td>
								<td>
									<el-form-item>
										<el-input
											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="res => handleSuccess(res, 2)"
                    :show-file-list="false"
                    v-if="fatherObj.type > 1"
                    :disabled="fatherObj.type == 1"
                  >
                    <div @click="getIndex(index)">
                      <el-button type="primary" size="small" :disabled="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"></i> -->
										<span
											class="name"
											@click="downLoadFile(item2.fileId)"
										>
											{{ item2.fileName }}
										</span>
									</div>
								</td>
								<!-- <td align="center" v-if="fatherObj.type != 1">
                  <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="annexes.length == 0">
								<td
									colspan="7"
									style="padding: 0; color: #909399; line-height: 60px;"
								>
									暂无数据
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="check-icon-box" v-if="fatherObj.type !== 1">
					<!-- <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-form>
		<el-row class="center">
			<!-- <el-button type="primary" class="iconfont iconchucun iconbaocun" @click="saveInfo(0)" v-if="fatherObj.type != 1"
        >保存</el-button
      >
      <el-button type="primary" class="iconfont icontijiao" @click="saveInfo(1)" v-if="fatherObj.type != 1"
        >提交</el-button
      > -->
			<el-button
				type="primary"
				class="iconfont iconfanhui"
				@click="dialogVisible"
				>返回</el-button
			>
		</el-row>
	</div>
</template>
<script>
import { FileApi } from '@/api'
import {
	projectMaterialDetailsList,
	getProjectMaterialDetailsList
} from '@/api/projectManagement/index'
import { getNowDate } from '@/utils/utils'
export default {
	methods: {
		saveInfo(type) {
			projectMaterialDetailsList(type, this.annexes).then((res) => {
				if (res.infoCode == 200) {
					this.$message.success(['保存成功', '提交成功'][type])
					return
				}
				this.$message.error(res.msg)
			})
		},
		getInfo() {
			getProjectMaterialDetailsList({
				bccltj: 1, //补充材料是否提交：1、是。0、否
				sjId: this.fatherObj.xmsqId,
				xmcllx: 13 //	integer($int32)
				// 项目材料类型：1、项目申请条件。2、项目申请材料。3、设计招标附件。4、项目建议书附件。5、可研报告附件。6、可研报告审核附件。7、立项审批附件。8、监理招标附件。9、建设招标附件。10、资金申请附件。11、项目验收附件。12、项目验收审核附件。13、项目补充材料附件。14、项目建议书审核附件
			}).then((res) => {
				if (res.infoCode == 200) {
					this.annexes = res.data
				}
			})
		},
		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)
		},
		removeList() {
			this.annexes.pop()
		},
		addList() {
			let obj = {
				sjId: '',
				xmsqId: '',
				xmcllx: 13,
				xmclmc: '',
				xmclsbsj: getNowDate(),
				xmclFileList: []
			}

			this.annexes.push(obj)
		},
		handleExceed(files, fileList) {
			this.$message.warning(
				`当前限制选择 1 个文件，本次选择了 ${
					files.length
				} 个文件，共选择了 ${files.length + fileList.length} 个文件`
			)
		},
		beforeRemove(file, fileList) {
			return this.$confirm(`确定移除 ${file.name}？`, '提示')
		},
		// 获取上传返回信息
		handleSuccess(res) {
			let obj = {
				fileId: res.data.id,
				fileName: res.data.name,
				name: res.data.name,
				status: 1
			}

			this.annexes.forEach((item, index) => {
				if (this.buttonIndex == index) {
					item.xmsqId = this.fatherObj.xmsqId
					item.xmclFileList.push(obj)
				}
			})
			console.log('上传.res:', res)
			console.log('上传.obj:', obj)
			console.log('上传.this.annexes:', this.annexes)
		},
		// 文件下载
		downLoad(id) {
			window.open(`${FileApi}/file/download?id=${id}`)
		},
		downLoadFile(id) {
			window.open(`${FileApi}/file/download?id=${id}`)
		},
		// 删除文件
		deleteFile(index, index2) {
			this.annexes[index].xmclFileList[index2].status = 0
		},
		// 返回按钮
		dialogVisible() {
			this.$emit('showDialog', 'false')
			this.$emit('getList')
		},
		getIndex(index) {
			this.buttonIndex = index
			console.log('getIndex方法index:', index)
		}
	},
	mounted() {
		console.log('mounted, buchong ')
		this.getInfo()
	},
	name: 'buchongcailiao',
	props: {
		// 父组件参数
		fatherObj: {
			type: Object,
			default: {}
		},
		fatherEchoForm: {
			type: Object,
			default: {}
		},
		xmsqIdForm: {
			type: Object,
			default: {}
		},
		xmIdForm: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			annexes: [],
			actionUrl: FileApi + '/file/upload',
			projs: [
				'设计招标',
				'项目建议书',
				'可研报告',
				'立项审批',
				'监理招标',
				'建设招标',
				'资金申请',
				'项目进度简报',
				'项目验收'
			],
			buttonIndex: 0
		}
	}
}
</script>
<style lang="scss" scoped>
.center {
	text-align: center;
}
.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;
	}
}
.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;
	}
}
.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>
