<template>
    <view :style="warpCss" class="overflow-hidden relative" v-if="diyComponent && diyComponent.skuList && Object.keys(diyComponent.skuList).length">
        <!-- 自定义头部 -->
        <view class="flex items-center left-0 right-0 z-10 bg-transparent detail-head"
            :class="{ '!bg-[#fff]': detailHeadBgChange, 'fixed': diyStore.mode != 'decorate', 'absolute': diyStore.mode == 'decorate' }"
            :style="navbarInnerStyle">
            <view class="flex-center h-[60rpx] rounded-[30rpx] box-border arrow-left px-[40rpx] leading-[1]"
                :style="navbarInnerArrowStyle">
                <text class="nc-iconfont nc-icon-zuoV6xx text-[18px]" @click="backToPrevious()"></text>
                <text class="w-[2rpx] h-[26rpx] bg-[#999] mx-[14rpx]"></text>
                <text class="nc-iconfont nc-icon-liebiao-xiV6xx1 text-[16px]" @click="topNav = true"></text>
            </view>
            <view
                class="ml-auto !pt-[12rpx] !pb-[8rpx] p-[10rpx] arrow-left rounded-full box-border nc-iconfont nc-icon-fenxiangV6xx font-bold text-[#303133] text-[36rpx]"
                :class="{ 'border-[#d8d8d8]': detailHeadBgChange }" @click="openShareFn"></view>
        </view>
        <view class="fixed top-0 left-0 right-0 bottom-0 z-100 bg-transparent" @click="topNav = false" v-if="topNav">
            <view class="search-box w-[202rpx] bg-[#fff] rounded-[12rpx] relative" :style="fixedInnerStyle">
                <view class="px-[20rpx] flex-center" @click="redirect(item.url)" v-for="(item, index) in menuContents"
                    :key="index">
                    <text class="text-[30rpx] mr-[10rpx]" :class="item.iconfont"></text>
                    <text
                        class="pl-[14rpx] py-[20rpx] flex-1 text-[24rpx] text-[#333] border-0 border-[#ddd] border-b-[1rpx] border-solid">{{
        item.name }}</text>
                </view>
            </view>
        </view>

        <view class="w-full relative overflow-hidden" :style="mediumCss">
            <view class="absolute top-0 left-0 w-full h-full transition-transform duration-300 ease-linear transform"
                :class="{ 'translate-x-0': switchMedia === 'img', 'translate-x-full': switchMedia != 'img' }">
                <view class="swiper-box">
                    <u-swiper :list="diyComponent.image" @change="swiperChangeFn"
                        :indicator="(diyComponent.image.length != 1 || diyStore.mode == 'decorate') && diyComponent.diyInfo.medium.indicator"
                        :indicatorStyle="{ 'bottom': '70rpx' }" :autoplay="switchMedia === 'img' ? true : false"
                        :height="swiperImageHeight" radius="0" @click="swiperClick"></u-swiper>
                </view>
            </view>
            <view @touchmove.stop.prevent
                class="media-mode absolute top-0 left-0 w-full h-full transition-transform duration-300 ease-linear transform"
                :class="{ 'translate-x-0': switchMedia === 'video', '-translate-x-full': switchMedia != 'video' }"
                :style="{ background: 'url(' + img(diyComponent.goods_cover_thumb_mid) + ') left bottom / cover no-repeat' }">
                <view :style="goodsVideoHeight">
                    <video id="goodsVideo" class="w-full h-full" :src="img(diyComponent.goods_video)"
                        :poster="img(diyComponent.goods_cover_thumb_mid)" objectFit="cover"
                        play-btn-position="center"></video>
                </view>
            </view>
            <!-- 切换视频、图片 -->
            <view
                class="media-mode bg-[rgb(0,0,0,.5)] flex items-center rounded-[50rpx] p-[4rpx] absolute bottom-[130rpx] right-[20rpx] text-center leading-[46rpx]"
                v-if="diyComponent.goods_video != ''">
                <text class="tab-item" :class="{ '!bg-[#fff] !text-[#666]': switchMedia == 'video' }"
                    @click="switchMedia = 'video'">视频</text>
                <view class="tab-item flex items-center" :class="{ '!bg-[#fff] !text-[#666]': switchMedia == 'img' }"
                    @click="(switchMedia = 'img'), videoContext.pause()">
                    <text class="mr-[4rpx]">图片</text>
                    <text
                        v-if="switchMedia == 'img' && diyComponent?.image?.length > 1">{{ swiperCurrentIndex }}/{{ diyComponent.image.length }}</text>
                </view>
            </view>
        </view>
        <view
            class="relative flex justify-between items-start !bg-cover box-border pb-[26rpx] min-h-[136rpx] px-[20rpx]"
            :style="marketGoodCss">
            <image :src="img('addon/seckill/goods/detail_head_center.png')"
                class="absolute w-[90rpx] h-[150rpx] top-[-15rpx] right-[223rpx]"></image>
            <view class="flex items-center mt-[24rpx] mb-[16rpx]">
                <image :src="img('addon/seckill/goods/detail_title.png')"
                class="w-[83rpx] h-[75rpx]"></image>
                <view class="text-[#fff] ml-[30rpx] leading-1 flex items-start flex-col justify-start">
                    <view class="flex items-center">
                        <view class="mr-[14rpx]">
                            <text class="text-[26rpx] price-font mr-[4rpx]">￥</text>
                            <text class="text-[44rpx] price-font">{{
            parseFloat(goodsPrice).toFixed(2).split('.')[0] }}</text>
                            <text class="text-[26rpx] price-font">.{{ parseFloat(goodsPrice).toFixed(2).split('.')[1]
                                }}</text>
                        </view>
                    </view>

                    <view class="text-[#FFF6ED]">
                        <text class="text-[20rpx] mr-[6rpx]">原价:</text>
                        <text class="text-[24rpx] price-font line-through leading-[36rpx]">￥{{ diyComponent.defaultSku.price
                            }}</text>
                    </view>
                </view>
            </view>
           
            <view class="flex text-[#fff] items-center flex-col justify-center" :class="{' mt-[26rpx]': diyComponent.seckill.status == 1 && discountTime > 0, 'self-center': diyStore.mode == 'decorate' || (diyComponent.seckill.status == 1 || diyComponent.seckill.status == 0) && diyComponent.seckill_time.status == 0}">
                <template v-if="diyComponent.seckill.status == 0">
                    <text class="mr-[10rpx] whitespace-nowrap">活动未开始</text>
                </template>
                <template v-else-if="diyComponent.seckill.status == 1 && diyComponent.seckill_time.status == 0">
                    <text class="mr-[10rpx] whitespace-nowrap">秒杀结束</text>
                </template>
                <template v-else-if="diyComponent.seckill.status == 1 && discountTime && discountTime > 0">
                    <text class="mb-[15rpx] text-[24rpx] whitespace-nowrap"
                        v-if="diyComponent.seckill_time.status == 1">距离开抢还剩</text>
                    <text class="mb-[15rpx] text-[24rpx] whitespace-nowrap"
                        v-if="diyComponent.seckill_time.status == 2">活动结束还剩</text>
                    <up-count-down class="text-[#fff] text-[24rpx] " :time="discountTime" format="HH:mm:ss"
                        autoStart millisecond @change="onChange">
                        <view class="flex items-center gap-[6rpx] text-[#fff] leading-[1]">
                            <view
                                class="text-[24rpx] flex items-center justify-center min-w-[30rpx] h-[32rpx] rounded-[6rpx] bg-[#fff] text-[#FF150D] px-[2rpx]">
                                <text class="min-w-[30rpx] text-center" v-if="timeData.hours && timeData.hours > 0">{{ timeData.hours >= 10 ? timeData.hours : '0' + timeData.hours }}</text>
                                <text class="min-w-[30rpx] text-center" v-else>00</text>
                            </view>
                            <text>:</text>
                            <view
                                class="text-[24rpx] flex items-center justify-center min-w-[30rpx] h-[32rpx] rounded-[6rpx] bg-[#ffff] text-[#FF150D] px-[2rpx]">
                                <text class="min-w-[30rpx] text-center" v-if="timeData.minutes && timeData.minutes > 0">{{ timeData.minutes >= 10 ? timeData.minutes : '0' + timeData.minutes }}</text>
                                <text class="min-w-[30rpx] text-center" v-else>00</text>
                            </view>
                            <text>:</text>
                            <view
                                class="text-[24rpx] flex items-center justify-center min-w-[30rpx] h-[32rpx] rounded-[6rpx] bg-[#fff] text-[#FF150D] px-[2rpx]">
                                <text class="min-w-[30rpx] text-center" v-if="timeData.seconds && timeData.seconds > 0">{{ timeData.seconds < 10 ? '0' + timeData.seconds : timeData.seconds }}</text>
                                <text class="min-w-[30rpx] text-center" v-else>00</text>
                            </view>
                        </view>
                    </up-count-down>
                </template>
            </view>
        </view>
        <view class="overflow-hidden relative" :style="ordinaryGoodCss">
            <view class="detail-title relative px-[30rpx] pt-[40rpx]">
                <view class="font-medium text-[30rpx] multi-hidden leading-[40rpx]" :style="{'color': diyComponent.diyInfo.goodsInfo.titleColor}">
                    {{ diyComponent.name }}
                </view>
                <view v-if="diyComponent.sub_title" class="text-[26rpx] my-[16rpx] leading-[33rpx]" :style="{'color': diyComponent.diyInfo.goodsInfo.subTitleColor}">
                    {{diyComponent.sub_title}}
                </view>
                
                <view class="flex justify-between items-start mt-[24rpx]">
                    <view class="text-[24rpx] leading-[34rpx]" v-if="saleInfo.includes('stock')" :style="{'color': diyComponent.diyInfo.goodsInfo.saleInfoColor}">
                        <text class="whitespace-nowrap mr-[4rpx]">库存:</text>
                        <text>{{ diyComponent.defaultSku.seckill_stock }}</text>
                        <text>{{ diyComponent.unit }}</text>
                    </view>
                    <view class="text-[24rpx] leading-[34rpx] flex items-baseline" v-if="saleInfo.includes('sales')" :style="{'color': diyComponent.diyInfo.goodsInfo.saleInfoColor}">
                        <text class="whitespace-nowrap mr-[4rpx]">销量:</text>
                        <text class="mx-[2rpx]">{{ diyComponent.defaultSku.order_num }}</text>
                        <text>{{ diyComponent.unit }}</text>
                    </view>
                </view>
            </view>
        </view>
 
        <!-- 装修时，防止点击 -->
        <view v-if="diyStore.mode == 'decorate'" class="absolute z-10 top-0 right-0 bottom-0 left-0"></view>
    </view>
</template>

<script setup lang="ts">
import { ref, computed, watch, onMounted, onUnmounted, nextTick, getCurrentInstance } from 'vue';
import { onPageScroll, onHide, onShow } from '@dcloudio/uni-app'
import { redirect, img, timeTurnTimeStamp } from '@/utils/common';
import useDiyStore from '@/app/stores/diy';
import useSystemStore from '@/stores/system'
import useSeckillGoodsDetailStore from '@/addon/seckill/stores/goodsDetail';
const listimg = ref<string[]>([])
const props = defineProps(['component', 'index', 'value', 'global']);
const diyStore = useDiyStore();
const emits = defineEmits(['loadingFn', 'update:componentIsShow']); //商品数据加载完成之后触发
const topNav = ref(false);
const switchMedia: any = ref('img');
const swiperCurrentIndex = ref(1); // 轮播图当前索引
const videoContext: any = ref(null)
const discountTime = ref(0)
const swiperImageHeight = ref('100vw') // 轮播图高度

const diyComponent = computed(() => {
    if (diyStore.mode == 'decorate') {
        const obj = {
            price: 50,
            image: [img('static/resource/images/diy/shop_default.jpg')],
            name: '商品名称',
            sub_title: '商品副标题',
            unit: '件',
            sale_num: '50',
            defaultSku: {
                seckill_show_price: '100.00',
                seckill_stock: 100,
                order_num: 10,
                price: '200.00'
            },
            seckill:{
                status: 0
            },
            stock: 80,
            goods_video: '',
            skuList: [{}]
        }
        return Object.assign({}, {diyInfo: diyStore.value[props.index]}, obj);
    } else {
        let obj = {
            diyInfo: props.component
        }
		emits('update:componentIsShow', true)
        return Object.assign({}, obj, useSeckillGoodsDetailStore().goodsDetail);
    }
})
const saleInfo = ref([])

const warpCss = computed(() => {
    let style = '';
    style += 'position:relative;';
    if (diyComponent.value.diyInfo.componentStartBgColor && diyComponent.value.diyInfo.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.diyInfo.componentGradientAngle},${diyComponent.value.diyInfo.componentStartBgColor},${diyComponent.value.diyInfo.componentEndBgColor});`;
    else style += 'background-color:' + (diyComponent.value.diyInfo.componentStartBgColor || diyComponent.value.diyInfo.componentEndBgColor) + ';';

    if (diyComponent.value.diyInfo.componentBgUrl) {
        style += `background-image:url('${img(diyComponent.value.diyInfo.componentBgUrl)}');`;
        style += 'background-size: cover;background-repeat: no-repeat;';
    }

    if (diyComponent.value.diyInfo.topRounded) style += 'border-top-left-radius:' + diyComponent.value.diyInfo.topRounded * 2 + 'rpx;';
    if (diyComponent.value.diyInfo.topRounded) style += 'border-top-right-radius:' + diyComponent.value.diyInfo.topRounded * 2 + 'rpx;';
    if (diyComponent.value.diyInfo.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.diyInfo.bottomRounded * 2 + 'rpx;';
    if (diyComponent.value.diyInfo.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.diyInfo.bottomRounded * 2 + 'rpx;';
    return style;
})

/************ 自定义头部-start ****************/
const systemStore = useSystemStore()
let platform = systemStore.systemInfo.platform;

// 导航栏内部盒子的样式
const navbarInnerStyle = computed(() => {
    let style = '';
    // 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
    // #ifdef MP
    let rightButtonWidth = systemStore.menuButtonInfo.width ? systemStore.menuButtonInfo.width * 2 + 'rpx' : '70rpx';
    style += 'height:' + systemStore.menuButtonInfo.height + 'px;';
    style += 'padding-right:calc(' + rightButtonWidth + ' + 30rpx);';
    style += 'padding-left:calc(' + rightButtonWidth + ' + 30rpx);';
    style += 'padding-top:' + systemStore.menuButtonInfo.top + 'px;';
    style += 'padding-bottom: 8px;';

    style += 'font-size: 32rpx;';
    if (platform === 'ios') {
        // 苹果(iOS)设备
        style += 'font-weight: 500;';
    } else if (platform === 'android') {
        // 安卓(Android)设备
        style += 'font-size: 36rpx;';
    }
    // #endif

    // #ifdef H5
    style += 'height: 100rpx;';
    style += 'padding-right: 30rpx;';
    style += 'padding-left: 30rpx;';

    style += 'font-size: 32rpx;';
    if (platform === 'ios') {
        // 苹果(iOS)设备
        style += 'font-weight: 500;';
    } else if (platform === 'android') {
        // 安卓(Android)设备
        style += 'font-size: 36rpx;';
    }
    // #endif
    
    // #ifdef APP-PLUS
    style += 'height: 80rpx;';
    style += 'padding-right: 30rpx;';
    style += 'padding-left: 30rpx;';
    style += 'padding-top:' + systemStore.systemInfo.statusBarHeight + 'px;';
    // #endif
    
    return style;
})

// 导航栏内部盒子的样式
const navbarInnerArrowStyle = computed(() => {
    let style = '';
    // 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
    // #ifdef MP
    style += 'position: absolute;';
    style += 'left:calc( 100vw - ' + systemStore.menuButtonInfo.right + 'px);';
    if (platform === 'ios') {
        // 苹果(iOS)设备
        style += 'font-weight: 700;';
    } else if (platform === 'android') {
        // 安卓(Android)设备
    }
    // #endif
    return style;
})

// 导航栏头部卡片样式
const fixedInnerStyle = computed(() => {
    let style = '';
    // #ifdef MP
    style += 'top:' + (systemStore.menuButtonInfo.height + systemStore.menuButtonInfo.top + 8) + 'px;';
    style += 'left:calc( 100vw - ' + systemStore.menuButtonInfo.right + 'px);';
    // #endif
    // #ifdef H5
    style += 'top: 100rpx;';
    style += 'left: 30rpx;';
    // #endif
    return style;
})

// 头部滚动
const instance = getCurrentInstance();
let swiperHeight = 0
let detailHead = 0

const detailHeadBgChange = ref(false)
onPageScroll((e) => {
    if (swiperHeight == 0 || detailHead == 0) return;
    let height = swiperHeight - detailHead - 20;
    detailHeadBgChange.value = false;
    if (e.scrollTop >= height) {
        detailHeadBgChange.value = true;
    }
})
/************ 自定义头部-end ****************/

/************* 分享海报-start **************/
const openShareFn = () => {
    useSeckillGoodsDetailStore().setGoodsDetail({ isOpenSharePoster: true });
}
/************* 分享海报-end **************/

// 菜单列表
const menuList = {
    index: {
        name: '首页',
        iconfont: 'nc-iconfont nc-icon-shouyeV6xx11',
        url: { url: '/addon/seckill/pages/index', mode: 'reLaunch' }
    },
   goods_list: {
        name: '商品列表',
        iconfont: 'iconfont icona-yingyongliebiaoV6xx-32',
        url: { url: '/addon/seckill/pages/goods/list' }
   },
    member: {
        name: '我的',
        iconfont: 'nc-iconfont nc-icon-a-wodeV6xx-36',
        url: { url: '/addon/seckill/pages/member/index' }
    }
}

const menuContents = computed(() => {
    const list = []
    let menu = typeof diyComponent.value.diyInfo.menuContent == 'object' ? diyComponent.value.diyInfo.menuContent : diyComponent.value.diyInfo.menuContent.split(',')
    menu.forEach((item: any) => {
        if (menuList[item]) {
            list.push(menuList[item])
        }
    })
    return list
})

// 图片轮播change事件
const swiperChangeFn = (e: any) => {
    swiperCurrentIndex.value = e.current + 1;
}

// 商品价格
const goodsPrice = computed(() => {
    return diyComponent.value.defaultSku.seckill_show_price;
})

// 普通商品样式
const ordinaryGoodCss = computed(() => {
    let style = "";
    
    if (diyComponent.value.diyInfo.goodsInfo.startBgColor && diyComponent.value.diyInfo.goodsInfo.endBgColor) style += `background:linear-gradient(180deg,${diyComponent.value.diyInfo.goodsInfo.startBgColor} 60% ,${diyComponent.value.diyInfo.goodsInfo.endBgColor} 100%);`;
    else style += 'background-color:' + (diyComponent.value.diyInfo.goodsInfo.startBgColor || diyComponent.value.diyInfo.goodsInfo.endBgColor) + ';';

    if (diyComponent.value.diyInfo.goodsInfo.topMargin) style += 'margin-top:' + diyComponent.value.diyInfo.goodsInfo.topMargin * 2 + 'rpx;';
    if (diyComponent.value.diyInfo.goodsInfo.aboutMargin) {
        style += 'margin-left:' + diyComponent.value.diyInfo.goodsInfo.aboutMargin * 2 + 'rpx;';
        style += 'margin-right:' + diyComponent.value.diyInfo.goodsInfo.aboutMargin * 2 + 'rpx;';
    }

    if (diyComponent.value.diyInfo.goodsInfo.topRounded) style += 'border-top-left-radius:' + diyComponent.value.diyInfo.goodsInfo.topRounded * 2 + 'rpx;';
    if (diyComponent.value.diyInfo.goodsInfo.topRounded) style += 'border-top-right-radius:' + diyComponent.value.diyInfo.goodsInfo.topRounded * 2 + 'rpx;';
    if (diyComponent.value.diyInfo.goodsInfo.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.diyInfo.goodsInfo.bottomRounded * 2 + 'rpx;';
    if (diyComponent.value.diyInfo.goodsInfo.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.diyInfo.goodsInfo.bottomRounded * 2 + 'rpx;';
    return style;
})

// 价格模块样式
const marketGoodCss = computed(() => {
    let style = "";

    let imgVal =  diyComponent.value.diyInfo.price.bgImg;
    style += `background: url(${img(imgVal)}) no-repeat;`;

    if (diyComponent.value.diyInfo.goodsInfo.priceBgColor) {
        style += `background-color: ${diyComponent.value.diyInfo.goodsInfo.priceBgColor};`;
    }

    if (diyComponent.value.diyInfo.goodsInfo.priceTopMargin) style += 'margin-top:' + diyComponent.value.diyInfo.goodsInfo.priceTopMargin * 2 + 'rpx;';
    if (diyComponent.value.diyInfo.goodsInfo.priceAboutMargin) {
        style += 'margin-left:' + diyComponent.value.diyInfo.goodsInfo.priceAboutMargin * 2 + 'rpx;';
        style += 'margin-right:' + diyComponent.value.diyInfo.goodsInfo.priceAboutMargin * 2 + 'rpx;';
    }

    if (diyComponent.value.diyInfo.goodsInfo.priceTopRounded) style += 'border-top-left-radius:' + diyComponent.value.diyInfo.goodsInfo.priceTopRounded * 2 + 'rpx;';
    if (diyComponent.value.diyInfo.goodsInfo.priceTopRounded) style += 'border-top-right-radius:' + diyComponent.value.diyInfo.goodsInfo.priceTopRounded * 2 + 'rpx;';
    if (diyComponent.value.diyInfo.goodsInfo.priceBottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.diyInfo.goodsInfo.priceBottomRounded * 2 + 'rpx;';
    if (diyComponent.value.diyInfo.goodsInfo.priceBottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.diyInfo.goodsInfo.priceBottomRounded * 2 + 'rpx;';
    return style;
})

const goodsVideoHeight = computed(() => {
    // 这个主要是解决微信小程序的视频播放被商品信息模块遮挡的问题，如果商品信息模块的margin-top是负值，对应的视频高度也需要减去这个负值，但如果是正值就无需处理
    let style = "";
    let height = 0;
    // #ifdef MP
    height = diyComponent.value.diyInfo.goodsInfo.priceTopMargin * 2;
    height = height > 0 ? 0 : height;
    style = `height:calc(100% - ${Math.abs(height)}rpx);`;
    // #endif
    // #ifdef H5
    style = `height: 100%;`;
    // #endif
    return style;
})

const mediumCss = computed(() => {
    let style = "";
    if (diyComponent.value.diyInfo.medium.type == 'height_adaptive') {
        style += `height:${swiperImageHeight.value};`;
    } else {
        style += 'height:100vw;';
    }
    return style;
})

const timeData = ref({});
// 定义 onChange 方法
const onChange = (e) => {
    timeData.value = e;
};

const swiperClick = (index: any) => {
    if (typeof index == 'number') imgListPreview(diyComponent.value.image, index)
}

//预览图片
const imgListPreview = (item: any, index: any) => {
    if (Array.isArray(item)) {
        if (!item.length) return false
        var urlList = item;
        uni.previewImage({
            indicator: "number",
            current: index,
            loop: true,
            urls: urlList
        })
    } else {
        if (item === '') return false
        var urlList = []
        urlList.push(img(item))  //push中的参数为 :src="item.img_url" 中的图片地址
        uni.previewImage({
            indicator: "number",
            loop: true,
            urls: urlList
        })
    }

}

// 返回上一页
const backToPrevious = () => {
    if (getCurrentPages().length > 1) {
        uni.navigateBack({
            delta: 1
        });
    } else {
        redirect({
            url: '/addon/seckill/pages/index',
            mode: 'reLaunch'
        });
    }
}

const initFn = () => {
    if (diyComponent.value?.goods_video != '') {
        switchMedia.value = 'video'
        videoContext.value = uni.createVideoContext('goodsVideo');
    }

    // 活动进行中
    if (diyComponent.value.seckill.status == 1) {
        // 场次秒杀中
        if (diyComponent.value.seckill_time.status == 2) {
            // 秒杀倒计时
            // 获取当前时间
            const now = new Date();

            // 提取当前的时、分、秒
            const hours = now.getHours();
            const minutes = now.getMinutes();
            const seconds = now.getSeconds();

            // 计算当天已过的总秒数（从00:00:00到现在）
            const currentTimeSeconds = hours * 3600 + minutes * 60 + seconds;
            discountTime.value = (diyComponent.value.seckill_time.end_time - currentTimeSeconds) * 1000;
            // 处理负数情况（如果当前时间已超过结束时间，剩余时间为0）
            if (discountTime.value < 0) {
                discountTime.value = 0;
            }
        } else if (diyComponent.value.seckill_time.status == 1) {
            // 场次即将开始
            const now = new Date();
            // 提取当前的时、分、秒
            const hours = now.getHours();
            const minutes = now.getMinutes();
            const seconds = now.getSeconds();

            // 计算当天已过的总秒数（从00:00:00到现在）
            const currentTimeSeconds = hours * 3600 + minutes * 60 + seconds;
            discountTime.value = (diyComponent.value.seckill_time.start_time - currentTimeSeconds) * 1000;
            // 处理负数情况（如果当前时间已超过结束时间，剩余时间为0）
            if (discountTime.value < 0) {
                discountTime.value = 0;
            }
        }
    }

    saleInfo.value = (typeof diyComponent.value?.diyInfo.saleInfo == 'object') ? diyComponent.value?.diyInfo.saleInfo : diyComponent.value?.diyInfo.saleInfo.split(',');

    setTimeout(() => {
        const query = uni.createSelectorQuery().in(instance);
        query.select('.swiper-box').boundingClientRect((data: any) => {
            swiperHeight = data ? data.height : 0;
        }).exec();
        query.select('.detail-head').boundingClientRect((data: any) => {
            if (data) {
                detailHead = data.height ? data.height : 0;
            }
        }).exec();
    }, 400)

    // 轮播图高度
    if (diyComponent.value.diyInfo.medium.type == 'height_adaptive') {
        const screenWidth = uni.getSystemInfoSync().screenWidth
        swiperImageHeight.value = (screenWidth * diyComponent.value.image_size.height / diyComponent.value.image_size.width) * 2 + 'rpx'
    } else {
        swiperImageHeight.value = '100vw'
    }
}

onMounted(() => {
    saleInfo.value = (typeof diyComponent.value?.diyInfo.saleInfo == 'object') ? diyComponent.value?.diyInfo.saleInfo : diyComponent.value?.diyInfo.saleInfo.split(',');
    // 装修模式下刷新
    if (diyStore.mode == 'decorate') {
        watch(
            () => diyComponent.value,
            (newValue, oldValue) => {
                if (newValue && newValue.diyInfo?.componentName && newValue.diyInfo.componentName == 'SeckillGoodsDetailBasicInfo') {
                    nextTick(() => {
                        saleInfo.value = (typeof diyComponent.value?.diyInfo.saleInfo == 'object') ? diyComponent.value?.diyInfo.saleInfo : diyComponent.value?.diyInfo.saleInfo.split(',');
                    })
                }
            }
        )
    } else {
        initFn()
    }
});
</script>
<style lang="scss" scoped>
.arrow-left {
    // background: rgba(153, 153, 153, 0.1);
    background: rgba(255, 255, 255, 0.6);
    border: 1rpx solid rgba(0, 0, 0, 0.1);
}

.media-mode {
    .tab-item {
        color: #fff;
        font-size: 24rpx;
        line-height: 46rpx;
        border-radius: 50rpx;
        padding: 0 20rpx;
        display: inline-block;
    }
}

.brand-tag {
    position: relative;
    top: -2rpx;
    display: inline;
    line-height: 38rpx;
    padding: 4rpx 8rpx;
    border-radius: 4rpx;
    margin-right: 8rpx;
    background: red;
    vertical-align: middle;
    font-size: 18rpx;
    color: #fff;
    border: 2rpx solid transparent;

    &.middle {
        padding: 4rpx 8rpx;
        border-radius: 8rpx;
        font-size: 20rpx;
        margin-right: 6rpx;
    }
}

.base-tag {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 34rpx;
    font-size: 18rpx;
    padding: 0 8rpx;
    color: #333;
    border-radius: 4rpx;
    background-color: #fff;
    margin-right: 8rpx;
    box-sizing: border-box;
    margin-top: 8rpx;
    border: 2rpx solid transparent;

    &.middle {
        height: 40rpx;
        padding: 0 12rpx;
        border-radius: 8rpx;
        font-size: 20rpx;
        margin-right: 16rpx;
    }
}

.img-tag {
    display: block;
    height: 34rpx;
    width: auto;
    border-radius: 4rpx;
    margin-right: 14rpx;
    box-sizing: border-box;
    margin-top: 8rpx;

    &.middle {
        height: 38rpx;
        border-radius: 8rpx;
        margin-right: 16rpx;
    }
}

.goods-video-height {
    height: 100%;
}

:deep(.uni-video-bar) {
    bottom: 34rpx !important;
}

:deep(.uni-video-cover) {
    background: none;
}

:deep(.uni-video-cover-duration) {
    display: none;
}

:deep(.uni-video-cover-play-button) {
    border-radius: 50%;
    border: 4rpx solid #fff;
    width: 120rpx;
    height: 120rpx;
    background-size: 30%;
}
</style>
