<template>
	<div class="overview">
		<el-dialog :show-close="false" v-model="visible1" width="1305px" @close="closeMain">
			<template #title>
				<div class="title-detail">
					<span>月报详情</span>
					<el-icon>
						<close @click="closeMain" />
					</el-icon>
				</div>
			</template>
			<div class="report-content" id="monthlyReport">
				<div class="title">{{ engineerData.engineeringName }}</div>
				<div class="title">建设监理工作月报</div>
				<div class="sub-title">
					<span>第</span>
					<span>{{ formData.stage }}</span>
					<span>期</span>
				</div>
				<div class="sub-title">{{ engineerData.supervisorEnt }}</div>
				<div class="title">《监理月报》签认表</div>
				<div class="engineer-name">工程名称：{{ engineerData.engineeringName }}</div>
				<div class="report-content-part1">
					<div>
						<span>致： </span>
						<span>{{ formData.chiefInspectorName }}</span>
						<span>监理工程师</span>
					</div>
					<div>
						<span>按照《建设工程监理规范》和公司的有关规定， </span>
						<span>{{ formData.completeTime?.substring(0, 4) }}</span>
						<span>年</span>
						<span>{{ formData.completeTime?.substring(5, 7) }}</span>
						<span>月</span>
						<span>{{ formData.completeTime?.substring(8) }}</span>
						<span>日</span>
						<span>完成了{{ engineerData.engineeringName }}</span>
						<span>{{ formData.month }}</span>
						<span>月份《监理月报》第</span>
						<span>{{ formData.stage }}</span>
						<span>期编写工作，请予以审查签认。</span>
					</div>
					<div>
						<span style="font-weight: 700">编制人员</span>
					</div>
					<div>
						<span>土建专业监理工程师：</span>
						<span>{{ formData.civilEngineeringPersons }}</span>
					</div>
					<div>
						<span>水暖专业监理工程师：</span>
						<span>{{ formData.plumbingPersons }}</span>
					</div>
					<div>
						<span>电气专业监理工程师：</span>
						<span>{{ formData.electricalPersons }}</span>
					</div>
					<div>（签字）</div>
				</div>
				<div class="report-content-part2">
					<div>项目监理部总监理工程师签认意见：</div>
					<div>
						<span>{{ formData.signOpinion }}</span>
					</div>
					<div>
						<span>总监理工程师：</span>
						<span>年</span>
						<span>月</span>
					</div>
				</div>
				<div class="report-content-part3">
					<div>
						<div>工程名称</div>
						<div>{{ engineerData.engineeringName }}</div>
						<div>设计单位</div>
						<div>{{ engineerData.designEnt }}</div>
					</div>
					<div>
						<div>建设单位</div>
						<div>{{ engineerData.buildEnt }}</div>
						<div>施工单位</div>
						<div>{{ engineerData.opEnt }}</div>
					</div>
				</div>
				<div class="report-content-part4">
					<div><span>形象进度完成情况</span></div>
					<div>
						<div>
							<div><span>实际完成</span></div>
							<div>
								<span>{{ formData.actualCompletion }}</span>
							</div>
						</div>
						<div>
							<div>原因分析</div>
							<div>
								<span>{{ formData.reasonAnalysis }}</span>
							</div>
						</div>
					</div>
				</div>
				<div class="report-content-part5">
					<div><span>工程签证情况</span></div>
					<div>
						<div>
							<div><span>专题报告例会纪要</span></div>
							<div>
								<span>{{ formData.meetingSummary }}</span>
							</div>
							<div><span>内容简要</span></div>
							<div>
								<span>{{ formData.meetingContentBriefly }}</span>
							</div>
						</div>
						<div>
							<div><span>工程质量签证</span></div>
							<div>
								<span>{{ formData.engineeringQualityVisa }}</span>
							</div>
							<div><span>内容简要</span></div>
							<div>
								<span>{{ formData.engineeringContentBriefly }}</span>
							</div>
						</div>
						<div>
							<div><span>向施工单位发出的通知、指示、指令</span></div>
							<div>
								<span>{{ formData.instructions }}</span>
							</div>
							<div><span>内容简要</span></div>
							<div>
								<span>{{ formData.instructionsContentBriefly }}</span>
							</div>
						</div>
						<div>
							<div><span>施工单位提出的各种报告</span></div>
							<div>
								<span>{{ formData.presentation }}</span>
							</div>
							<div><span>内容简要</span></div>
							<div>
								<span>{{ formData.presentationContentBriefly }}</span>
							</div>
						</div>
						<div>
							<div><span>工程付款签证</span></div>
							<div>
								<span>{{ formData.projectPaymentVisa }}</span>
							</div>
							<div><span>内容简要</span></div>
							<div>
								<span>{{ formData.projectPaymentContentBriefly }}</span>
							</div>
						</div>
					</div>
				</div>
				<div class="report-content-step">
					<div class="step-title">一、工程进度</div>
					<div class="step-sub-title">本月完成情况：</div>
					<div class="step-input">
						<span>{{ formData.thisMonthCompletion }}</span>
					</div>
					<div class="step-sub-title">下月计划完成：</div>
					<div class="step-input">
						<span>{{ formData.nextMonthPlan }}</span>
					</div>
				</div>
				<div class="report-content-step">
					<div class="step-title">二、工程质量</div>
					<div class="step-input" style="margin-top: 11px">
						<span>{{ formData.constructionQuality }}</span>
					</div>
				</div>
				<div class="report-content-step">
					<div class="step-title">三、安全、环保、文明生产</div>
					<div class="step-input" style="margin-top: 11px">
						<span>{{ formData.civilizationContent }}</span>
					</div>
				</div>
				<div class="report-content-step">
					<div class="step-title">四、费用支付</div>
					<div class="step-input" style="margin-top: 11px">
						<span>{{ formData.costContent }}</span>
					</div>
				</div>
				<div class="report-content-step">
					<div class="step-title">五、合同管理</div>
					<div class="step-input" style="margin-top: 11px">
						<span>{{ formData.contractManagement }}</span>
					</div>
				</div>
				<div class="report-content-step">
					<div class="step-title">六、存在的问题</div>
					<div class="step-input" style="margin-top: 11px">
						<span>{{ formData.existingProblems }}</span>
					</div>
				</div>
				<div class="report-content-step">
					<div class="step-title">七、监理工作小结</div>
					<div class="step-input" style="margin-top: 11px">
						<span>{{ formData.workSummary }}</span>
					</div>
				</div>
				<div class="report-content-step">
					<div class="step-title">八、下月工作计划</div>
					<div class="step-input" style="margin-top: 11px">
						<span>{{ formData.nextMonthWorkPlan }}</span>
					</div>
				</div>
				<div class="report-content-step">
					<div class="step-title">九、本月大事记</div>
					<div class="step-input" style="margin-top: 11px">
						<span>{{ formData.thisMonthEventsRecord }}</span>
					</div>
				</div>
				<div class="report-content-img">
					<div class="step-title">十、工程照片</div>
					<div class="img-list">
						<img :src="item" alt="" srcset="" v-for="(item, index) in fileList" :key="index" />
					</div>
				</div>
			</div>
			<template #footer>
				<div>
					<el-button type="primary" @click="visible1 = false">关闭</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
import { monthlyReportDetails, engineerMainDetails } from "@/api/modules/enterpriseApi";
const fileList = ref([]);
const props = defineProps({
	detailVisible: Boolean,
	searchSn: String,
	activeValue: String,
	relativeId: String,
	searchId: String
});
const emits = defineEmits(["update:detailVisible"]);
const engineerData = ref<any>({});
const formData = ref<any>({
	stage: "",
	signOpinion: "",
	actualCompletion: "",
	reasonAnalysis: "",
	meetingSummary: "",
	meetingContentBriefly: "",
	engineeringQualityVisa: "",
	engineeringContentBriefly: "",
	instructions: "",
	instructionsContentBriefly: "",
	presentation: "",
	presentationContentBriefly: "",
	projectPaymentVisa: "",
	projectPaymentContentBriefly: "",
	thisMonthCompletion: "",
	nextMonthPlan: "",
	constructionQuality: "",
	civilizationContent: "",
	costContent: "",
	contractManagement: "",
	existingProblems: "",
	workSummary: "",
	nextMonthWorkPlan: "",
	thisMonthEventsRecord: ""
});
const visible1 = ref(false);
// 获取详情数据
const getDetails = async () => {
	const res = await monthlyReportDetails({ id: props.relativeId });
	console.log(res);
	if (res && res.result) {
		formData.value = { ...res.result };
		if (formData.value.imageFiles) {
			fileList.value = formData.value.imageFiles.split(",");
			console.log(fileList.value);
		}
	}
	const res2 = await engineerMainDetails({ id: props.searchId });
	console.log(res);
	if (res2 && res2.result) {
		engineerData.value = { ...res2.result };
	}
};
// 关闭两个对话框
const closeMain = () => {
	visible1.value = false;
	emits("update:detailVisible", false);
};
watch(
	() => props.detailVisible,
	n => {
		if (n) {
			getDetails();
			visible1.value = n;
		}
	}
);
watch(
	() => visible1,
	n => {
		emits("update:detailVisible", n);
	}
);
onMounted(() => {});
</script>

<style lang="scss" scoped>
@mixin flex {
	display: flex;
	align-items: center;
}
@mixin title {
	font-size: 14px;
	font-family: Source Han Sans CN-Regular, Source Han Sans CN;
	font-weight: 400;
	color: #333333;
	border-left: 2px solid #008bff;
	padding-left: 5px;
}
.overview {
	:deep() {
		.el-dialog__body {
			padding-top: 0;
			padding-bottom: 0;
		}
	}
	.title-detail {
		@include flex;
		border-left: 3px solid #0f81ff;
		> span {
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			margin-left: 12px;
			margin-right: auto;
			font-size: 18px;
		}
		:deep(.el-icon) {
			cursor: pointer;
			color: #a8abb2;
		}
	}
	.report-content {
		.title {
			font-size: 23px;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			text-align: center;
		}
		.sub-title {
			@include flex;
			justify-content: center;
			font-size: 18px;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
		.sub-title:nth-child(3) {
			margin-top: 9px;
		}
		.sub-title:nth-child(4) {
			margin-top: 18px;
		}
		.title:nth-child(5) {
			margin-top: 25px;
		}
		.engineer-name {
			font-size: 16px;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			margin-top: 11px;
		}
		&-part1 {
			padding: 16px 9px;
			border: 1px solid #dedede;
			margin-top: 11px;
			div {
				font-size: 16px;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			div:last-child {
				text-align: right;
			}
			div:not(:last-child) {
				margin-bottom: 20px;
			}
			div:nth-child(6) {
				margin-bottom: 0px;
			}
		}
		&-part2 {
			padding: 16px 9px;
			border: 1px solid #dedede;
			border-top: 0;
			div:nth-child(1) {
				font-size: 16px;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				margin-bottom: 14px;
			}
			div:nth-child(3) {
				@include flex;
				justify-content: flex-end;
				span {
					white-space: nowrap;
				}
				span:first-child {
					margin-right: 120px;
				}
				span:nth-child(2) {
					margin-right: 60px;
				}
				span:last-child {
					margin-right: 107px;
				}
			}
		}
		&-part3 {
			border: 1px solid #dedede;
			border-top: 0;
			> div {
				@include flex;
				height: 50px;
				> div {
					height: 50px;
					line-height: 50px;
				}
				> div:nth-child(2n-1) {
					width: 15%;
					text-align: center;
				}
				> div:nth-child(2n) {
					width: 35%;
					text-indent: 1em;
				}
			}
			> div:nth-child(1) {
				> div:not(:last-child) {
					border-right: 1px solid #dedede;
					border-bottom: 1px solid #dedede;
				}
				> div:nth-child(4) {
					border-bottom: 1px solid #dedede;
				}
			}
			> div:nth-child(2) {
				> div:not(:last-child) {
					border-right: 1px solid #dedede;
				}
			}
		}
		&-part4 {
			display: flex;
			border: 1px solid #dedede;
			border-top: 0;
			// height: 200px;
			> div:nth-child(1) {
				@include flex;
				justify-content: center;
				width: 3%;
				// height: 200px;
				border-right: 1px solid #dedede;
				> span {
					display: inline-block;
					writing-mode: vertical-lr;
					letter-spacing: 4px;
				}
			}
			> div:nth-child(2) {
				width: 97%;
				display: flex;
				flex-direction: column;
				> div {
					display: flex;
					flex: 1;
					// height: 100px;
					// @include flex;
					> div:nth-child(1) {
						@include flex;
						justify-content: center;
						width: calc(12% + 3px);
						// height: 100%;
						border-right: 1px solid #dedede;
					}
					> div:nth-child(2) {
						display: flex;
						align-items: center;
						justify-content: center;
						flex: 1;
						// height: 100%;
						// border-bottom: 1px solid #dedede;
						span {
							word-break: break-all;
						}
					}
				}
				> div:not(:last-child) {
					> div:nth-child(1) {
						border-bottom: 1px solid #dedede;
					}
					> div:nth-child(2) {
						border-bottom: 1px solid #dedede;
					}
				}
			}
		}
		&-part5 {
			display: flex;
			border: 1px solid #dedede;
			border-top: 0;
			// height: 500px;
			> div:nth-child(1) {
				@include flex;
				justify-content: center;
				width: 3%;
				// height: 100%;
				border-right: 1px solid #dedede;
				> span {
					display: inline-block;
					writing-mode: vertical-lr;
					letter-spacing: 4px;
				}
			}
			> div:nth-child(2) {
				width: 97%;
				// height: 100%;
				> div {
					display: flex;
					min-height: 50px;
					> div:nth-child(2n-1) {
						@include flex;
						justify-content: center;
						width: calc(12% + 3px);
						// height: 100%;
						border-right: 1px solid #dedede;
						border-bottom: 1px solid #dedede;
						> span {
							display: inline-block;
							width: 92%;
							text-align: center;
						}
					}
					> div:nth-child(2n) {
						@include flex;
						justify-content: center;
						flex: 1;
						// height: 100%;
						border-bottom: 1px solid #dedede;
						span {
							word-break: break-all;
						}
					}
					> div:nth-child(3) {
						border-left: 1px solid #dedede;
					}
				}
				> div:last-child {
					display: flex;
					> div:nth-child(2n-1) {
						border-bottom: 0;
					}
					> div:nth-child(2n) {
						border-bottom: 0;
					}
				}
			}
		}
		&-step {
			border: 1px solid #dedede;
			border-top: 0;
			padding: 14px 23px;
			.step-title {
				font-size: 16px;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
			}
			.step-sub-title {
				font-size: 16px;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				margin-top: 17px;
				margin-bottom: 9px;
			}
		}
		&-img {
			border: 1px solid #dedede;
			border-top: 0;
			padding: 14px 23px;
			.step-title {
				font-size: 16px;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
				margin-bottom: 12px;
			}
			.img-list {
				@include flex;
				img {
					width: 100px;
					height: 100px;
					border: 1px solid #ccc;
					margin-right: 15px;
				}
			}
			.face-img {
				:deep(.face-uploader .el-upload) {
					border: 2px dashed #d9d9d9 !important;
					cursor: pointer !important;
					position: relative !important;
					overflow: hidden !important;
				}
				.face-uploader .el-upload:hover {
					border-color: #409eff !important;
				}
				:deep(.el-icon) {
					font-size: 42px;
					color: #8c939d;
					width: 96px;
					height: 96px;
					line-height: 53px;
					text-align: center;
				}
			}
		}
	}
}
</style>
