<template>
    <NavBar :showIcon="true" :showTitle="true" title="文章详情" backgroundBox="#FFFFFF"></NavBar>
    <div class="page">
        <div class="top">
            <video
                :poster="evn.APP_IMAGE_BASE_API + data.thumbnailPath"
                :src="evn.APP_IMAGE_BASE_API + data.videoPath"
                v-if="data.infoType === 2"
            ></video>
            <div class="title">{{ data.title }}</div>
            <div class="flex-between">
                <div class="publisher">{{ data.publisher }}</div>
                <div class="date">{{ dayjs(data.publishDate).format("YYYY/MM/DD hh:mm") }}</div>
            </div>
            <div class="watch flex-align-center">
                <img src="@/static/image/icon/eye.png" alt="" />
                {{ data.views }}
            </div>
        </div>
        <div class="content" v-html="data.content"></div>

        <wd-tabbar
            v-if="data.type == 3"
            custom-style="display: flex;justify-content: center !important;z-index:1;"
            fixed
            placeholder
            safeAreaInsetBottom
        >
            <wd-button @tap="next" :disabled="data.bmStutas || !data.bm" round="false" class="foot-btn">{{
                !data.bmStutas && data.bm ? "立即报名" : data.bmStutas ? "已报名" : "报名结束"
            }}</wd-button>
        </wd-tabbar>
    </div>
</template>

<script setup>
import { getArticleDetailApi, registerStatus } from "@/api/article.js";
import evn from "@/utils/config.js";
import { ref } from "vue";
import dayjs from "dayjs";
const data = ref({});
let articleId = ref(null);
onLoad(({ id }) => {
    articleId.value = id;
    const currentTime = Date.now();
    getArticleDetailApi(id).then(res => {
        console.log(res);
        data.value = res.data;
        // 选择 btnTxt 的值
        if (currentTime >= res.data.registerStartTime && currentTime <= res.data.registerEndTime) {
            data.value.bm = true; // 当前时间在开始时间和结束时间之间
        } else {
            data.value.bm = false;
        }

        registerStatus(id).then(Res => {
            data.value.bmStutas = Res.data;
        });
    });
    console.log("data.value", data.value.bm, data.value.bmStutas);
});
onShow(() => {
    const currentTime = Date.now();
    getArticleDetailApi(articleId.value).then(res => {
        console.log(res);
        data.value = res.data;
        // 选择 btnTxt 的值
        if (currentTime >= res.data.registerStartTime && currentTime <= res.data.registerEndTime) {
            data.value.bm = true; // 当前时间在开始时间和结束时间之间
        } else {
            data.value.bm = false;
        }

        registerStatus(articleId.value).then(Res => {
            data.value.bmStutas = Res.data;
        });
    });
});

function next() {
    xma.navigateTo({
        url: `/pages/signUp/index?articleId=${articleId.value}`
    });
}
</script>

<style lang="scss" scoped>
.page {
    padding: 32rpx;
    .top {
        padding-bottom: 32rpx;
        margin-bottom: 32rpx;
        border-bottom: 2rpx solid #f3f4f8;
        video {
            width: 100%;
        }
        .title {
            font-size: 32rpx;
            font-weight: 600;
            line-height: 48rpx;
            color: #1b2026;
        }
        .flex-between {
            margin: 16rpx 0;
            font-size: 24rpx;
            font-weight: 500;
            line-height: 28rpx;
            color: #77818f;
            letter-spacing: 0rpx;
        }
        .watch {
            font-size: 24rpx;
            font-weight: 500;
            line-height: 28rpx;
            color: #77818f;
            img {
                width: 25.34rpx;
                height: 16rpx;
                margin-right: 8rpx;
            }
        }
    }
    .foot-btn {
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 622rpx;
        height: 80rpx;
        color: #ffffff;
        background: #1f86ff;
        border-radius: 12rpx;
    }
}
</style>
