<template>
	<div class="list-detail" v-if="showDialog">
		<div class="dialog-content">
			<div class="dialog-title">
				<div class="title-img"><img src="@/assets/images/titleIcon.png" alt="" /></div>
				<div class="title-text">
					<i>{{ dialogTitle }}</i>
				</div>
			</div>
			<div class="base-title">分部分项任务名称: {{ taskName }}</div>
			<div class="gantt-detail">
				<el-scrollbar class="scroll" style="height: 100%" v-if="planList.length > 0">
					<div class="flex plan_content" v-for="(item, index) in planList" :key="index">
						<!-- <img src="@/assets/images/profile_photo.png" class="dialog_img" /> -->
						<div class="dialog_img"></div>
						<div class="plan_info">
							<div class="flex3 back_info">
								<div>
									<span style="color: #99a2b2">上报人：</span>
									{{ item.uploadUserName }}
								</div>
								<div style="color: #99a2b2">{{ item.uploadDate }}</div>
							</div>
							<div class="flex2">
								<el-slider v-model="item.progressRatio" style="width: 85%" :disabled="true" :show-tooltip="false"></el-slider>
								<span class="ratio">{{ item.progressRatio }}%</span>
							</div>
							<div class="back_info margin" style="color: #99a2b2">反馈内容</div>
							<div class="feedbackContent">{{ item.feedbackContent }}</div>

							<div>
								<div class="back_info margin" style="color: #99a2b2">图片</div>
								<img v-if="!item.image" src="@/assets/images/profile_photo.png" class="accessory_img" />
								<img
									v-else
									v-for="(itemImg, index) in JSON.parse(item.image)"
									:key="index"
									:src="BASEURL + '/image/' + itemImg.url"
									@click="handlePreview({ url: itemImg.url })"
									class="accessory_img"
								/>
							</div>
						</div>
						<div class="plan_mater">
							<div class="flex3 back_info" style="color: #fff">材料用量</div>

							<el-scrollbar class="scroll" style="height: 95%" v-if="planList.length > 0">
								<div class="materData" v-for="itemList in item.typeDataList">
									<div style="font-size: 14px; color: #fff">{{ itemList.name }}</div>
									<div style="width: 100%; height: 50%; display: flex; align-items: center">
										<span class="materStyle">{{ itemList.actualUsage }}</span>
										<span class="unitStyle">{{ itemList.unit }}</span>
									</div>
									<!-- <span class="materStyle">{{ itemList.actualUsage }}</span
									>{{ itemList.unit }} -->
								</div>
							</el-scrollbar>
						</div>
					</div>
				</el-scrollbar>
				<div class="notoDta" v-else>
					<img src="@/assets/images/noData.png" alt="" />
					<p>暂无数据</p>
				</div>
			</div>
			<div class="close-icon" @click="showDialog = false">
				<el-icon><Close /></el-icon>
			</div>
			<!-- //查看大图 -->
			<el-dialog
				:show-close="false"
				:modal-append-to-body="false"
				v-model="showBigImg"
				class="transparent-dialog"
				style="background: #051024; width: 100px; height: 100px"
			>
				<img style="width: 600px; height: 600px" :src="dialogImageUrl" alt="" />
			</el-dialog>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import { GlobalStore } from "@/stores";
import { getTaskProgress } from "@/api/modules/schedulePlan";
const BASEURL = import.meta.env.VITE_API_URL;
let showDialog = ref(false as any);

let dialogImageUrl = ref("" as any);
let showBigImg = ref(false as any);

function handlePreview(file: any) {
	console.log(file);
	dialogImageUrl.value = BASEURL + "/image/" + file.url;
	showBigImg.value = true;
}

function handleClick(event: any) {
	// console.log("点击", event.target.className);
	if (event.target.className == "list-detail") {
		showDialog.value = false;
	}
}

let detailId = ref(null as any);
let dialogTitle = ref("进度计划" as any);
let taskName = ref("进度计划" as any);

function openDialog(type: any) {
	console.log("地下室底板浇筑完成", type);
	showDialog.value = true;
	detailId.value = type.id;
	taskName.value = type.taskName;
	getGanttDetail();
}

//获取进度记录数据
const planList = ref([] as any);
const getGanttDetail = async () => {
	const res: any = await getTaskProgress({ taskProgressId: detailId.value });
	console.log("甘特图详情", res);
	planList.value = res.result;
};

// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
defineExpose({
	openDialog
});

onMounted(async () => {
	// await getGanttDetail();
	// console.log("Mount_type", dialogIndex.value);
});
</script>

<style lang="scss" scoped>
.transparent-dialog {
	background: #071b31;
	img {
		margin: 0 auto;
		position: absolute;
		top: 30%;
		left: -200%;
	}
}
.list-detail {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
	background: rgba(7, 28, 49, 0.5);
	z-index: 20;
	.dialog-content {
		position: absolute;
		box-sizing: border-box;
		padding: 1%;
		left: 20%;
		top: 12%;
		width: 60%;
		height: 80%;
		background: url("@/assets/images/aIEarlyWarning/dialogBg.png") no-repeat;
		background-size: 100% 100%;
		z-index: 21;
		.political-outlook {
			height: 95%;
		}
		.dialog-article {
			height: 95%;
		}
		.close-icon {
			position: absolute;
			right: 3%;
			top: 3%;
			cursor: pointer;
			color: #ffffff;
			font-size: 18px;
		}
		.base-title {
			margin-top: 1%;
			margin-left: 4%;
			font-size: 14px;
			color: #ffffff;
			text-align: start;
		}
		.base-title::before {
			content: "•"; /* 使用 content 属性添加小圆点 */
			margin-right: 1%; /* 调整小圆点与文字之间的间距 */
			width: 4px;
			height: 4px;
			color: #65d7f9;
		}
		.gantt-detail {
			width: 100%;
			height: 88%;
			margin-top: 1%;
			// background: #fff;
		}
		.dialog-title {
			color: #ffffff;
			font-weight: bold;
			font-size: 18px;
			font-family: "OPPOSans-Bold";
			display: flex;
			align-items: center;
			.title-img {
				width: 3%;
				height: 3%;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.title-text {
				margin-left: 1%;
			}
		}
	}
}
.notoDta {
	top: 33%;
	width: 32%;
	left: 34%;
	text-align: center;
	position: absolute;
	img {
		width: 40%;
		margin: 5% 30%;
	}
	p {
		color: #fff;
		font-size: 14px;
		margin: -6% 37%;
	}
}

.flex {
	display: flex;
}
.flex2 {
	display: flex;
	align-items: center;
}
.flex3 {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.scroll {
	// background: #f3f5fd;
	box-sizing: border-box;
}

.plan_content {
	height: 30%;
	width: 100%;
	padding: 12px 20px;
	box-sizing: border-box;
}

.dialog_img {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	margin-top: 1%;
	background: #2758c0;
	// box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.11);
	margin-left: 1%;
}
.plan_info {
	width: 40%;
	height: 290px;
	margin-left: 1%;
	padding: 20px 25px;
	position: relative;
	background: #0e2449;
}
.plan_mater {
	width: 40%;
	height: 290px;
	margin-left: 30px;
	padding: 20px 25px;
	background: #0e2449;
	position: relative;
}
// .plan_info:after {
// 	content: "";
// 	position: absolute;
// 	left: -10px;
// 	top: 20px;
// 	border-style: solid;
// 	border-width: 10px;
// 	border-color: #fff #fff transparent transparent;
// 	transform: rotate(-135deg);
// 	box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.04);
// }

.margin {
	margin: 10px 0;
}

.accessory_img {
	width: auto;
	height: 55px;
	margin: 10px 10px 0;
	cursor: pointer;
}

// /deep/.el-slider__runway.disabled .el-slider__bar {
// 	background-color: #5181f6 !important;
// }
// /deep/.el-slider__runway.disabled .el-slider__button {
// 	border-color: #5181f6 !important;
// }

.back_info {
	font-size: 14px;
	color: #fff;
	margin-bottom: 10px;
}
.ratio {
	margin-left: 24px;
	font-size: 22px;
	font-weight: 600;
	color: #5181f6;
}
.materData {
	padding: 3%;
	height: 10%;
	font-size: 14px;
	color: #fff;
	.materStyle {
		display: inline-block;
		width: 80%;
		height: 35px;
		border: 1px solid #1a335f;
		border-radius: 5px;
		line-height: 35px;
		padding-left: 15px;
		margin-right: 5px;
		margin: 5px 5px 0 0;
	}
	.unitStyle {
		white-space: nowrap;
	}
}
.feedbackContent {
	height: 70px;
	color: #fff;
	border: 1px solid #1a335f;
	border-radius: 5px;
	padding: 10px 0 0 10px;
}
</style>
