<template>
	<el-form label-width="140px" :model="ruleForm" ref="ruleForm">
		<table style="margin-bottom: 20px; width: 100%;">
			<thead>
				<tr>
					<th>序号</th>
					<th width="80px">项目进度</th>
					<th width="158px">上报截止时间</th>
					<th width="80px">状态</th>
					<th width="70px">完成投资占比(%)</th>
					<th width="70px">项目形象进度(%)</th>
					<th width="180px">本月建设内容</th>
					<th width="158px">上报时间</th>
					<th width="100px">进度附件</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(item, index) in ruleList" :key="index">
					<td>{{ index + 1 }}</td>
					<td>{{ item.xmjd }}</td>
					<td>{{ item.ybjzrqFormat }}</td>
					<td>{{ item.xmjdztmc }}</td>
					<td>
						<el-input
							placeholder="正小数"
							v-model="item.wctzzb"
							:disabled="
								xmsqIdForm.xmlxzt >= 13 || fatherObj.type == 1
							"
						></el-input>
					</td>
					<td>
						<el-input
							placeholder="正小数"
							v-model="item.xmxxjd"
							:disabled="
								xmsqIdForm.xmlxzt >= 13 || fatherObj.type == 1
							"
						></el-input>
					</td>
					<td>
						<el-input
							placeholder="请输入本月建设内容"
							v-model="item.byjznr"
							:disabled="
								xmsqIdForm.xmlxzt >= 13 || fatherObj.type == 1
							"
						></el-input>
					</td>
					<td>
						{{ item.jdsbsjFormat }}
					</td>
					<td>
						<el-upload
							class="upload-demo"
							:action="actionUrl"
							:on-preview="handlePreview"
							:on-remove="handleRemove"
							:before-remove="beforeRemove"
							multiple
							:limit="1"
							:on-exceed="handleExceed"
							:file-list="item.xmjdjbList"
							:on-success="handleSuccess"
							v-if="xmsqIdForm.xmlxzt < 13 && fatherObj.type != 1"
						>
							<el-button size="small" type="primary"
								>点击上传</el-button
							>
						</el-upload>
						<div
							v-if="
								xmsqIdForm.xmlxzt >= 13 || fatherObj.type == 1
							"
						>
							<div
								style="cursor: pointer;"
								@click="downLoad(ifile.fileId)"
								v-for="(ifile, index) in item.xmjdjbList"
								:key="index"
							>
								{{ ifile.fileName }}
							</div>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
		<el-row class="center">
			<el-button
				type="primary"
				class="iconfont iconchucun iconbaocun"
				@click="saveInfo(0)"
				v-if="fatherObj.type != 1 && xmsqIdForm.xmlxzt == 11"
				>保存</el-button
			>
			<el-button
				type="primary"
				class="iconfont icontijiao"
				@click="saveInfo(1)"
				v-if="fatherObj.type != 1 && xmsqIdForm.xmlxzt == 11"
				>提交</el-button
			>
			<el-button
				type="primary"
				class="iconfont iconfanhui"
				@click="dialogVisible"
				>返回</el-button
			>
		</el-row>
	</el-form>
</template>
<script>
import { FileApi } from '@/api'
import { dateTimeFormat, getNowDate } from '@/utils/utils'
import {
	projectProgressBriefing,
	projectProgressBriefingList
} from '@/api/projectManagement/index'
// 项目进度状态 1、待上报。2、已上报。3、未上报
const xmjdztmcs = ['', '待上报', '已上报', '未上报']
export default {
	name: 'jindujianbao',
	props: {
		// 父组件方法
		showDialog9: {
			type: Function,
			default: null
		},
		getList9: {
			type: Function,
			default: null
		},
		// 父组件参数
		fatherObj: {
			type: Object,
			default: null
		},
		fatherEchoForm: {
			type: Object,
			default: null
		},
		xmsqIdForm: {
			type: Object,
			default: {}
		},
		xmIdForm: {
			type: Object,
			default: null
		},
		xmlxzt: {
			type: Number,
			default: null
		},
		xmzbzt: {
			type: Number,
			default: null
		}
	},
	data() {
		return {
			// 下拉框
			xmndValue: '',
			// 提交form
			ruleForm: {
				xmcllx: ''
			},
			// 提交list
			ruleList: [
				{
					xmclmc: '',
					xmclsbsj: '',
					xmjdjbList: []
				}
			],
			// 回显form
			echoForm: {},
			// 回显list
			echoList: [],
			// 文件上传路径
			actionUrl: FileApi + '/file/upload',
			fileList: [],
			xmclFileList: [],
			// 系统当前时间
			nowTime: ''
		}
	},
	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) {
			if (file.sjId != null) {
				this.fileList = fileList
				this.xmclFileList.forEach((item, index) => {
					if (file.fileId == item.fileId) {
						item.status = 0
					}
				})
			} else {
				this.fileList = fileList
				this.xmclFileList = fileList
			}
			console.log('删除.file:', file)
			console.log('删除.fileList:', fileList)
			console.log('删除.this.fileList:', this.fileList)
			console.log('删除.this.xmclFileList:', this.xmclFileList)
		},
		handlePreview(file) {
			window.open(`${FileApi}/file/download?id=${file.fileId}`)
			console.log('file', file)
		},
		handleExceed(files, fileList) {
			this.$message.warning(
				`当前限制选择 1 个文件，本次选择了 ${
					files.length
				} 个文件，共选择了 ${files.length + fileList.length} 个文件`
			)
		},
		beforeRemove(file, fileList) {
			return this.$confirm(`确定移除 ${file.name}？`, '提示')
		},
		// 获取上传返回信息
		handleSuccess(res, file) {
			let obj = {
				fileId: res.data.id,
				fileName: res.data.name,
				name: res.data.name,
				status: 1,
				fileType: 0, // 附件
				wjnr: res.data.uri
			}
			this.xmclFileList.push(obj)
			this.ruleList.forEach((item, index) => {
				item.xmjdjbList = this.xmclFileList
			})
			console.log('上传.res:', res)
			console.log('上传.obj:', obj)
			console.log('上传.this.xmclFileList:', this.xmclFileList)
		},
		// 文件下载
		downLoad(id) {
			window.open(`${FileApi}/file/download?id=${id}`)
		},
		// 返回按钮
		dialogVisible() {
			this.$emit('showDialog9', 'false')
			this.$emit('getList9')
		},
		// getInfo
		getInfo() {
			projectProgressBriefingList(this.fatherObj.xmsqId).then((res) => {
				if (res.infoCode === 200) {
					if (res.data.length == 0) {
						this.ruleList = [
							{
								xmclmc: '',
								xmclsbsj: '',
								xmclsbsj: this.nowTime
							}
						]
					} else {
						this.ruleList = res.data

						this.ruleList.forEach((d) => {
							d.xmjdztmc = xmjdztmcs[d.xmjdzt]
							if (d.xmjdjbList) {
								d.xmjdjbList.forEach((ifile) => {
									ifile.name = ifile.fileName
								})
							}
							// 上报时间
							if (!d.jdsbsj) {
								d.jdsbsj = new Date().toISOString()
								d.jdsbsjFormat = getNowDate()
							} else {
								// 2019-12-09T09:55:34.000+0800
								let dtime = d.jdsbsj.replace('+0800', '')
								d.jdsbsj = new Date(dtime).toISOString()
								d.jdsbsjFormat = dateTimeFormat(d.jdsbsj)
							}
							// 上报截止时间
							if (d.ybjzrq) {
								d.ybjzrqFormat = d.ybjzrq.slice(0, 10)
							}
							if (d.jdydYear && d.jdydMonth) {
								d.xmjd = `${d.jdydYear}年${d.jdydMonth}月`
							}
						})
						console.log(this.ruleForm[0].xmjd)
					}
				} else {
					// this.$message({
					// 	type: 'error',
					// 	message: res.msg,
					// });
				}
			})
		},
		// saveInfo，type = 0为保存，1位提交
		saveInfo(type) {
			this.ruleList.forEach((item, index) => {
				item.xmcllx = 2
				item.xmsqId = this.xmsqIdForm.xmsqId
				item.sjId = this.xmsqIdForm.xmsqId
			})

			console.log(JSON.stringify(this.ruleList, null, 4))
			projectProgressBriefing(type, this.ruleList).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()
			})
		}
	},
	created() {
		this.getInfo()
		this.nowTime =
			String(new Date().getFullYear()) +
			'-' +
			String(new Date().getMonth() + 1) +
			'-' +
			String(new Date().getDate())
	}
}
</script>

<style lang="scss" scoped>
.title {
	margin-bottom: 20px;
	h2 {
		font-size: 1.8em;
	}
}
.center {
	text-align: center;
}
table {
	width: 100%;
	border-collapse: collapse;
	text-align: center;
	&,
	td,
	th {
		border: 1px #ebeef5 solid;
	}
	td,
	th {
		padding: 10px 20px;
		height: 20px;
		color: #606266;
		background-color: #fff;
		transition: background-color 0.25s ease;
	}
	th {
		text-align: center;
	}
	tfoot {
		border: 1px #ebeef5 solid;
		td {
			border: 0 none;
		}
	}
	.bg,
	tr:hover td {
		background-color: #f5f7fa;
	}
}
</style>
