<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="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"
						: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="类型">
							<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="type2" label="单体工程">
							<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="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="起始标识">
							<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="截止标识">
							<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="验收负责人">
							<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="负责人电话">
							<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="状态">
							<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="备注">
							<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>
				</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>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { FormInstance, UploadProps } from "element-plus";
import { relativeInfo, timeLineData, submitReform, submitAll } from "@/api/modules/project";
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 reformInfo = ref({
	solveBy: "",
	solveTime: "",
	solveDesc: "",
	solveImage: []
});
const addPlan = () => {
	recordData.value.push({
		type1: "",
		type2: "",
		type3: "",
		type4: "",
		type5: "",
		type6: "",
		type7: "",
		type8: "",
		type9: ""
	});
};
// 全部整改完成，提交
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 getTimeLineList = async () => {
	const res = await timeLineData({ inspectQuestionId: recordRowData.value.id });

	res.result.map(item => {
		item.solveImage = eval(item.solveImage);
	});
	timelineList.value = res.result;
};
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(() => {});
</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;
		}
	}
	.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%;
			}
		}
		.operation-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 20px;
		}
	}
}
</style>
