<template>
    <div class="bg-fff round-12 p-16">
        <div class="flex items-center justify-between">
            <div class="flex items-center">
                <div class="w-40 h-40 bg-main round-6 mr-10 update-icon"></div>
                <div class="section2-head">
                    <div class="fs-16 fw-700 color-000">更新记录</div>
                    <p class="fs-14 color-666">算法迭代与功能发布日志</p>
                </div>
            </div>
            <div class="flex-items-center color-888 pointer" @click="goUpdateLog">
                <svg t="1786427654955" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="6217" width="16" height="16">
                    <path
                        d="M566.2 166.9c-11.7-11.7-30.8-11.7-42.4 0L509.7 181c-11.7 11.7-11.7 30.8 0 42.4l254.9 254.9c11.7 11.7 11.7 30.8 0 42.4L509.2 776.1c-11.7 11.7-11.7 30.8 0 42.4l14.1 14.1c11.7 11.7 30.8 11.7 42.4 0l311.1-311.1c11.7-11.7 21.1-21.3 21-21.4-0.1-0.1 0-0.4 0.2-0.6 0.2-0.2-9.1-10-20.8-21.6l-311-311z"
                        fill="#888888" p-id="6218"></path>
                    <path
                        d="M769 460c16.5 0 30 13.5 30 30v20c0 16.5-13.5 30-30 30H129c-16.5 0-30-13.5-30-30v-20c0-16.5 13.5-30 30-30h640z"
                        fill="#888888" p-id="6219"></path>
                </svg>
                <span>全部</span>
            </div>
        </div>

        <section class="mt-20 flex gap-10">
            <div v-for="item in list" :key="item.version" class="update-card round-6 p-12 pointer"
                @click="lookDetail(item)">
                <div class="flex-items-center justify-between">
                    <div class="fs-12 flex gap-6">
                        <span class="bg-000 round-4 px-6 py-2 color-fff">{{ item.version }}</span>
                        <span class="round-4 px-6 py-2 color-main update-type">{{ item.type }}</span>
                    </div>
                    <span class="fs-12 px-6 py-2 color-999">{{ item.date }}</span>
                </div>
                <div class="mt-10 ellipsis font-bold color-000">{{ item.title }}</div>
                <div class="mt-10 ellipsis-2 color-888 fs-13 lh-22">{{ item.desc }}</div>
            </div>
        </section>

        <Dialog v-model="detailVisible" bg-color="#fff" width="512">
            <div v-if="currentDetail" class="detail-dialog hidden p-26">
                <div class="flex-items-center gap-10">
                    <span class="version-tag color-fff font-bold fs-12 px-10 py-4 round-12">{{ currentDetail.version }}</span>
                    <span class="new-tag color-main font-bold fs-12 px-8 py-4 round-6">{{ currentDetail.type }}</span>
                    <span class="fs-12 color-8aa">发布日期： {{ currentDetail.date }}</span>
                </div>

                <h3 class="mt-12 pb-14 fs-16 color-000 update-title">{{ currentDetail.title }}</h3>

                <div class="mt-20 p-16 round-8 desc-box fs-13 lh-24 color-334">
                    {{ currentDetail.desc }}
                </div>

                <div class="mt-20 flex-items-center gap-8">
                    <span class="spark color-main fs-18">✣</span>
                    <span class="font-bold color-000 fs-14">更新内容明细</span>
                </div>

                <div class="mt-10 p-16 round-8 detail-list">
                    <div v-for="content in currentDetail.details" :key="content"
                        class="flex-items-center gap-10 fs-13 color-334 lh-28">
                        <span class="detail-dot round bg-main"></span>
                        <span>{{ content }}</span>
                    </div>
                </div>

                <div class="flex justify-end mt-28">
                    <el-button type="primary" color="#9d19ff" class="px-22 h-32" @click="detailVisible = false">
                        我知道了
                    </el-button>
                </div>
            </div>
        </Dialog>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { updateRecords, type UpdateRecord } from '../updateRecords';

const router = useRouter();
const detailVisible = ref(false);
const currentDetail = ref<UpdateRecord>();
const list = ref<UpdateRecord[]>(updateRecords.slice(0, 4));

const goUpdateLog = () => {
    router.push('/home/update-log');
};

const lookDetail = (record: UpdateRecord) => {
    currentDetail.value = record;
    detailVisible.value = true;
};
</script>

<style lang="scss" scoped>
.update-icon,
.update-type {
    background-color: rgba(var(--main-color), .1);
}

.update-card {
    flex: 0 0 calc((100% - 10px * 3) / 4);
    overflow: hidden;
    background-color: #88888810;
    transition: border-color .2s, box-shadow .2s, transform .2s;
    border: 1px solid transparent;

    &:hover {
        border-color: rgba(var(--main-color), .25);
        box-shadow: 0 8px 24px rgba(31, 41, 55, .08);
        transform: translateY(-2px);
    }
}

.detail-dialog {
    box-shadow: 0 18px 45px rgba(15, 23, 42, .18);
}

.version-tag {
    background: #101a33;
}

.new-tag,
.detail-list {
    background: #fbf5ff;
}

.update-title {
    border-bottom: 1px solid #edf0f5;
}

.desc-box {
    background: #f8fbff;
    border: 1px solid #dfe7f2;
}

.detail-list {
    border: 1px solid #f0d9ff;
}

.detail-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
}

.color-8aa {
    color: #8aa0bf;
}

.color-334 {
    color: #334155;
}
</style>
