<template>
<!--    <x-skeleton :type="skeleton.type" :loading="skeleton.loading" :config="skeleton.config">-->
        <view :style="warpCss" v-if="list.length>0" class="overflow-hidden">
            <view class="diy-seckill-special-offer p-[10rpx] mx-[20rpx] flex">
                <view class="min-w-[150rpx] py-[35rpx] flex-col items-center justify-center flex">
                    <view class="w-[80rpx] text-[40rpx] font-700 mb-[20rpx]" :style="{ color : diyComponent.titleStyle.color}">
                        {{ diyComponent.titleStyle.text }}
                    </view>
                    <view :style="goodsBtnCss" @click="diyStore.toRedirect(diyComponent.btnStyle.link)" class="flex items-center justify-between px-[10rpx] h-[40rpx]">
                        <text class="px-[10rpx] text-[24rpx]" style="white-space:nowrap">{{ diyComponent.btnStyle.text }}</text>
                        <text class="text-[22rpx] iconfont iconxiangyoujiantou"></text>
                    </view>
                </view>
                <scroll-view :scroll-x="true" class="flex-1" scroll-with-animation enable-flex>
                    <view class="flex p-[10rpx] pr-[40rpx] items-center">
                        <view v-for="(item,index) in list" :key="index" class="ml-[10rpx] flex-shrink-0">
                            <view class="bg-[#fff] p-[10rpx] flex flex-col items-center mr-[10rpx]" :style="itemCss" @click="toLink(item)">
                                <view class="w-[128rpx] h-[128rpx] overflow-hidden"  :style="imageRounded.style" >
                                    <u--image width="128rpx" height="128rpx" :radius="imageRounded.val" :src="img(item.goods_cover_thumb_small ? item.goods_cover_thumb_small : '')" model="aspectFill">
                                        <template #error>
                                            <image class=" w-[128rpx] h-[128rpx]" :style="imageRounded.style"  :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill" />
                                        </template>
                                    </u--image>
                                </view>
                                <view class="mt-[10rpx] flex flex-col justify-between h-[34rpx] relative z-5">
                                    <view class="flex items-start justify-between  h-[34rpx]">
                                        <view class="text-[#fff] flex items-baseline h-[34rpx] bg-[#FF2B2A] truncate rounded-[20rpx] px-[20rpx]">
                                            <text class="text-[16rpx] !font-400 !text-[#fff] leading-[16rpx] price-font mr-[4rpx]">￥</text>
                                            <text class="text-[26rpx] !font-400 !text-[#fff] leading-[32rpx] price-font ">{{ parseFloat(item.defaultSku.seckill_price).toFixed(2).split('.')[0] }}.</text>
                                            <text class="text-[26rpx] !font-400 !text-[#fff] leading-[32rpx] price-font">{{ parseFloat(item.defaultSku.seckill_price).toFixed(2).split('.')[1] }}</text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <!-- 添加一个空的占位元素确保最后一个商品完全显示 -->
                        <view class="w-[130rpx] flex-shrink-0 opacity-0">&nbsp;</view>
                    </view>
                </scroll-view>
            </view>
        </view>
<!--    </x-skeleton>-->
</template>

<script setup lang="ts">
// 特惠秒杀组件
import { ref, reactive, computed, watch, onMounted, nextTick, getCurrentInstance } from 'vue';
import { redirect, img } from '@/utils/common';
import useDiyStore from '@/app/stores/diy';
import { getSeckillDiyGoods } from '@/addon/seckill/api/goods'
const props = defineProps(['component', 'index', 'value']);
const diyStore = useDiyStore();

const diyComponent = computed(() => {
    if (props.value) {
        return props.value;
    } else if (diyStore.mode == 'decorate') {
        return diyStore.value[props.index];
    } else {
        return props.component;
    }
})

// 骨架屏
const skeleton = reactive({
    type: '',
    loading: diyStore.mode == 'decorate' ? false : true,
    config: {}
})

const instance = getCurrentInstance();
const height = ref(0)

// 初始化骨架屏
const initSkeleton = () => {
    // 横向滑动 风格
    skeleton.type = 'waterfall'
    skeleton.config = {
        gridRows: 1,
        gridColumns: 3,
        headHeight: '200rpx',
        textRows: 0
    };
}

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

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

    if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
    if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
    if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
    if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
    return style;
})
// 商品主图圆角
const imageRounded = computed(() => {
    const obj = {
        val: '',
        style: ''
    };
    if (diyComponent.value.imgElementRounded) {
        obj.val = diyComponent.value.imgElementRounded * 2 + 'rpx';
        obj.style += 'border-radius:' + diyComponent.value.imgElementRounded * 2 + 'rpx;';
    }
    return obj;
})
// 商品模块的样式
const itemCss = computed(() => {
    let style = '';
    if (diyComponent.value.elementBgColor) style += 'background-color:' + diyComponent.value.elementBgColor + ';';
    if (diyComponent.value.topElementRounded) style += 'border-top-left-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
    if (diyComponent.value.topElementRounded) style += 'border-top-right-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
    if (diyComponent.value.bottomElementRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
    if (diyComponent.value.bottomElementRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
    if (diyComponent.value.style == 'style-2') {
        if (diyComponent.value.margin && diyComponent.value.margin.both) style += 'width: calc((100vw - ' + (diyComponent.value.margin.both * 4) + 'rpx - 20rpx) / 2);'
        else style += 'width: calc((100vw - 20rpx) / 2 );'
    }
    return style;
})

// 购买按钮样式
const goodsBtnCss = computed(() => {
    let style = '';
    if (diyComponent.value.btnStyle.aroundRadius) style += 'border-radius:' + diyComponent.value.btnStyle.aroundRadius * 2 + 'rpx;';
    if (diyComponent.value.btnStyle.startBgColor && diyComponent.value.btnStyle.endBgColor) {
        style += `background:linear-gradient(${ diyComponent.value.btnStyle.startBgColor },${ diyComponent.value.btnStyle.endBgColor });`;
    } else {
        style += 'background-color:' + (diyComponent.value.btnStyle.startBgColor || diyComponent.value.btnStyle.endBgColor) + ';';
    }
    if (diyComponent.value.btnStyle.color) style += 'color:' + diyComponent.value.btnStyle.color + ';';
    return style;
})
const toLink = (item: any) => {
    if (diyStore.mode == 'decorate') return;
    redirect({ url: '/addon/seckill/pages/goods/detail', param: { sku_id: item.defaultSku.sku_id,seckill_id: item.seckill_id} })
}
const list = ref<Array<Object>>([]);
const getSeckillTimeGoodsFn = ()=>{
    getSeckillDiyGoods({
        num: diyComponent.value.source == 'all'? diyComponent.value.num : '',
        time_id: diyComponent.value.source == 'time' ? diyComponent.value.timeIds : '',
        goods_id: diyComponent.value.source == 'custom' ? diyComponent.value.goodsIds : '',
    }).then((res: any) => {
        skeleton.loading = false;
        list.value = res.data
        // 如果没有数据，整个组件都要隐藏
        if(list.value.length == 0) diyComponent.value.componentIsShow = false
    })
}

onMounted(() => {
    refresh();
    // 装修模式下刷新
    if (diyStore.mode == 'decorate') {
        watch(
            () => diyComponent.value,
            (newValue, oldValue) => {
                if (newValue && newValue.componentName == 'SeckillSpecialOffer') {
                    nextTick(() => {
                        const query = uni.createSelectorQuery().in(instance);
                        query.select('.diy-seckill-special-offer').boundingClientRect((data: any) => {
                            if (data) height.value = data.height;
                        }).exec();
                    })
                }
            }
        )
    } else {
        watch(
            () => diyComponent.value,
            (newValue, oldValue) => {
                refresh();
            },
            { deep: true }
        )
    }
});

const refresh = () => {
    // 装修模式下设置默认图
    if (diyStore.mode == 'decorate') {
        nextTick(() => {
            let obj = {
                goods_cover_thumb_small:"",
                name:"商品名称",
                defaultSku:{
                    price:"100.00",
                    seckill_price:"10.00",
                },
                status:2,
                order_num:"3",
                sum_stock:'100'
            };
            list.value.push(obj);
            list.value.push(obj);
            list.value.push(obj);
        })
    } else {
        initSkeleton();
        getSeckillTimeGoodsFn()
    }
}

</script>
<style lang="scss" scoped>
</style>
