<template>
	<Card title="倒计时">
		<div class="schedule-plan">
			<div class="countdown-top">项目整体倒计时:</div>
			<div class="countdown-num" v-if="projectTimeInfo.totalProjectDay">
				<div class="number-bg">
					<div class="number">{{ countdown[0] || 0 }}</div>
				</div>
				<div class="number-bg">
					<div class="number">{{ countdown[1] || 0 }}</div>
				</div>
				<div class="number-bg">
					<div class="number">{{ countdown[2] || 0 }}</div>
				</div>
				<div class="number-bg">
					<div class="number">{{ countdown[3] || 0 }}</div>
				</div>
				<div class="number-bg">
					<div class="number">{{ countdown[4] || 0 }}</div>
				</div>
				<div class="number-bg">
					<div class="number">{{ countdown[5] || 0 }}</div>
				</div>
			</div>
			<div class="complete-time">竣工时间: {{ projectTimeInfo.contractPeriodEndTime }}</div>
		</div>
	</Card>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import Card from "@/components/card.vue";
import { getTaskTimeDetail } from "@/api/modules/schedulePlan";
import { GlobalStore } from "@/stores";
const store = GlobalStore();

//获取项目信息
const projectTimeInfo = ref({} as any);
let countdown = ref(0 as any);

const getProjectInfo = async () => {
	const res: any = await getTaskTimeDetail({ projectSn: store.sn });
	console.log("获取项目信息", res);
	projectTimeInfo.value = res.result;
	countdown.value = projectTimeInfo.value.surplusDay.toString().padStart(6, "0");
};

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

<style scoped lang="scss">
.schedule-plan {
	width: 100%;
	height: 100%;
	position: relative;
	.countdown-top {
		font-size: 14px;
		color: #fff;
		padding-top: 4%;
		margin-left: 3%;
	}
	.countdown-num {
		display: flex;
		align-items: center;
		margin: auto;
		margin-top: 3%;
		max-width: 96%;
		height: 55%;
		background: url("@/assets/images/schedulePlan/countdownBg.png") no-repeat;
		background-size: 100% 100%;
		.number-bg {
			display: flex;
			align-items: center;
			height: 90%;
			padding: 0 2%;
			margin-left: 3%;
			background: url("@/assets/images/schedulePlan/textBg.png") no-repeat;
			background-size: 100% 100%;
			.number {
				font-size: 64px;
				color: #fff;
				font-family: D-DIN-Regular, D-DIN;
				letter-spacing: 6px;
			}
		}
	}
	.complete-time {
		position: absolute;
		right: 4%;
		bottom: 8%;
		font-size: 14px;
		color: #fff;
	}
}
</style>
