<template>
    <div class="update-log-page">
        <div class="update-log-inner">
            <header class="update-log-header">
                <h1>更新日志</h1>
                <p>我们在持续进行功能和体验升级</p>
            </header>

            <section class="timeline-list">
                <article v-for="(item, index) in updateRecords" :key="item.version" class="timeline-item">
                    <aside class="timeline-side">
                        <div class="version">{{ item.version }}</div>
                        <div class="date">{{ formatShortDate(item.date) }}</div>
                        <span v-if="index === 0" class="latest-tag">最新版</span>
                    </aside>

                    <div class="timeline-axis">
                        <span class="timeline-dot" :class="{ active: index === 0 }"></span>
                    </div>

                    <div class="update-panel">
                        <h2>{{ formatTitleDate(item.date) }}产品特性变更内容</h2>
                        <p v-if="index === 0" class="summary">{{ item.desc }}</p>

                        <ol class="detail-list">
                            <li v-for="detail in item.details" :key="detail">{{ detail }}</li>
                        </ol>

                        <p v-if="index === 0" class="contact">
                            如果你的业务场景比较复杂，需要更多支持，请第一时间联系
                            <a href="mailto:csm@mcaigc.com">csm@mcaigc.com</a>
                        </p>
                        <p class="release-time">升级时间：{{ formatTitleDate(item.date) }}22:00</p>
                    </div>
                </article>
            </section>
        </div>
    </div>
</template>

<script setup lang="ts">
import { updateRecords } from './updateRecords';

const formatShortDate = (date: string) => date.replace(/-/g, '.');

const formatTitleDate = (date: string) => {
    const [year, month, day] = date.split('-');
    return `${year} 年 ${month} 月 ${day} 日`;
};
</script>

<style lang="scss" scoped>
.update-log-page {
    min-height: 100%;
    background: #f5f6f8;
    color: #202734;
    overflow-x: hidden;
}

.update-log-inner {
    width: min(1000px, calc(100% - 48px));
    margin: 0 auto;
    padding: 0 0 72px;
}

.update-log-header {
    min-height: 190px;
    text-align: center;
    padding-top: 26px;

    h1 {
        margin: 0;
        color: #1f2530;
        font-size: 44px;
        line-height: 1.15;
        font-weight: 700;
        letter-spacing: 0;
    }

    p {
        margin: 28px 0 0;
        color: #5d6a7e;
        font-size: 20px;
        line-height: 1.4;
    }
}

.timeline-list {
    padding-top: 14px;
}

.timeline-item {
    display: grid;
    grid-template-columns: 132px 36px minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
}

.timeline-item + .timeline-item {
    margin-top: 60px;
}

.timeline-side {
    text-align: right;
    padding-top: 2px;
}

.version {
    color: #202734;
    font-size: 26px;
    line-height: 1;
    font-weight: 700;
}

.date {
    margin-top: 7px;
    color: #c1c7d1;
    font-size: 13px;
}

.latest-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    min-width: 44px;
    height: 24px;
    padding: 0 8px;
    border-radius: 2px;
    background: #dbfff0;
    color: #2fd18c;
    font-size: 12px;
    font-weight: 600;
}

.timeline-axis {
    position: relative;
    display: flex;
    justify-content: center;
}

.timeline-axis::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: -60px;
    width: 1px;
    background: #e1e5ec;
}

.timeline-item:last-child .timeline-axis::before {
    bottom: calc(100% - 8px);
}

.timeline-dot {
    position: relative;
    z-index: 1;
    width: 9px;
    height: 9px;
    margin-top: 4px;
    border-radius: 50%;
    border: 1px solid #b8c0cc;
    background: #f5f6f8;
}

.timeline-dot.active {
    width: 17px;
    height: 7px;
    margin-top: 8px;
    border: 0;
    border-radius: 2px;
    background: #3157e8;
    transform: rotate(24deg);
}

.update-panel {
    min-height: 302px;
    padding: 26px 24px 24px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(36, 45, 64, .03);
}

.update-panel h2 {
    margin: 0;
    color: #202734;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: 0;
}

.summary {
    margin: 18px 0 0;
    color: #8895a7;
    font-size: 14px;
    line-height: 1.8;
    font-weight: 600;
}

.detail-list {
    margin: 16px 0 0;
    padding-left: 0;
    list-style: none;
    counter-reset: detail;
}

.detail-list li {
    counter-increment: detail;
    color: #8a96a8;
    font-size: 14px;
    line-height: 2.75;
}

.detail-list li::before {
    content: counter(detail) '. ';
}

.contact {
    margin: 12px 0 0;
    color: #202734;
    font-size: 16px;
    line-height: 1.55;
    font-weight: 700;
}

.contact a {
    color: #1a00ff;
    text-decoration: underline;
}

.release-time {
    margin: 2px 0 0;
    color: #202734;
    font-size: 16px;
    line-height: 1.55;
    font-weight: 700;
}

@media (max-width: 768px) {
    .update-log-inner {
        width: min(100% - 28px, 640px);
    }

    .update-log-header {
        min-height: 150px;
        padding-top: 24px;

        h1 {
            font-size: 34px;
        }

        p {
            margin-top: 18px;
            font-size: 16px;
        }
    }

    .timeline-item {
        grid-template-columns: 88px 22px minmax(0, 1fr);
        gap: 10px;
    }

    .timeline-item + .timeline-item {
        margin-top: 28px;
    }

    .version {
        font-size: 20px;
    }

    .update-panel {
        min-height: auto;
        padding: 20px 18px;
    }

    .contact,
    .release-time {
        font-size: 14px;
    }
}
</style>
