<template>
	<div class="leftTop">
		<Card title="进度概况">
			<div class="progressContent">
				<div style="display: flex; padding: 2% 1%; color: #fff; font-size: 16px">
					<div style="width: 5px; height: 5px; background: rgba(130, 251, 234, 1); border-radius: 10px; margin: 1%"></div>
					<div><i>倒计时</i></div>
				</div>
				<div class="totalDay">
					<div style="line-height: 45px">
						项目总天数
						<span v-if="!projectData.totalProjectDay" class="dayImg">0</span>
						<span v-else class="dayImg" v-for="item in projectData.totalProjectDay" :key="item">{{ item }}</span>
						<!-- <span class="dayImg">0</span>
						<span class="dayImg">4</span>
						<span class="dayImg">7</span> -->
						<span style="margin-left: 4%">天</span>
					</div>
				</div>
				<div class="residueDay">
					<div style="line-height: 45px">
						项目剩余天数
						<span v-if="!projectData.surplusDay" class="dayImg">0</span>
						<span v-else class="dayImg" v-for="item in projectData.surplusDay" :key="item">{{ item }}</span>
						<!-- <span class="dayImg">2</span>
						<span class="dayImg">8</span>
						<span class="dayImg">6</span> -->
						<span style="margin-left: 4%">天</span>
					</div>
				</div>
				<div style="display: flex; margin-top: 4%; margin-left: 2%; color: #fff; font-size: 16px; width: 30%">
					<div style="width: 5px; height: 5px; background: rgba(130, 251, 234, 1); border-radius: 10px; margin: 1%"></div>
					<div><i>里程碑</i></div>
				</div>
				<el-scrollbar style="width: 94%; margin: 3% 0% 0% 3%; height: 30%" v-if="progressList.length > 0">
					<div class="progressData">
						<div class="data" v-for="item in progressList" :key="item.id">
							<div v-if="item.status == 0" class="text" :title="item.name">{{ item.name }}</div>
							<img v-if="item.status == 0" src="@/assets/images/comprehensiveManage/project7.png" alt="" />
							<div
								v-if="item.status == 1"
								style="color: #fff; font-size: 18px; margin-top: -5%"
								:title="item.name"
								class="statusImg1"
							>
								<div class="stage-name">{{ item.name }}</div>
								<div v-if="item.status == 1" class="statusImg"></div>
							</div>
							<img
								v-if="item.status == 1"
								style="width: 40px; margin-top: 1%"
								src="@/assets/images/comprehensiveManage/project11.png"
								alt=""
							/>
						</div>
					</div>
				</el-scrollbar>
				<div class="notoDta" v-else>
					<img src="@/assets/images/noData.png" alt="" />
					<div>暂无数据</div>
				</div>
			</div>
		</Card>
	</div>
</template>

<script setup lang="ts">
import Card from "@/components/card.vue";
import { ref, watch, onMounted } from "vue";
import { getStageOption } from "@/api/modules/projectOverview";
import { GlobalStore } from "@/stores";
const store = GlobalStore();
const progressList = ref([
	// {
	// 	name: "施工证获取",
	// 	status: 0
	// },
	// {
	// 	name: "土方开挖",
	// 	status: 0
	// },
	// {
	// 	name: "桩基",
	// 	status: 0
	// },
	// {
	// 	name: "支护开始",
	// 	status: 0
	// },
	// {
	// 	name: "垫层完成",
	// 	status: 0
	// },
	// {
	// 	name: "正负零",
	// 	status: 0
	// },
	// {
	// 	name: "工程达到预售条件",
	// 	status: 0
	// }
] as any);
// ts
type Props = {
	projectData?: any; // 传入项目信息
};
// withDefaults 定义默认值(传入的数据类型同默认值)
const props = withDefaults(defineProps<Props>(), {
	projectData: {}
});
// 项目信息
const projectData = ref({} as any);

watch(
	() => props.projectData,
	newVal => {
		// console.log(newVal, "newVal");
		if (newVal) {
			// props.xData = newVal;
			projectData.value = newVal;
			console.log("当前阶段", projectData.value.constructionStage);
			if (progressList.value.length > 0) {
				progressList.value[projectData.value.constructionStage - 1].status = 1;
			}
		}
	}
);

//获取里程碑option
const getProgressOption = async () => {
	const res: any = await getStageOption({ dictionaryEncoding: "project_construction_stage", projectSn: store.sn });
	if (res.result.length > 0) {
		let newArray = res.result.map((item: any) => {
			return {
				name: item.name,
				status: 0
			};
		});
		progressList.value = newArray;
		console.log(projectData.value, "里程碑option", res);
		if (projectData.value.constructionStage) {
			progressList.value[projectData.value.constructionStage - 1].status = 1;
		}
	}
};
onMounted(() => {
	getProgressOption();
});
</script>

<style lang="scss" scoped>
.el-scrollbar__wrap {
	overflow-x: auto;
	height: calc(100% + 20px); //多出来的20px是横向滚动条默认的样式
}

.el-scrollbar {
	background: url("@/assets/images/comprehensiveManage/project4.png") no-repeat;
	background-size: 100% 40%;
	background-position-y: 30%;
}

.leftTop {
	width: 100%;
	height: 100%;
}
.progressContent {
	width: 100%;
	height: 100%;
	position: relative;
	.totalDay {
		width: 40%;
		float: left;
		color: #ccc;
		font-size: 16px;
		margin-left: 15%;
	}
	.residueDay {
		width: 40%;
		float: right;
		color: #ccc;
		font-size: 16px;
		margin-right: 5%;
	}
	.dayImg {
		margin-left: 2%;
		font-size: 26px;
		display: inline-block;
		width: 35px;
		height: 45px;
		font-family: sadigitalNumber;
		background: url("@/assets/images/comprehensiveManage/project1.png") no-repeat;
		background-size: 100% 100%;
		text-align: center;
		color: #4ac0f3;
	}
	.progressData {
		// position: absolute;
		// bottom: 3%;
		// left: 3%;
		width: 100%;
		height: 30%;
		display: flex;
		cursor: pointer;
		text-align: center;
		// background: url("@/assets/images/comprehensiveManage/project4.png") no-repeat;
		// background-size: 100% 40%;
		// background-position-y: 30%;
		// .stage-bg {
		// 	height: 50%;
		// 	position: absolute;
		// 	img {
		// 		width: 100%;
		// 		height: 100%;
		// 	}
		// }
		.data {
			color: #ccc;
			font-size: 15px;
			padding-left: 4%;
			padding-right: 1%;
			z-index: 1;
			.text {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			img {
				width: 20px;
				margin-top: 18%;
				margin-left: 15%;
			}
		}
		.statusImg {
			position: absolute;
			top: 190%;
			left: -10%;
			width: 120px;
			height: 1px;
			background: url("@/assets/images/comprehensiveManage/project6.png") no-repeat;
			background-size: 100% 100%;
		}
		.statusImg1 {
			position: relative;
			background: url("@/assets/images/comprehensiveManage/project5.png") no-repeat;
			background-size: 100% 100%;
			.stage-name {
				text-align: center;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
}
::v-deep .h-card .content {
	height: 80%;
	margin-top: 1.8%;
}
.notoDta {
	bottom: 10%;
	width: 20%;
	left: 35%;
	text-align: center;
	position: absolute;
	img {
		width: 40%;
	}
	div {
		color: #fff;
		font-size: 14px;
	}
}
</style>
