<template>
	<div class="overview">
		<el-dialog :show-close="false" v-model="visible1" :style="dialogStyle" @close="closeMain">
			<template #title>
				<div class="title-detail">
					<div class="line-style"></div>
					<div class="title-content">新增隐患问题</div>
					<el-icon>
						<close @click="closeMain" />
					</el-icon>
				</div>
			</template>
			<div class="detail-content">
				<div class="content-title">隐患记录</div>
				<div class="row">
					<el-row :gutter="20">
						<el-col :span="8">
							<span class="row-span">检查情况：<span>执法中</span></span>
						</el-col>
						<el-col :span="8">
							<span class="row-span">工程/项目名称：</span>
							<span class="select-text" v-if="projectSelectedData.createTime" style="margin-right: 15px">{{
								projectSelectedData.projectName || projectSelectedData.engineeringName
							}}</span>
							<el-button class="btn-style" type="primary" @click="projectVisible = true">选择工程/项目</el-button>
						</el-col>
						<el-col :span="8">
							<span class="row-span">建设单位：</span>
							<el-input class="input-style" disabled placeholder="请输入" v-model="basicData.buildEnt" />
						</el-col>
					</el-row>
				</div>
				<div class="row">
					<el-row :gutter="20">
						<el-col :span="8">
							<span class="row-span">监理单位：</span>
							<el-input class="input-style" disabled placeholder="请输入" v-model="basicData.supervisorEnt" />
						</el-col>
						<el-col :span="8">
							<span class="row-span">施工单位：</span>
							<el-input class="input-style" disabled placeholder="请输入" v-model="basicData.opEnt" />
						</el-col>
						<el-col :span="8">
							<span class="row-span">勘察单位：</span>
							<el-input class="input-style" disabled placeholder="请输入" v-model="basicData.surveyEnt" />
						</el-col>
					</el-row>
				</div>
				<div class="row">
					<el-row :gutter="20">
						<el-col :span="8">
							<span class="row-span">设计单位：</span>
							<el-input class="input-style" disabled placeholder="请输入" v-model="basicData.designEnt" />
						</el-col>
						<el-col :span="8">
							<span class="row-span">责任区域：</span>
							<el-input class="input-style" disabled placeholder="请输入" v-model="basicData.address" />
						</el-col>
						<el-col :span="8">
							<span class="row-span">检查人员：</span>
							<el-input class="input-style" disabled placeholder="请选择" v-model="basicData.selectedMember">
								<!-- 标记dialog -->
								<template #suffix>
									<div class="diaMapIcon" @click="selectMember">
										<el-icon style="font-size: 19px"><Plus /></el-icon>
									</div>
								</template> </el-input
						></el-col>
					</el-row>
				</div>
				<div class="row">
					<el-row :gutter="20">
						<el-col :span="8">
							<span class="row-span">整改期限：</span>
							<el-date-picker
								v-model="basicData.deadline"
								style="width: 180px; height: 26px"
								type="datetime"
								placeholder="请选择日期"
								format="YYYY-MM-DD HH:mm:ss"
								value-format="YYYY-MM-DD HH:mm:ss"
								:disabledDate="disabledDate"
						/></el-col>
						<el-col :span="8">
							<span class="row-span">整改类型：</span>
							<el-radio-group v-model="basicData.requireType">
								<el-radio :label="1">限期整改</el-radio>
								<el-radio :label="2">停工整改</el-radio>
							</el-radio-group>
						</el-col>
						<el-col :span="8">
							<span class="row-span">施工单位：</span>
							<div class="face-img">
								<div class="imgList" v-if="basicData.opSignature && basicData.opSignature.length > 0">
									<div v-for="(item, index) in basicData.opSignature" :key="index">
										<img :src="item.url" class="face-avatar" />
										<div class="close-icon" @click="deleteImg(1, index)">X</div>
									</div>
								</div>
								<el-upload
									ref="upload"
									:headers="headers"
									:show-file-list="false"
									accept="image/jpg, image/jpeg, image/png"
									:action="`${baseUrl}` + '/xmgl/file/upload'"
									:on-success="response => uploadSuccess(response, 1)"
									style="display: inline-block"
								>
									<el-button class="btn-style" type="primary">上传签名</el-button>
								</el-upload>
							</div>
						</el-col>
					</el-row>
				</div>
				<div class="row">
					<el-row :gutter="20">
						<el-col :span="8">
							<span class="row-span">监理单位：</span>
							<div class="face-img">
								<div class="imgList" v-if="basicData.supervisorSignature && basicData.supervisorSignature.length > 0">
									<div v-for="(item, index) in basicData.supervisorSignature" :key="index">
										<img :src="item.url" class="face-avatar" />
										<div class="close-icon" @click="deleteImg(2, index)">X</div>
									</div>
								</div>
								<el-upload
									ref="upload"
									:headers="headers"
									:show-file-list="false"
									accept="image/jpg, image/jpeg, image/png"
									:action="`${baseUrl}` + '/xmgl/file/upload'"
									:on-success="response => uploadSuccess(response, 2)"
									style="display: inline-block"
								>
									<el-button class="btn-style" type="primary">上传签名</el-button>
								</el-upload>
							</div>
						</el-col>
						<el-col :span="8">
							<span class="row-span">检查人员：</span>
							<div class="face-img">
								<div class="imgList" v-if="basicData.inspectSignature && basicData.inspectSignature.length > 0">
									<div v-for="(item, index) in basicData.inspectSignature" :key="index">
										<img :src="item.url" class="face-avatar" />
										<div class="close-icon" @click="deleteImg(3, index)">X</div>
									</div>
								</div>
								<el-upload
									ref="upload"
									:headers="headers"
									:show-file-list="false"
									accept="image/jpg, image/jpeg, image/png"
									:action="`${baseUrl}` + '/xmgl/file/upload'"
									:on-success="response => uploadSuccess(response, 3)"
									style="display: inline-block"
								>
									<el-button class="btn-style" type="primary">上传签名</el-button>
								</el-upload>
							</div>
						</el-col>
						<el-col :span="8">
							<span class="row-span">其他单位：</span>
							<div class="face-img">
								<div class="imgList" v-if="basicData.otherSignature && basicData.otherSignature.length > 0">
									<div v-for="(item, index) in basicData.otherSignature" :key="index">
										<img :src="item.url" class="face-avatar" />
										<div class="close-icon" @click="deleteImg(4, index)">X</div>
									</div>
								</div>
								<el-upload
									ref="upload"
									:headers="headers"
									:show-file-list="false"
									accept="image/jpg, image/jpeg, image/png"
									:action="`${baseUrl}` + '/xmgl/file/upload'"
									:on-success="response => uploadSuccess(response, 4)"
									style="display: inline-block"
								>
									<el-button class="btn-style" type="primary">上传签名</el-button>
								</el-upload>
							</div>
						</el-col>
					</el-row>
				</div>
			</div>
			<div class="detail-table">
				<div class="content-title">
					<span>隐患问题记录</span>
					<el-button class="addButtonStyle" @click="addDangerRecord">新增</el-button>
				</div>
				<div class="table">
					<el-table
						:data="recordData"
						class="el-table"
						:row-style="{ height: '40px' }"
						:header-cell-style="{ backgroundColor: '#F5F7FA', textAlign: 'center', height: '40px' }"
						:cell-style="{ textAlign: 'center', height: '40px' }"
					>
						<!-- <el-table-column prop="createByName" label="创建人" /> -->
						<el-table-column prop="questionDesc" label="隐患问题" :show-overflow-tooltip="true" />
						<el-table-column label="隐患照片">
							<template #default="scope">
								<el-image
									v-if="scope.row.image && scope.row.image.length > 0"
									style="width: 38px; height: 28px"
									:src="scope.row.image[0].url"
									fit="fill"
								></el-image>
							</template>
						</el-table-column>
						<el-table-column fixed="right" label="操作" width="100">
							<template #default="scope">
								<el-button type="danger" link :icon="Delete" @click="handleDeleteItem(scope.$index)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="operation-btn">
					<el-button type="primary" @click="allSubmit">统一下发放整改单</el-button>
				</div>
			</div>
			<div class="transform-record" v-if="transformDialog">
				<div class="title-detail">
					<div class="line-style"></div>
					<div class="title-content">新增隐患记录</div>
					<el-icon>
						<close @click="closeSecondary" />
					</el-icon>
				</div>
				<div class="content-title">隐患问题</div>
				<!-- <div class="row">
					<span>创建人:</span>
					<el-input v-model="dangerForm.createByName" placeholder="请输入" />
				</div> -->
				<!-- <div class="row">
					<span>创建日期:</span>
					<el-date-picker
						v-model="dangerForm.createTime"
						type="datetime"
						style="width: 100%"
						placeholder="请选择日期"
						format="YYYY-MM-DD HH:mm:ss"
						value-format="YYYY-MM-DD HH:mm:ss"
					/>
				</div> -->
				<div class="row">
					<span>隐患问题:</span>
					<div class="danger-option">
						<el-button v-if="!dangerForm.questionType" type="primary" @click="openStore">隐患库</el-button>
						<el-button v-if="!dangerForm.questionType" type="primary" @click="dangerForm.questionType = 2">自定义隐患</el-button>
						<el-input
							v-if="dangerForm.questionType"
							v-model="dangerForm.questionDesc"
							:disabled="dangerForm.questionType == 1"
							type="textarea"
							:rows="2"
							placeholder="请输入"
						/>
					</div>
				</div>
				<div class="row">
					<span>备注:</span>
					<el-input v-model="dangerForm.remark" type="textarea" :rows="2" placeholder="请输入" />
				</div>
				<div class="row">
					<span>隐患照片:</span>
					<div class="face-img">
						<div class="imgList" v-if="dangerForm.image && dangerForm.image.length > 0">
							<div v-for="(item, index) in dangerForm.image" :key="index">
								<img :src="item.url" class="face-avatar" />
								<el-icon class="close-icon" @click="deleteDangerImg(index)">
									<circle-close />
								</el-icon>
							</div>
						</div>
						<el-upload
							class="face-uploader"
							:action="`${baseUrl}` + '/xmgl/file/upload'"
							:show-file-list="false"
							:before-upload="handleAvatarUpload"
							:on-success="handleAvatarSuccess"
							accept="image/jpg, image/jpeg, image/png"
						>
							<el-icon><plus /></el-icon>
						</el-upload>
					</div>
				</div>
				<div class="status-operate">
					<el-button type="primary" @click="submitForm">提交</el-button>
				</div>
			</div>
			<!-- 检查人员 -->
			<el-dialog v-model="memberVisible" style="width: 500px" custom-class="project-style">
				<template #title>
					<div style="border-left: 2px solid #0f81ff; font-size: 20px; color: #333333">
						<span style="margin-left: 5px">添加检查人员</span>
					</div>
				</template>
				<div class="content-select">
					<div class="member-menu">
						<el-table
							ref="multipleMemberTable"
							:data="membertableData"
							row-key="userId"
							tooltip-effect="dark"
							@selection-change="handleSelectionChange"
						>
							<el-table-column type="selection" width="55"></el-table-column>
							<el-table-column prop="realName" label="检查人员"></el-table-column>
							<el-table-column prop="account" label="用户名称"></el-table-column>
							<el-table-column prop="userTel" label="手机号码"></el-table-column>
						</el-table>
					</div>
				</div>
				<template #footer>
					<span class="dialog-footer">
						<el-button @click="memberVisible = false">取 消</el-button>
						<el-button type="primary" @click="confirmMemberSelected">确 认</el-button>
					</span>
				</template>
			</el-dialog>
		</el-dialog>

		<!-- 工程/项目库 -->
		<el-dialog v-model="projectVisible" custom-class="project-style" width="60%">
			<template #title>
				<div style="border-left: 2px solid #0f81ff; font-size: 20px; color: #333333">
					<span style="margin-left: 5px">选择工程/项目</span>
				</div>
			</template>
			<div class="content-select">
				<div class="left-menu">
					<el-tree :data="projectData" style="margin-top: 10px" :highlight-current="true" node-key="id">
						<template #default="{ node, data }">
							<span class="custom-tree-node" @click.capture="selectProjectTree(data)">
								<span>{{ data.label }}</span>
							</span>
						</template>
					</el-tree>
				</div>
				<div class="right-menu">
					<div class="table-select" v-if="projectTreeData.id">
						<span style="margin: 0 10px 2px 0">{{ projectTreeData.id == 1 ? "工程" : "项目" }}名称</span>
						<el-input style="width: 200px" v-model="projectForm.name" placeholder="请输入" clearable />
						<el-button type="primary" style="margin-left: 20px" @click="searchData">查询</el-button>
					</div>
					<div class="table" v-if="projectTreeData.id == 1">
						<el-table
							style="width: 100%; height: 350px"
							ref="multipleTable"
							:data="projectTableData"
							tooltip-effect="dark"
							@row-click="projectRowClick"
						>
							<!-- <el-table-column type="selection" width="55"></el-table-column> -->
							<el-table-column prop="engineeringName" align="center" label="工程名称"></el-table-column>
							<el-table-column prop="engineeringTypeName" align="center" label="工程类型"></el-table-column>
							<el-table-column prop="stateName" align="center" label="工程状态"></el-table-column>
						</el-table>
					</div>
					<div class="table" v-if="projectTreeData.id == 2">
						<el-table
							style="width: 100%; height: 350px"
							ref="multipleTable"
							:data="projectTableData"
							tooltip-effect="dark"
							@row-click="projectRowClick"
						>
							<!-- <el-table-column type="selection" width="55"></el-table-column> -->
							<el-table-column prop="projectName" align="center" label="项目名称"></el-table-column>
							<el-table-column prop="projectManage" align="center" label="负责人"></el-table-column>
							<el-table-column prop="projectTel" align="center" label="手机号码"></el-table-column>
						</el-table>
					</div>
				</div>
			</div>
			<!-- <template #footer>
				<span class="dialog-footer">
					<el-button @click="projectVisible = false">取 消</el-button>
					<el-button type="primary" @click="projectVisible = false">确 认</el-button>
				</span>
			</template> -->
		</el-dialog>
		<!-- 隐患库 -->
		<el-dialog v-model="storeVisible" style="width: 800px" custom-class="store-style">
			<template #title>
				<div style="border-left: 2px solid #0f81ff; font-size: 20px; color: #333333">
					<span style="margin-left: 5px">隐患库</span>
				</div>
			</template>
			<div class="content-select">
				<div class="left-menu" style="height: calc(100% - 1px); border-bottom: 1px solid #ccc">
					<el-tree
						:data="dangerData"
						style="margin-top: 10px"
						:highlight-current="true"
						node-key="id"
						:expand-on-click-node="false"
					>
						<template #default="{ node, data }">
							<span class="custom-tree-node" @click.capture="selectDangerTree(data)">
								<span>{{ data.name }}</span>
							</span>
						</template>
					</el-tree>
				</div>
				<div class="right-menu" style="height: calc(100% - 1px); border-bottom: 1px solid #ccc">
					<el-table
						ref="multipleTable"
						:data="smallTableData"
						tooltip-effect="dark"
						style="margin: 12px 15px; width: 95%; height: 400px"
						@selection-change="handleSmallSelectionChange"
					>
						<el-table-column type="selection" width="55"></el-table-column>
						<el-table-column prop="name" label="隐患内容"></el-table-column>
					</el-table>
				</div>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="storeVisible = false">取 消</el-button>
					<el-button type="primary" @click="confirmSmallSelected">确 认</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch, reactive, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { FormInstance, UploadProps } from "element-plus";
import {
	addDividerQuestion,
	getEngineeringApproveList,
	AIproList,
	getEngineerInfo,
	getProjectInfo,
	getgovNamelist,
	bigStore,
	smallStoreList
} from "@/api/modules/goverment";
import { GlobalStore } from "@/stores";
import { Delete } from "@element-plus/icons-vue";
import { jxj_User } from "@/api/types";
const multipleMemberTable = ref();
const multipleTable = ref();
const memberVisible = ref(false);
const store = GlobalStore();
const headers = ref({ Authorization: "Bearer " + store.token });
const projectVisible = ref(false);
const tableData = ref([{ name: "111" }]);
const membertableData = ref([]); // 获取检查人员表格数据
const projectTableData = ref([]); // 获取工程/项目表格数据
const projectForm = ref({
	name: ""
});
const projectData = ref([
	{
		id: 1,
		label: "工程名称"
	},
	{
		id: 2,
		label: "项目名称"
	}
]);
const projectSelectedData = ref({}); // 工程/项目列表选中的行数据
const bigTreeData = ref({}); // 大项选中树数据
const smallTableData = ref([]); // 小项列表数据
const dangerData = ref([]);
const dangerForm = ref({
	// createByName: "",
	createTime: "",
	questionType: 0,
	questionDesc: "",
	remark: "",
	image: []
});
const storeVisible = ref(false);
const baseUrl = import.meta.env.VITE_API_URL;
const props = defineProps({
	orderDialog: Boolean
});
const emits = defineEmits(["update:orderDialog", "confirm"]);
const visible1 = ref(false);
const transformDialog = ref(false); // 整改记录对话框
const recordData = ref([]); // 整改记录表格数据
const basicData = ref({
	// 基础信息
	requireType: 1,
	opSignature: [],
	supervisorSignature: [],
	inspectSignature: [],
	otherSignature: []
});
const dialogStyle = ref({
	"min-width": "824px"
});
const noConfirmMemberList = ref([]); // 未确认时的选中的检查人员列表
const selectedMemberList = ref([]); // 选中的检查人员列表
const selectedSmallList = ref([]); // 选中的小项列表
// 设置日期的禁用状态
const disabledDate = date => {
	let todayTime = new Date().getTime();
	let dateTime = date.getTime();
	if (dateTime < todayTime) {
		return true;
	} else {
		return false;
	}
};
const deleteImg = (arrIndex, index) => {
	// 删除签名图片
	switch (arrIndex) {
		case 1:
			basicData.value.opSignature.splice(index, 1);
			break;
		case 2:
			basicData.value.supervisorSignature.splice(index, 1);
			break;
		case 3:
			basicData.value.inspectSignature.splice(index, 1);
			break;
		case 4:
			basicData.value.otherSignature.splice(index, 1);
			break;
	}
};
const confirmSmallSelected = () => {
	let text = "";
	for (let i = 0; i < selectedSmallList.value.length; i++) {
		if (i == selectedSmallList.value.length - 1) {
			text += selectedSmallList.value[i].name;
		} else {
			text += selectedSmallList.value[i].name + ",";
		}
	}
	dangerForm.value.questionDesc = text;
	dangerForm.value.questionType = 1;
	storeVisible.value = false;
};
const getSmallList = async () => {
	console.log(bigTreeData.value);
	const res = await smallStoreList({ libraryId: bigTreeData.value.id, name: "" });
	smallTableData.value = res.result;
	console.log(res);
};
const selectDangerTree = data => {
	console.log(data);
	bigTreeData.value = data;
	getSmallList();
};
const openStore = async () => {
	const res = await bigStore({ name: "", type: 2 });
	dangerData.value = res.result;
	smallTableData.value = [];
	storeVisible.value = true;
};
const addDangerRecord = () => {
	dangerForm.value = reactive({
		// createByName: "",
		createTime: "",
		questionType: 0,
		questionDesc: "",
		remark: "",
		image: []
	});
	transformDialog.value = true;
	dialogStyle.value = reactive({
		"min-width": "824px",
		transform: "translateX(-170px)"
	});
};
const confirmMemberSelected = () => {
	let selectedtext = "";
	selectedMemberList.value = noConfirmMemberList.value;
	if (selectedMemberList.value.length > 0) {
		for (let i = 0; i < selectedMemberList.value.length; i++) {
			if (i == selectedMemberList.value.length - 1) {
				selectedtext += selectedMemberList.value[i].realName;
			} else {
				selectedtext += selectedMemberList.value[i].realName + ",";
			}
		}
		basicData.value.selectedMember = selectedtext;
	} else {
		basicData.value.selectedMember = "";
	}
	memberVisible.value = false;
};
const projectRowClick = row => {
	// 工程/项目列表选中的行数据
	projectSelectedData.value = row;
	projectVisible.value = false;
	getRowDetails();
};
const projectTreeData = ref({}); // 工程/项目树数据
const searchData = () => {
	if (projectTreeData.value.id == 1) {
		getEngieerData();
	} else {
		getProjectData();
	}
};
const getRowDetails = async () => {
	basicData.value = {
		requireType: 1,
		opSignature: [],
		supervisorSignature: [],
		inspectSignature: [],
		otherSignature: []
	};
	selectedMemberList.value = [];
	// 工程/项目详细信息
	if (projectTreeData.value.id == 1) {
		const res = await getEngineerInfo({ id: projectSelectedData.value.id });
		console.log(res);
		basicData.value = reactive({ ...basicData.value, ...res.result });
	} else {
		const res = await getProjectInfo({ projectId: projectSelectedData.value.projectId });
		console.log(res);
		basicData.value = reactive({ ...basicData.value, ...res.result });
	}
};
const getEngieerData = async () => {
	// 工程列表
	let requestData = {
		engineeringName: projectForm.value.name,
		pageSize: -1,
		pageNo: -1
	};
	const res = await getEngineeringApproveList(requestData);
	projectTableData.value = res.result.records;
	console.log(res);
};
const getProjectData = async () => {
	// 项目列表
	let requestData = {
		projectName: projectForm.value.name
	};
	const res = await AIproList(requestData);
	projectTableData.value = res.result;
	console.log(res);
};
const getMemberList = async () => {
	const res = await getgovNamelist({});
	console.log(res);
	membertableData.value = res.result;
};
const selectMember = async () => {
	memberVisible.value = true;
	if (selectedMemberList.value.length > 0) {
		selectedMemberList.value.forEach(key => {
			membertableData.value.forEach(row => {
				if (row.userId == key.userId) {
					multipleMemberTable.value.toggleRowSelection(row, true);
				}
			});
		});
	} else {
		nextTick(() => {
			multipleMemberTable.value.clearSelection();
		});
	}
};
// 删除用户信息
const handleDeleteItem = async index => {
	recordData.value.splice(index, 1);
};

const uploadSuccess = (response: any, index: number) => {
	ElMessage.success("上传成功");
	console.log(response, index);
	if (index == 1) {
		basicData.value.opSignature.push({ url: response.result.url });
	} else if (index == 2) {
		basicData.value.supervisorSignature.push({ url: response.result.url });
	} else if (index == 3) {
		basicData.value.inspectSignature.push({ url: response.result.url });
	} else if (index == 4) {
		basicData.value.otherSignature.push({ url: response.result.url });
	}
};
// const handleSelectionChange = val => {
// 	console.log(val);
// 	let obj = {};
// 	selectedMemberList.value = val;
// 	// 当检查人员表格数据行勾选变换时触发
// 	selectedMemberList.value = val.reduce((item, next) => {
// 		obj[next.userId] ? "" : (obj[next.userId] = true && item.push(next));
// 		return item;
// 	}, []);
// 	console.log(selectedMemberList.value);
// };
const handleSelectionChange = val => {
	noConfirmMemberList.value = val;
	// selectedMemberList.value = val;
	console.log(val);
};
// const handleSelectionAllChange = val => {
// 	selectedMemberList.value = val;
// 	console.log(val);
// };
const handleSmallSelectionChange = val => {
	selectedSmallList.value = val;
};
const selectProjectTree = data => {
	// 选择工程/项目树节点
	console.log(data);
	if (data.id == 1) {
		getEngieerData();
	} else {
		getProjectData();
	}
	projectTreeData.value = data;
};
// 删除隐患照片
const deleteDangerImg = (index: number) => {
	dangerForm.value.image.splice(index, 1);
};
// 图片上传之前
const handleAvatarUpload = file => {
	if (dangerForm.value.image.length == 3) {
		ElMessage.error("上传图片不能大于三张");
		return false;
	}
};
// 图片上传成功后的钩子
const handleAvatarSuccess: UploadProps["onSuccess"] = response => {
	dangerForm.value.image.push({
		url: response.result.url
	});
};
// 提交整改情况
const submitForm = async () => {
	if (!dangerForm.value.questionDesc) {
		ElMessage.error("请添加隐患问题");
		return;
	}
	// if (dangerForm.value.image.length == 0) {
	// 	ElMessage.error("请添加隐患照片");
	// 	return;
	// }
	recordData.value.push({
		...dangerForm.value
	});
	console.log(recordData.value);
	closeSecondary();
	ElMessage.success("提交成功");
};
// 全部提交
const allSubmit = async () => {
	if (!(projectSelectedData.value.projectName || projectSelectedData.value.engineeringName)) {
		ElMessage.error("请选择工程/项目");
		return;
	}
	if (!basicData.value.selectedMember) {
		ElMessage.error("请选择检查人员");
		return;
	}
	if (!basicData.value.deadline) {
		ElMessage.error("请选择整改期限");
		return;
	}
	if (recordData.value.length == 0) {
		ElMessage.error("请添加隐患问题");
		return;
	}
	recordData.value.map(item => {
		item.image = JSON.stringify(item.image);
	});
	let requestData = {
		...basicData.value,
		inspectSignature: JSON.stringify(basicData.value.inspectSignature),
		opSignature: JSON.stringify(basicData.value.opSignature),
		otherSignature: JSON.stringify(basicData.value.otherSignature),
		supervisorSignature: JSON.stringify(basicData.value.supervisorSignature),
		inspectQuestionList: recordData.value,
		type: 2
	};
	const res = await addDividerQuestion(requestData);
	closeMain();
	ElMessage.success("操作成功");
};
// 关闭两个对话框
const closeMain = () => {
	visible1.value = false;
	transformDialog.value = false;
	dialogStyle.value = {
		"min-width": "824px",
		transform: "translateX(0px)"
	};
};
// 关闭整改记录辅弹框
const closeSecondary = () => {
	transformDialog.value = false;
	dialogStyle.value = {
		"min-width": "824px",
		transform: "translateX(0px)"
	};
};
// 监听父组件的visible，用来简介控制el-dialog的弹框开关，一般是用于开
watch(
	() => props.orderDialog,
	(n, o) => {
		visible1.value = n;
		if (n) {
			basicData.value = {
				requireType: 1,
				opSignature: [],
				supervisorSignature: [],
				inspectSignature: [],
				otherSignature: []
			};
			recordData.value = [];
			projectSelectedData.value = {};
		} else {
			emits("confirm");
		}
	}
);
// 监听el-dialog显示状态，再通过@update:visible 通知父组件，一般是用于关
watch(visible1, (n, o) => {
	emits("update:orderDialog", n);
});
onMounted(() => {
	getMemberList();
});
</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 {
	// background-color: #fff;
	flex: 1;
	:deep(.el-dialog) {
		position: relative;
	}
	.title-detail {
		@include flex;
		.line-style {
			width: 4px;
			height: 20px;
			background: #0f81ff;
			margin-right: 12px;
		}
		.title-content {
			font-size: 20px;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			margin-right: auto;
		}
		:deep(.el-icon) {
			cursor: pointer;
			color: #a8abb2;
		}
	}
	.detail-content {
		.content-title {
			@include title;
		}
		.row {
			margin-top: 14px;
			:deep(.el-col) {
				display: flex;
				align-items: center;
			}
			.row-span {
				font-size: 12px;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #333333;
				> span {
					font-weight: 400;
					color: #008bff;
				}
				.diaMapIcon {
					background-color: #008bff;
					width: 34px;
					position: absolute;
					right: 0;
					border-radius: 0 4px 4px 0;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100%;
					cursor: pointer;
				}
			}
			.face-img {
				@include flex;
				flex-wrap: wrap;
				.imgList {
					@include flex;
					> div {
						position: relative;
						img {
							width: 50px;
							height: 34px;
						}
						.close-icon {
							width: 15px;
							height: 15px;
							border-radius: 50%;
							text-align: center;
							border: 1px solid red;
							line-height: 15px;
							position: absolute;
							top: -8px;
							right: -7px;
							color: red;
							cursor: pointer;
						}
					}
				}
			}
			.select-text {
				display: inline-block;
				width: 75px;
				height: 20px;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			.btn-style {
				width: 105px;
				height: 20px;
				background: rgba(48, 172, 124, 0.15);
				opacity: 1;
				border: 1px solid #30ac7c;
				color: #30ac7c;
			}
			.input-style {
				width: 180px;
				height: 26px;
				background: #ffffff;
			}
		}
	}
	.detail-table {
		height: 391px;
		margin-top: 20px;
		.content-title {
			@include title;
			@include flex;
			> span {
				margin-right: auto;
			}
		}
		.table {
			height: 310px;
			margin-top: 20px;
			:deep(.el-table) {
				height: 100%;
			}
		}
		.operation-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 20px;
		}
	}
	.transform-record {
		position: absolute;
		top: 0;
		right: -460px;
		width: 380px;
		height: calc(100% - 31px);
		min-width: 420px;
		background: #ffffff;
		box-shadow: 0px 4px 8px 0px rgba(48, 62, 100, 0.2);
		border-radius: 8px 8px 8px 8px;
		padding: 15px 20px;
		.content-title {
			@include title;
			margin-top: 45px;
			margin-bottom: 24px;
		}
		.row {
			display: flex;
			align-items: center;
			margin-bottom: 12px;
			span:nth-child(1) {
				width: 56px;
				text-align: right;
				font-size: 12px;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #333333;
				white-space: nowrap;
				margin-right: 10px;
			}
			span:nth-child(2) {
				font-size: 12px;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
			.imgList {
				display: flex;
				flex-wrap: wrap;
				> div {
					position: relative;
				}
				:deep(.el-icon) {
					position: absolute;
					top: -10px;
					right: 5px;
					font-size: 24px;
					color: red;
					text-align: center;
					cursor: pointer;
				}
			}
			.face-img {
				width: 100%;
				align-self: flex-start;
				@include flex;
				flex-wrap: wrap;
				:deep(.face-uploader .el-upload) {
					border: 1px dashed #d9d9d9 !important;
					border-radius: 6px !important;
					cursor: pointer !important;
					position: relative !important;
					overflow: hidden !important;
					.el-icon {
						font-size: 28px;
						color: #8c939d;
						width: 53px;
						height: 53px;
						line-height: 53px;
						text-align: center;
					}
				}
				.face-uploader .el-upload:hover {
					border-color: #409eff !important;
				}
				.face-avatar {
					width: 53px;
					height: 53px;
					display: block;
					margin-right: 15px;
				}
			}
			.danger-option {
				width: 100%;
				display: flex;
				align-items: center;
			}
		}
		.status-operate {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}
	.content-select {
		width: 100%;
		height: 426px;
		display: flex;
		align-items: center;
		.left-menu {
			min-width: 200px;
			height: 100%;
			background-color: #ffffff;
			border-right: 1px solid #ccc;
			.custom-tree-node {
				width: 100%;
				display: flex;
				align-items: center;
				> span:first-child {
					width: 98%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-right: auto;
				}
			}
			:deep(.el-tree-node__content) {
				height: 35px !important;
			}
			:deep(.is-current) {
				color: #008bff;
				border-left: 2px solid #008bff;
			}
		}
		.right-menu {
			flex: 1;
			height: 100%;
			.table-select {
				display: flex;
				align-items: center;
				margin: 20px 0 20px 15px;
			}
			.table {
				margin: 0px 15px;
			}
		}
		.member-menu {
			width: 100%;
			padding: 28px 26px;
			min-height: 300px;
			align-self: self-start;
			display: flex;
		}
	}
}

:deep(.el-table__empty-text) {
	min-height: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
}
// 隐患库对话框样式
:deep(.store-style) {
	.el-dialog__header {
		border-bottom: 1px solid #ccc;
	}
	.el-dialog__body {
		padding: 0;
	}
}
// 工程/项目对话框样式
:deep(.project-style) {
	.el-dialog__header {
		height: 30px;
		border-bottom: 1px solid #ccc;
	}
	.el-dialog__body {
		padding: 0;
	}
}
</style>
