<template>
	<div class="overview">
		<el-dialog :show-close="false" v-model="visible1" :style="dialogStyle" width="1305" @close="closeMain">
			<template #title>
				<div class="title-detail">
					<span>{{ title }}</span>
					<el-icon>
						<close @click="closeMain" />
					</el-icon>
				</div>
			</template>
			<div class="search-select">
				<span style="margin: 0 10px 2px 0px">验收阶段</span>
				<el-input style="width: 200px" v-model="allForm.stage" clearable placeholder="请输入" />
				<span style="margin: 0 10px 2px 10px">类型</span>
				<el-select style="width: 200px" v-model="allForm.type" clearable placeholder="请选择">
					<el-option v-for="item in typeList" :key="item.dictLabel" :label="item.dictValue" :value="item.dictLabel" />
				</el-select>
				<span style="margin: 0 10px 2px 20px">备注</span>
				<el-input style="width: 200px" v-model="allForm.remark" clearable placeholder="请输入" />
			</div>
			<!-- 验收内容 -->
			<div class="detail-table">
				<div class="content-title">验收内容</div>
				<div class="content-button"><el-button class="addButtonStyle" @click="addPlan">新增</el-button></div>
				<div class="table">
					<el-table
						:data="recordData"
						class="el-table"
						height="300"
						:row-style="{ height: '40px' }"
						:header-cell-style="{ backgroundColor: '#F5F7FA', textAlign: 'center', height: '40px' }"
						:cell-style="{ textAlign: 'center', height: '40px' }"
					>
						<el-table-column type="index" label="序号" width="100" />
						<el-table-column prop="type1" label="类型" width="150">
							<template #default="{ row }">
								<el-select style="width: 120px" v-model="row.type1" clearable placeholder="请选择" v-if="!row.id">
									<el-option v-for="item in typeList" :key="item.dictLabel" :label="item.dictValue" :value="item.dictLabel" />
								</el-select>
								<span v-else>{{ row.type1 }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="type2" label="单体工程" width="150">
							<template #default="{ row }">
								<el-select v-if="!row.id" style="width: 100%" v-model="row.type1" clearable placeholder="请选择">
									<el-option v-for="item in singleEngineerList" :key="item.singleId" :label="item.name" :value="item.singleId" />
								</el-select>
								<span v-else>{{ row.type1 }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="type3" label="计划验收时间" width="180">
							<template #default="{ row }">
								<el-date-picker
									v-if="!row.id"
									v-model="row.type3"
									style="width: 100%"
									format="YYYY-MM-DD"
									value-format="YYYY-MM-DD"
									type="date"
									placeholder="请选择"
								/>
								<span v-else>{{ row.type3 }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="type4" label="起始标识" width="150">
							<template #default="{ row }">
								<el-input v-model="row.type1" v-if="!row.id" />
								<span v-else>{{ row.type1 }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="type5" label="截止标识" width="150">
							<template #default="{ row }">
								<el-input v-model="row.type1" v-if="!row.id" />
								<span v-else>{{ row.type1 }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="type6" label="验收负责人" width="150">
							<template #default="{ row }">
								<el-input v-model="row.type1" v-if="!row.id" />
								<span v-else>{{ row.type1 }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="type7" label="负责人电话" width="150">
							<template #default="{ row }">
								<el-input v-model="row.type1" v-if="!row.id" />
								<span v-else>{{ row.type1 }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="type8" label="状态" width="150">
							<template #default="{ row }">
								<el-input v-model="row.type1" v-if="!row.id" />
								<span v-else>{{ row.type1 }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="type9" label="备注" width="150">
							<template #default="{ row }">
								<el-input v-model="row.type1" v-if="!row.id" />
								<span v-else>{{ row.type1 }}</span>
							</template>
						</el-table-column>
						<el-table-column align="center" width="300" label="操作">
							<template #default="scope">
								<el-button type="primary" v-if="scope.row.id" link @click="handleEditItem(scope.row)">
									<img src="@/assets/images/tableIcon/updateIcon.png" alt="" class="configureIcon" />
									<span>编辑</span>
								</el-button>
								<el-button v-if="scope.row.id" type="danger" link :icon="Delete" @click="handleDeleteItem(scope.row)"
									>删除</el-button
								>
							</template>
						</el-table-column>
						<template #empty>
							<div class="table-empty">
								<slot name="empty">
									<img src="@/assets/images/notData.png" alt="notData" />
									<div>暂无数据</div>
								</slot>
							</div>
						</template>
					</el-table>
				</div>
				<!-- <div class="operation-btn" v-if="basicData?.state != 4">
					<el-button type="info" style="margin-right: 98px">驳回,请尽快整改</el-button>
					<el-button type="primary">整改完成,全部合格</el-button>
					<el-button type="primary" @click="allSubmit">全部整改完成,提交审核</el-button>
				</div> -->
			</div>
			<!-- 资料附件 -->
			<div class="detail-table">
				<div class="content-title">资料附件</div>
				<div class="table">
					<el-table
						:data="documentData"
						border
						height="300"
						class="el-table"
						:row-style="{ height: '40px', textAlign: 'center' }"
						:header-cell-style="{ height: '40px', backgroundColor: '#e1eeff', textAlign: 'center' }"
						:cell-style="{ height: '40px', textAlign: 'center' }"
					>
						<el-table-column type="index" label="序号" width="200" />
						<el-table-column prop="name" label="附件名称">
							<template #default="{ row, $index }">
								<el-input class="test" v-model="row.type1" />
							</template>
						</el-table-column>
						<el-table-column prop="floorNum" label="操作">
							<template #default="{ row, $index }">
								<el-upload
									accept=".mpp"
									:headers="headers"
									:action="`${baseUrl}` + '/project/projectSubItem/importMpp'"
									:on-success="uploadFileSuccess"
									multiple
									:limit="1"
									:show-file-list="false"
								>
									<el-button type="primary" link>上传附件</el-button>
								</el-upload>
							</template>
						</el-table-column>
						<el-table-column fixed="right">
							<template #header>
								<el-button type="primary" round @click="addEngineeringSingle"> 添加 </el-button>
							</template>

							<template #default="{ row }">
								<el-button type="danger" link @click="removeEngineeringSingle(row)">删除</el-button>
							</template>
						</el-table-column>
						<template #empty>
							<div class="table-empty">
								<slot name="empty">
									<img src="@/assets/images/notData.png" alt="notData" />
									<div>暂无数据</div>
								</slot>
							</div>
						</template>
					</el-table>
				</div>
				<!-- <div class="operation-btn" v-if="basicData?.state != 4">
					<el-button type="info" style="margin-right: 98px">驳回,请尽快整改</el-button>
					<el-button type="primary">整改完成,全部合格</el-button>
					<el-button type="primary" @click="allSubmit">全部整改完成,提交审核</el-button>
				</div> -->
			</div>
			<!-- 驳回原因 -->
			<div class="back-reason" v-if="title == '驳回'">
				<div class="content-title">驳回原因</div>
				<div class="form-content">
					<el-input v-model="allForm.textValue" :rows="4" type="textarea" placeholder="请输入" />
				</div>
			</div>
			<!-- 现场检查 -->
			<div class="detail-table" v-if="title == '检查'">
				<div class="content-title">现场检查</div>
				<div class="table">
					<el-table
						:data="checkData"
						class="el-table"
						height="300"
						:row-style="{ height: '40px' }"
						:header-cell-style="{ backgroundColor: '#F5F7FA', textAlign: 'center', height: '40px' }"
						:cell-style="{ textAlign: 'center', height: '40px' }"
					>
						<el-table-column type="index" label="序号" width="100" />
						<el-table-column prop="type1" label="监督员" width="150" />
						<el-table-column prop="type1" label="检查时间" width="150" />
						<el-table-column prop="type1" label="施工单位" width="150" />
						<el-table-column prop="type1" label="监理单位" width="150" />
						<el-table-column prop="type1" label="项目经理" width="150" />
						<el-table-column prop="type1" label="总监理工程师" width="150" />
						<el-table-column prop="type1" label="状态" width="150" />
						<el-table-column align="center" width="300" label="操作">
							<template #default="scope">
								<el-button type="primary" v-if="scope.row.id" link @click="handleEditItem(scope.row)">
									<img src="@/assets/images/tableIcon/look.png" alt="" class="configureIcon" />
									<span>编辑</span>
								</el-button>
							</template>
						</el-table-column>
						<template #empty>
							<div class="table-empty">
								<slot name="empty">
									<img src="@/assets/images/notData.png" alt="notData" />
									<div>暂无数据</div>
								</slot>
							</div>
						</template>
					</el-table>
				</div>
			</div>
			<template #footer>
				<div>
					<el-button type="primary" @click="visible1 = false" v-if="title != '新增'">关闭</el-button>
					<el-button type="primary" @click="confirm()">提交申请</el-button>
				</div>
			</template>
		</el-dialog>
		<transformInfo v-model:detailsDialog="detailsDialog" :relativeId="relativeId" @confirm="confirmReform"></transformInfo>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch, reactive } from "vue";
import { ElMessage } from "element-plus";
import { relativeInfo, timeLineData, submitReform, submitAll } from "@/api/modules/project";
import { Delete } from "@element-plus/icons-vue";
import { jxj_User } from "@/api/types";
import { useHandleData } from "@/hooks/useHandleData";
import { GlobalStore } from "@/stores";
import transformInfo from "../../../qualitySupervision/components/transformInfo.vue";
import { getDicList } from "@/api/modules/jxjview";
import { singleEngineer } from "@/api/modules/common";
const singleEngineerList = ref([]);
const typeList = ref([]);
const detailsDialog = ref(false);
const checkData = ref([]);
const globalStore = GlobalStore();
const headers = ref({ Authorization: "Bearer " + globalStore.token });
const documentData = ref<any>([]);
const baseUrl = import.meta.env.VITE_API_URL;
const props = defineProps({
	dialogVisible: Boolean,
	relativeId: String,
	title: String
});
const emits = defineEmits(["update:dialogVisible", "confirm"]);
const visible1 = ref(false);
const transformDialog = ref(false); // 整改记录对话框
const recordData = ref<any>([]); // 整改记录表格数据
const recordRowData = ref(); // 整改记录表格行数据
const basicData = ref(); // 基础信息
const dialogStyle = ref({
	"min-width": "824px"
});
const allForm = ref({
	stage: "",
	type: null,
	remark: "",
	textValue: ""
});
// 整改完成，全部已提交审核
const confirmReform = () => {};
const confirm = async () => {};
const getSingleEngineerData = async () => {
	const res = await singleEngineer({ engineeringSn: globalStore.engineeringSn });
	singleEngineerList.value = res.result;
	console.log(res);
};
const getDicMainList = async () => {
	// 获取学历字典
	const { result } = await getDicList({ dictType: "check_accept_type" });
	typeList.value.length = 0;
	typeList.value.push(...result);
};
// 导入文件
const uploadFileSuccess = (response: any) => {
	console.log(response);
};
const removeEngineeringSingle = (row: any) => {
	// const i = form.value.engineeringSingles?.indexOf(row);
	// i != null && form.value.engineeringSingles?.splice(i, 1);
};
const addEngineeringSingle = () => {
	documentData.value.push({
		type1: "",
		type2: ""
	});
};
// 删除用户信息
const handleDeleteItem = async (params: jxj_User.ResUserList) => {
	// await useHandleData(deleteBigItem, { id: params.id }, `删除【${params.name}】`);
};
const addPlan = () => {
	recordData.value.push({
		type1: "",
		type2: "",
		type3: "",
		type4: "",
		type5: "",
		type6: "",
		type7: "",
		type8: "",
		type9: ""
	});
};
// 修改数据按钮
const handleEditItem = async (row: any) => {
	console.log(row);
};
// 全部整改完成，提交
const allSubmit = async () => {
	const res = await submitAll({ id: basicData.value.id });
	closeMain();
	ElMessage.success("提交成功");
};
// 关闭两个对话框
const closeMain = () => {
	visible1.value = false;
	transformDialog.value = false;
	dialogStyle.value = {
		"min-width": "824px",
		transform: "translateX(0px)"
	};
};
// 相关信息接口调用
const getInfo = async () => {
	const res = await relativeInfo({ id: props.relativeId });
	basicData.value = res.result;
	recordData.value = res.result.inspectQuestionList;
	recordData.value.map(item => {
		item.image = eval(item.image);
	});
	console.log(recordData);
};
const timelineList = ref([{ name: 1 }]);
const auditVisible = ref(false);
// 监听父组件的visible，用来简介控制el-dialog的弹框开关，一般是用于开
watch(
	() => props.dialogVisible,
	(n, o) => {
		visible1.value = n;
		if (n) {
			// getInfo();
		} else {
			emits("confirm");
		}
	}
);
// 监听el-dialog显示状态，再通过@update:visible 通知父组件，一般是用于关
watch(visible1, (n, o) => {
	emits("update:dialogVisible", n);
});
onMounted(() => {
	getDicMainList();
	getSingleEngineerData();
});
</script>

<style lang="scss" scoped>
@mixin fullwidth {
	width: -webkit-fill-available;
	width: -moz-available;
	width: stretch;
}
@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;
		}
	}
	.search-select {
		@include flex;
		box-shadow: none;
	}
	.detail-table {
		// height: 391px;
		margin-top: 18px;
		.content-title {
			@include title;
		}
		.content-button {
			@include flex;
			justify-content: flex-end;
		}
		.table {
			height: 310px;
			margin-top: 20px;
			:deep(.el-table) {
				height: 100%;
			}
			.table-empty {
				display: flex;
				justify-content: center;
				align-items: center;
				flex: 1;
				flex-direction: column;
				color: #999;
			}
		}
		.operation-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 20px;
		}
	}
	.back-reason {
		// height: 391px;
		margin-top: 18px;
		.content-title {
			@include title;
		}
		.form-content {
			margin-top: 20px;
		}
	}
}
</style>
