<template>
    <div class="leader-radio">
        <div>
            <img src="../../assets/images/peiluoxi.png" alt="" style="margin-left: 125px;">
        </div>
        <div class="graph-container">
            <!-- 这里将来放关系图 -->
        </div>
        <div class="leader-time">
            <p>2022.07.31 00:00:00</p>
            <div class="progress-bar-container">
                <div class="progress-bar" :style="{ width: progress + '%' }"></div>
                <div v-for="(breakpoint, index) in breakpoints" :key="index" class="breakpoint"
                    :style="{ left: breakpoint + '%' }" @click="pauseProgress(index)"></div>
                <div class="drag-button" :style="{ left: progress + '%' }" @mousedown="startDrag"></div>
            </div>
            <p>2022.08.01 00:00:00</p>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

// 时间轴相关逻辑
const progress = ref(0);
let progressInterval = null;
const breakpoints = [4, 12.5, 25, 37.5, 50, 62.5, 75, 87.5];
const isPaused = ref(false);
const isDragging = ref(false);

const startDrag = () => { isDragging.value = true; isPaused.value = true; };
const startProgress = () => {
	progressInterval = setInterval(() => {
	  if (!isPaused.value) {
		progress.value += 0.1;
		if (progress.value >= 100) clearInterval(progressInterval);
	  }
	}, 10);
};
const pauseProgress = (index) => {
	const breakpointValue = breakpoints[index];
	if (Math.abs(progress.value - breakpointValue) < 1) {
	  isPaused.value = !isPaused.value;
	}
};

onMounted(() => startProgress());
onUnmounted(() => { if (progressInterval) clearInterval(progressInterval); });
</script>

<style scoped>
/* 粘贴所有与 .leader-radio 和 .leader-time 相关的样式 */
.leader-radio {
	width: 800px;
	height: 540px;
	background-color: #04142166;
	border-radius: 2px;
	box-shadow: 0px 0px 18px 0px #0A2E55 inset;
	backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
}
.graph-container {
    flex-grow: 1; /* 占据中间的空白区域 */
}
.leader-time {
	width: calc(100% - 14px);
	height: 42px;
	margin: 0 7px 7px 7px;
	border-radius: 4px;
	color: #FFFFFF;
	font-size: 14px;
	background-image: linear-gradient(to right, #00527D, #97E3F87A);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 10px;
}
.progress-bar-container {
	position: relative; /* 改为相对定位 */
	width: 400px;
	height: 6px;
	border-radius: 20px;
	background-color: #3B7699;
}
/* ... 其他时间轴样式 ... */
</style>