<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-button @tap="next" :disabled="!data.bm" round="false" class="foot-btn">{{
                data.bm ? "立即报名" : "报名结束"
            }}</wd-button>
        </wd-tabbar>
        <wd-popup
            v-model="show"
            lock-scroll
            position="bottom"
            :safe-area-inset-bottom="true"
            custom-style="height: 200px;border-radius: 30rpx 30rpx 0 0;"
            @close="handleClose10"
        >
            <view class="select">
                <view v-for="(item, index) in actions" :key="index" @click="select({ item, index })">{{ item.name }}</view>
            </view>
        </wd-popup>
    </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({});
const show = ref(false);
const actions = ref([
    {
        name: "选择已有岗位"
    },
    {
        name: "新增岗位"
    }
]);
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;
        // });
    });
});
function showActions() {}

function close() {
    show.value = false;
}
function select({ item, index }) {
    show.value = false;
    if (index == 0) {
        xma.navigateTo({
            url: `/pages/signUp/addPost?articleId=${articleId.value}&type=update`
        });
    } else {
        xma.navigateTo({
            url: `/pages/signUp/addPost?articleId=${articleId.value}&type=add`
        });
    }
}
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;
        // });
    });
});
const form = ref();
function next() {
    show.value = true;
}
</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;
            }
        }
    }
    .select {
        margin: 0 auto;
        width: 100%;
        align-items: center;
        display: flex;
        flex-direction: column;
        margin-top: 100rpx;
        view {
            width: 100%;
            text-align: center;
            padding: 20rpx 0;
            font-weight: 600;
            font-size: 36rpx;
            color: #404040;
        }
    }
    .foot-btn {
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 622rpx;
        height: 80rpx;
        color: #ffffff;
        background: #1f86ff;
        border-radius: 12rpx;
    }
}
</style>
