<template>
    <view class="discount bg-[var(--page-bg-color)] min-h-[100vh]" :style="themeColor()">
        <view >
             <!-- #ifdef MP-WEIXIN -->
             <view class="absolute top-0 left-0 right-0 z-999">
                <top-tabbar :data="param" class="top-header" />
            </view>
            <!-- #endif -->
            <view v-if="config.pintuan_brief" class="side-tab" :style="{ top: topStyle }" @click="pintuanPopup = true">
                <text class="iconfont iconjishibenV6xx !text-[#fff] icon"></text>
                <text class="desc">拼团规则</text>
            </view>
            <!-- <view
      :style="'background: url(' + img('addon/pintuan/bannter_top.png') + ') no-repeat;background-size: 100% 100%;background-position-y: -100rpx;'"
      class="h-[521rpx] w-full"></view> -->
            <image :src="img(config.banner)" mode="aspectFill" class="w-full" :style="{ height: headStyle }" :show-menu-by-longpress="true" />
        </view>
        <view class="mt-[-100rpx] rounded-t-[24rpx]">
            <view class="h-[300rpx] bg-[#F6F6F6]" v-if="loading"></view>
            <mescroll-body ref="mescrollRef" @init="mescrollInit" :down="{ use: false }" @up="getPintuanGoodsFn">
            <view class="relative bg-[#F6F6F6] rounded-t-[24rpx]">
                <view class="sidebar-margin py-[var(--top-m)] relative">
                    <view class="rounded-[24rpx] bg-[#fff] flex flex-col mb-[20rpx]" v-for="(item, index) in list" @click="toLink(item)">
                        <view class="p-[20rpx] flex justify-between">
                            <view class="w-[240rpx] h-[240rpx] overflow-hidden">
                            <u--image width="240rpx" height="240rpx" :radius="'var(--goods-rounded-big)'" :src="img(item.cover_thumb_mid || '')"  model="aspectFill">
                                <template #error>
                                    <image class="rounded-[var(--goods-rounded-big)] overflow-hidden w-[240rpx] h-[240rpx]" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill" />
                                </template>
                            </u--image>
                        </view>
                        <view class="flex-1 flex flex-col justify-between ml-[20rpx] py-[6rpx] relative">
                            <view class="text-[28rpx] leading-[40rpx] text-[#303133] using-hidden mb-[10rpx]">
                                {{ item.title }}
                            </view>
                            <view class="text-[24rpx] leading-[40rpx] text-[#999] using-hidden mb-[10rpx]">
                                {{ item.sub_title }}
                            </view>
                            <view
                                class="self-start overflow-hidden h-[30rpx] border-[1px] border-[#FF9A9F] border-solid rounded-[8rpx] mb-[10rpx] flex leading-[normal] text-[#FF9A9F]">
                                <view class="bg-[#FFF2F2] text-[#FF000D] text-[20rpx] h-[30rpx] leading-[30rpx] rounded-r-0 px-[8rpx] text-center">{{item.pintuan?.target_num}}人团</view>
                                <view class="text-[#FF000D] text-[20rpx] text-center leading-[30rpx] px-[10rpx]">已拼{{item.success_group_num || '0'}}份</view>
                            </view>
                            <view class="mt-auto flex justify-between items-end">
                                <view class="flex flex-col items-baseline">
                                    <view class="h-full flex flex-col">
                                        <view
                                            class="px-[10rpx] py-[6rpx] bg-[#FF0E1D] text-[#fff] text-[20rpx] inline-block rounded-[6rpx]">
                                            已省{{ item.show_diff_price}}元</view>
                                        <text class="iconfont iconxiajiantou leading-1 text-[#FF0E1D] mt-[2rpx] ml-[14rpx]"></text>
                                    </view>
                                    <view class="flex items-baseline leading-[1]">
                                        <view
                                            class="font-bold text-[var(--price-text-color)] price-font block truncate max-w-[350rpx]">
                                            <text class="text-[24rpx] font-500 mr-[4rpx]">￥</text>
                                            <text class="text-[40rpx] font-500">{{ parseFloat(item.show_pintuan_price).toFixed(2).split('.')[0] }}</text>
                                            <text class="text-[24rpx] font-500">.{{ parseFloat(item.show_pintuan_price).toFixed(2).split('.')[1] }}</text>
                                        </view>
                                        <view class="ml-[6rpx] line-through text-[24rpx] text-[#999]">￥{{ parseFloat(item.show_original_price).toFixed(2) }}</view>
                                    </view>
                                </view>
                                <view class="px-[18rpx] h-[50rpx] text-[24rpx] text-center flex items-center mt-[10rpx] primary-btn-bg rounded-[30rpx] text-[#fff] ml-[auto]">立即开团</view>
                            </view>
                        </view>
                        </view>
                       
                    </view>
                    <mescroll-empty v-if="!list.length && !loading" :option="{ tip: '暂无商品，请看看其他商品吧！' }"></mescroll-empty>
                </view>
            </view>
        </mescroll-body>
        </view>
        
        <view @touchmove.prevent.stop>
            <u-popup :show="pintuanPopup" @open="onPopupOpen" @close="closeFn" mode="center" round="var(--rounded-big)" catchtouchmove="true" @touchmove.prevent.stop >
                <view class="w-[570rpx] px-[32rpx] popup-common center">
                    <view class="title">拼团规则</view>
                    <scroll-view :scroll-y="true" class="px-[30rpx] box-border max-h-[400rpx]">
                        <view class="text-[28rpx] leading-[40rpx] mb-[20rpx]">{{ config.pintuan_brief }}</view>
                    </scroll-view>
                    <view class="btn-wrap !pt-[40rpx]">
                        <button
                            class="primary-btn-bg w-[480rpx] h-[70rpx] text-[26rpx] leading-[70rpx] rounded-[35rpx] !text-[#fff] font-500"
                            @click="closeFn">我知道了</button>
                    </view>
                </view>
            </u-popup>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, computed, nextTick } from 'vue'
import { img, redirect, pxToRpx, handleOnloadParams } from '@/utils/common';
import { getPintuanGroupList ,getPintuanConfig} from '@/addon/pintuan/api/pintuan';
import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue'
import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue'
import useMescroll from '@/components/mescroll/hooks/useMescroll.js'
import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app'
import { topTabar } from '@/utils/topTabbar'
import useSystemStore from "@/stores/system";

const systemStore = useSystemStore()
const topStyle = computed(() => {
    let style = pxToRpx(Number(systemStore.menuButtonInfo.height) + systemStore.menuButtonInfo.top + 8) + 30 + 'rpx;'
    return style
})
const headStyle = computed(() => {
    let isHeight = systemStore.menuButtonInfo.height && systemStore.menuButtonInfo.top
    let style = isHeight ? (pxToRpx(Number(systemStore.menuButtonInfo.height)) + pxToRpx(systemStore.menuButtonInfo.top) + pxToRpx(8) + 358) + 'rpx' : '450rpx'
    return style
})

const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom)
const list = ref<Array<Object>>([]);
const loading = ref<boolean>(true);

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

/********* 自定义头部 - start ***********/
const topTabarObj = topTabar()
let param = topTabarObj.setTopTabbarParam({ title: '拼团列表' })
/********* 自定义头部 - end ***********/
let pageParameter = {};

onLoad((option: any) => {
    // #ifdef MP-WEIXIN
    // 处理小程序场景值参数
    option = handleOnloadParams(option);
    // #endif
    pageParameter = option;
})



// 获取秒杀配置信息
const config = ref<any>({})
const getPintuanConfigFn = () => {
    getPintuanConfig().then((res: any) => {
        config.value = res.data
    })
}
getPintuanConfigFn()
const pintuanPopup = ref(false)
const closeFn = () => {
    pintuanPopup.value = false
     // #ifdef H5
     document.body.style.overflow = ''
    // #endif
}
const onPopupOpen = () => {
    // H5 禁止滚动
    // #ifdef H5
    document.body.style.overflow = 'hidden'
    // #endif
}

const getPintuanGoodsFn = (mescroll: any) => {

    loading.value = true;
    let data: object = {
        page: mescroll.num,
        limit: mescroll.size,
    };
    getPintuanGroupList(data).then((res: any) => {
        let newArr = (res.data.data as Array<Object>).map((el: any) => {
            return el
        })
        //设置列表数据
        if (mescroll.num == 1) {
            list.value = []; //如果是第一页需手动制空列表
        }
        calculateHeight();
        list.value = list.value.concat(newArr);
        mescroll.endSuccess(newArr.length);
        loading.value = false;
    }).catch(() => {
        loading.value = false;
        mescroll.endErr(); // 请求失败, 结束加载
    })
}
const toLink = (item: any) => {
    redirect({ url: '/addon/pintuan/pages/goods/detail', param: { pintuan_id: item.pintuan_id} })
}

const mescrollTop = ref('')
const calculateHeight = () => {
    let isHeight = systemStore.menuButtonInfo.height && systemStore.menuButtonInfo.top
    mescrollTop.value = isHeight ? (pxToRpx(Number(systemStore.menuButtonInfo.height)) + pxToRpx(systemStore.menuButtonInfo.top) + pxToRpx(8) + 358)  + 'rpx' :  '400rpx'
}



</script>

<style lang="scss" scoped>
.avatar {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%; /* 圆形头像 */
  /* 避免被后面的头像完全覆盖，设置层级 */
  position: relative;
}
</style>
