<template>
	<div class="content-main">
		<el-form inline class="search-content" label-width="80px">
			<el-row>
				<el-form-item label="月度:">
					<span slot="label"
						>月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;度:</span
					>
					<el-select
						placeholder="请选择"
						clearable
						style="width: 180px !important"
						v-model="searchForm.jdydMonth"
					>
						<el-option
							v-for="(item, index) in jdydMonthList"
							:key="index"
							:label="item.label"
							:value="item.label"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="是否调整:">
					<el-select
						placeholder="请选择"
						clearable
						style="width: 180px !important"
						v-model="searchForm.sftz"
					>
						<el-option
							v-for="(item, index) in sftzList"
							:key="index"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<div class="search-button">
						<span class="search-line"></span>
						<el-button
							type="primary"
							size="small"
							class="iconfont iconchaxun"
							@click="getList"
							>&nbsp;查询</el-button
						>
						<el-button
							type="primary"
							size="small"
							class="iconfont iconzhongzhi"
							@click="reset"
							>&nbsp;重置</el-button
						>
					</div>
				</el-form-item>
			</el-row>
		</el-form>
		<el-row class="solid"></el-row>
		<el-table border style="margin-top: 20px" :data="tableData">
			<el-table-column
				type="index"
				sortable
				label="序号"
				width="80"
				align="center"
			>
				<template slot-scope="scope">
					<span>{{ scope.$index + 1 }}</span>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				show-overflow-tooltip
				sortable
				label="月度"
				prop="xmyd"
			></el-table-column>
			<el-table-column
				align="center"
				show-overflow-tooltip
				sortable
				label="截止日期"
				prop="ybjzrq"
			></el-table-column>
			<el-table-column
				align="center"
				show-overflow-tooltip
				sortable
				label="是否调整"
				prop="sftz"
			></el-table-column>
			<el-table-column
				align="center"
				show-overflow-tooltip
				sortable
				label="调整人"
				prop="sftzr"
			></el-table-column>
			<el-table-column align="center" label="操作">
				<template slot-scope="scope">
					<el-tooltip
						class="item"
						effect="light"
						content="查看"
						placement="top"
					>
						<el-button
							type="primary"
							size="small"
							class="operate_show_btn iconfont iconchakan2"
							@click="showDialog(scope.row, 'see')"
						></el-button>
					</el-tooltip>
					<el-tooltip
						class="item"
						effect="light"
						content="修改"
						placement="top"
						v-if="buttonNameList.indexOf('修改') > -1"
					>
						<el-button
							type="primary"
							size="small"
							class="operate_edit_btn iconfont iconxiugai"
							@click="showDialog(scope.row, 'edit')"
						></el-button>
					</el-tooltip>
				</template>
			</el-table-column>
		</el-table>
		<el-row class="pagination-wrap">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page.sync="pageForm.pageNum"
				:page-sizes="[10, 20, 30, 40, 50]"
				:page-size="pageForm.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pageForm.total"
			></el-pagination>
		</el-row>
		<el-dialog
			title="进度月报截止时间"
			:visible.sync="dialogVisible"
			width="80%"
			:before-close="handleClose"
			:close-on-click-modal="false"
		>
			<el-form
				label-width="140px"
				:model="ruleForm"
				:rules="rules"
				ref="ruleForm"
			>
				<el-row>
					<el-form-item label="月度:" prop="jdydMonth">
						<el-input
							placeholder="请输入"
							disabled
							v-model="ruleForm.xmyd"
						></el-input>
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="截止日期:" prop="ybjzrq">
						<el-date-picker
							type="date"
							placeholder="请选择截止日期"
							style="width: 100%"
							:disabled="editable"
							v-model="ruleForm.ybjzrq"
						></el-date-picker>
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="变更原因:">
						<el-input
							placeholder="请输入"
							type="textarea"
							:rows="3"
							:disabled="editable"
							v-model="ruleForm.bgyy"
						></el-input>
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item label="调整人:" prop="sftzr" v-if="!editable">
						<el-input
							placeholder="请输入发布人"
							disabled
							v-model="ruleForm.sftzr"
						></el-input>
					</el-form-item>
					<el-form-item label="调整人:" v-else-if="editable">
						<el-input
							placeholder="请输入发布人"
							disabled
							v-model="ruleForm.sftzr"
						></el-input>
					</el-form-item>
				</el-row>
				<el-row>
					<el-form-item
						label="调整时间:"
						prop="sftzsj"
						v-if="!editable"
					>
						<el-input
							placeholder="请输入发布时间"
							disabled
							v-model="ruleForm.sftzsj"
						></el-input>
					</el-form-item>
					<el-form-item label="调整时间:" v-else-if="editable">
						<el-input
							placeholder="请输入发布时间"
							disabled
							v-model="ruleForm.sftzsj"
						></el-input>
					</el-form-item>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button
					type="primary"
					class="iconfont iconfabu"
					@click="saveInfo('ruleForm')"
					v-if="!editable"
					>发布</el-button
				>
				<el-button
					type="primary"
					class="iconfont iconfanhui"
					@click="handleClose"
					>返回</el-button
				>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import {
	projectMonthlyProgressReportPage,
	projectMonthlyProgressReport,
	updateProjectMonthlyProgressReport,
} from '@/api/projectManagement/index'
import { authorityControl } from '@/api/login/login'
import { getNowDate } from '@/utils/utils'
export default {
	name: 'projectMonthly',
	data() {
		return {
			searchForm: {
				jdydMonth: '',
				sftz: '',
			},
			pageForm: {
				pageNum: 1,
				pageSize: 10,
				total: 1,
			},
			// 表格数据
			tableData: [],
			// 弹窗控制
			dialogVisible: false,
			// 表单控制
			editable: false,
			// 提交form
			ruleForm: {},
			// 表单验证
			rules: {
				// 月度
				jdydMonth: [
					{
						required: true,
						message: '请输入月度',
						trigger: 'change',
					},
				],
				// 截止时间
				ybjzrq: [
					{
						required: true,
						message: '请输入时间',
						trigger: 'blur',
					},
				],
				// 调整人
				sftzr: [
					{
						required: true,
						message: '请输入调整人',
						trigger: 'change',
					},
				],
				// 调整时间
				sftzsj: [
					{
						required: true,
						message: '请输入调整时间',
						trigger: 'change',
					},
				],
			},
			// 是否调整下拉框
			sftzList: [
				{
					value: 0,
					label: '否',
				},
				{
					value: 1,
					label: '是',
				},
			],
			// 月度下拉框
			jdydMonthList: [
				{
					value: 0,
					label: 1,
				},
				{
					value: 1,
					label: 2,
				},
				{
					value: 2,
					label: 3,
				},
				{
					value: 3,
					label: 4,
				},
				{
					value: 4,
					label: 5,
				},
				{
					value: 5,
					label: 6,
				},
				{
					value: 6,
					label: 7,
				},
				{
					value: 7,
					label: 8,
				},
				{
					value: 8,
					label: 9,
				},
				{
					value: 9,
					label: 10,
				},
				{
					value: 10,
					label: 11,
				},
				{
					value: 11,
					label: 12,
				},
			],
			// 用户名
			userName: '',
			// 当前时间
			nowTime: getNowDate(),
			buttonNameList: [],
		}
	},
	methods: {
		getButtonList(menuCode, userCode) {
			let codeData = {
				resourceCode: menuCode,
				userId: userCode,
			}
			authorityControl(codeData).then((res) => {
				let buttonNameList = []
				res.data.forEach((item) => {
					this.buttonNameList.push(item.resourceName)
				})
			})
		},
		// 分页页数
		handleSizeChange(val) {
			this.pageForm.pageSize = val
			this.getList()
		},
		// 分页每页显示几个
		handleCurrentChange(val) {
			this.pageForm.pageNum = val
			this.getList()
		},
		handleClose() {
			this.dialogVisible = false
			this.getList()
		},
		// 列表查询
		getList(type) {
			if (type != 'start') {
				//非初始化调用：查询、分页
				sessionStorage.setItem(
					'searchData',
					JSON.stringify(this.searchForm)
				)
				sessionStorage.setItem(
					'pageData',
					JSON.stringify(this.pageForm)
				)
			} else {
				//初始化分两种情况，详情页等返回后的初始化，以及第一次进入此菜单的初始化
				if (JSON.parse(sessionStorage.getItem('searchData'))) {
					//详情页返回后，将对应查询条件和分页的字段赋值，页面回显参数
					this.searchForm = JSON.parse(
						sessionStorage.getItem('searchData')
					)
					this.pageForm = JSON.parse(
						sessionStorage.getItem('pageData')
					)
				} else {
					//第一次进去此菜单时，保存上方默认的data
					sessionStorage.setItem(
						'searchData',
						JSON.stringify(this.searchForm)
					)
					sessionStorage.setItem(
						'pageData',
						JSON.stringify(this.pageForm)
					)
				}
			}
			let data = {
				pageSize: this.pageForm.pageSize,
				pageNum: this.pageForm.pageNum,
				jdydMonth: this.searchForm.jdydMonth,
				sftz: this.searchForm.sftz,
			}
			projectMonthlyProgressReportPage(data)
				.then((res) => {
					if (res.infoCode === 200) {
						this.tableData = res.data.list
						this.pageForm.total = res.data.total
						this.tableData.forEach((item, index) => {
							// 列表ybjzrq字段截取
							if (item.ybjzrq) {
								item.ybjzrq = item.ybjzrq.slice(0, 10)
							}
							// xmyd时间拼接
							item.xmyd =
								item.jdydYear + '年' + item.jdydMonth + '月'
							// sftz字段中文显示
							if (item.sftz == 0) {
								item.sftz = '否'
							} else if (item.sftz == 1) {
								item.sftz = '是'
							}
							// 月度下拉表
							// this.jdydMonthList.push({
							//   label: item.jdydMonth,
							//   value: index
							// });
						})
						// 月度下拉表去重
						// let newObj = {};
						// this.jdydMonthList = this.jdydMonthList.reduce((item, next) => {
						//   newObj[next.label] ? "" : (newObj[next.label] = true && item.push(next));
						//   return item;
						// }, []);
						// console.log("月度下拉表", this.jdydMonthList);
					} else {
						this.$message({
							type: 'error',
							message: res.msg,
						})
					}
				})
				.catch((err) => {
					console.log(err)
				})
		},
		// 重置
		reset() {
			this.searchForm = {}
			this.pageForm = {
				pageNum: 1,
				pageSize: 10,
				total: 1,
			}
			this.getList()
		},
		// 查看框弹出
		showDialog(row, type) {
			this.dialogVisible = true
			if (type == 'edit') {
				this.editable = false
			}
			if (type == 'see') {
				this.editable = true
			}
			let data = {
				xmjdybId: row.xmjdybId,
			}
			projectMonthlyProgressReport(data).then((res) => {
				console.log('进度月报查看/修改data:', data)
				console.log('进度月报查看/修改res:', res)
				if (res.infoCode === 200 && res.data) {
					this.ruleForm = res.data
					// 月度拼接
					this.ruleForm.xmyd =
						this.ruleForm.jdydYear +
						'年' +
						this.ruleForm.jdydMonth +
						'月'
					// 时间截取
					if (this.ruleForm.ybjzrq) {
						this.ruleForm.ybjzrq = this.ruleForm.ybjzrq.slice(0, 10)
					}
					if (this.ruleForm.sftzsj) {
						this.ruleForm.sftzsj = this.ruleForm.sftzsj.slice(0, 10)
					}
					if (type == 'edit') {
						this.ruleForm.sftzr = this.userName
						this.ruleForm.sftzsj = getNowDate()
					}
					console.log(
						'进度月报查看/修改this.ruleForm:',
						this.ruleForm
					)
				} else {
					this.$message({
						type: 'error',
						message: res.msg,
					})
				}
			})
		},
		// 保存发布
		saveInfo(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.ruleForm.sftz = 1
					let data = this.ruleForm
					updateProjectMonthlyProgressReport(data).then((res) => {
						if (res.infoCode === 200 && res.data) {
							this.$message({
								type: 'success',
								message: '更新成功!',
							})
						} else {
							this.$message({
								type: 'error',
								message: '更新失败!',
							})
						}
						this.handleClose()
					})
				}
			})
		},
	},
	created() {
		this.getButtonList(
			sessionStorage.getItem('resourceCode'),
			sessionStorage.getItem('userCode')
		)
		console.log('router', this.$route)
		this.getList('start')
		this.userName = sessionStorage.getItem('userName')
		this.nowTime =
			String(new Date().getFullYear()) +
			'-' +
			String(new Date().getMonth() + 1) +
			'-' +
			String(new Date().getDate())
	},
}
</script>

<style lang="scss" scoped>
// .content-main {
// 	margin: 10px 10px 0 10px;
// 	padding: 10px;
// 	// height: calc(100vh - 251px);
// 	border: 1px #f4f5f8 solid;
// 	background-color: #fff;
// }

.pagination-wrap {
	margin-top: 20px;
	text-align: right;
}

.solid {
	margin-top: 10px;
	margin-bottom: 10px;
	border-top: 1px #75b5fa dashed;
}

.search-content {
	padding: 10px 0;
	.el-form-item {
		margin-bottom: 0;
	}
}

.applyList-action {
	padding: 10px;
	text-align: left;
	background: #edf5fd;
	margin-top: 10px;
}

.fileList {
	position: relative;
	margin-top: 7px;
	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>
