<template>
<!--    <x-skeleton :type="skeleton.type" :loading="skeleton.loading" :config="skeleton.config">-->
        <view :style="warpCss" class="overflow-hidden">
            <div class="diy-seckill-rubik-cube overflow-hidden">
                <view class="active-cube-wrap">
                    <view class="bd flex flex-wrap justify-between ">
                        <template v-for="(item,index) in diyComponent.list" :key="index" >
                            <view class="item px-[20rpx] py-[10rpx]" :style="swiperItemCss(item)" v-if="listGoods[index]&& listGoods[index].length>0">
                                <view class="flex items-end ">
                                    <view class="using-hidden" :style="{ color : item.titleStyle.textColor, fontWeight : diyComponent.titleFontWeight,'font-size': (diyComponent.titleFontSize * 2) + 'rpx'}" >
                                        {{ item.titleStyle.text }}
                                    </view>
                                    <view class="ml-[10rpx] mb-[5rpx] using-hidden" :style="{ color : item.subTitleStyle.textColor, fontWeight : diyComponent.titleFontWeight,'font-size': (diyComponent.subTitleFontSize * 2) + 'rpx'}">
                                        {{ item.subTitleStyle.text }}
                                    </view>
                                </view>
                                <view class="flex justify-between mt-[10rpx]">
                                    <view v-for="(subItem,goodsIndex) in listGoods[index]" :key="goodsIndex" @click="toLink(subItem)">
                                        <view class="w-[146rpx] h-[146rpx] rounded-[var(--goods-rounded-big)] overflow-hidden">
                                            <u--image width="146rpx" height="146rpx" :radius="'var(--goods-rounded-big)'" :src="img(subItem.goods_cover_thumb_small ? subItem.goods_cover_thumb_small : '')" model="aspectFill">
                                                <template #error>
                                                    <image class="rounded-[var(--goods-rounded-big)] overflow-hidden w-[146rpx] h-[146rpx]" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill" />
                                                </template>
                                            </u--image>
                                        </view>
                                        <view class="flex items-start justify-between">
                                            <view class="text-[var(--price-text-color)] flex items-baseline truncate max-w-[140rpx]">
                                                <text class="text-[16rpx] leading-[26rpx] font-500 mr-[4rpx] text-[#FF0000]" style="white-space: nowrap;">秒杀价</text>
                                                <view class="max-w-[120rpx] truncate">
                                                    <text class="text-[16rpx] leading-[26rpx] font-500 mr-[4rpx] price-font">￥</text>
                                                    <text class="text-[28rpx] leading-[40rpx] font-500 price-font">{{ parseFloat(subItem.defaultSku.seckill_price).toFixed(2).split('.')[0] }}.</text>
                                                    <text class="text-[28rpx] leading-[28rpx] font-500 price-font">{{ parseFloat(subItem.defaultSku.seckill_price).toFixed(2).split('.')[1] }}</text>
                                                </view>  
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </template>
                    </view>
                </view>
            </div>
        </view>
<!--    </x-skeleton>-->
</template>

<script setup lang="ts">
// 秒杀魔方组件
import { ref, reactive, computed, watch, onMounted, nextTick } 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 initSkeleton = () => {
    // 两列 风格
    skeleton.type = 'waterfall'
    skeleton.config = {
        headHeight: '200rpx',
        gridRows: 1
    };
}

// 组件框架样式
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 swiperItemCss = (data: any) => {
    let style = '';
    if (data.startBgColor) {
        if (data.startBgColor && data.endBgColor) style += 'background: linear-gradient(90deg, ' + data.startBgColor + ', ' + data.endBgColor + ');';
        else style = 'background-color:' + data.startBgColor + ';';
    }
    if (data.bgUrl) {
        style += 'background-image:' + 'url(' + img(data.bgUrl) + ');';
        style += 'background-size: 100%;';
        style += 'background-repeat: no-repeat;';
    }

    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;';
    return style;
}

// 商品模块的样式
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 listGoods = reactive({});
const getSeckillGoodsListFn = () => {
    skeleton.loading = false;
    diyComponent.value?.list.forEach((item,index) => {
        const data = {
            num: 2,
            time_id: item.source == 'time' ? item.timeIds : '',
            goods_id: item.source == 'custom' ? item.goodsIds : '',
        };
        getSeckillDiyGoods(data).then((res) => {
            listGoods[index] = res.data;
        }).catch((error) => {
        });

    });
};
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} })
}
onMounted(() => {
    refresh();
    // 装修模式下刷新
    if (diyStore.mode == 'decorate') {
        watch(
            () => diyComponent.value,
            (newValue, oldValue) => {
                if (newValue && newValue.componentName == 'SeckillRubikCube') {
                    nextTick(() => {
                    })
                }
            }
        )
    } else {
        watch(
            () => diyComponent.value,
            (newValue, oldValue) => {
                refresh();
            },
            { deep: true }
        )
    }
});
watch(
    () => diyComponent.value,
    (newValue, oldValue) => {
        refresh();
    },
    { deep: true }
)
const refresh = () => {
    // 装修模式下设置默认图
    if (diyStore.mode == 'decorate') {
        nextTick(() => {
            const fakeGoods = {
                goods_cover_thumb_small: '',
                defaultSku:{
                    seckill_price: '9.9'
                }
            };
            diyComponent.value?.list.forEach((item,index) => {
                const obj = [];
                obj.push(fakeGoods);
                obj.push(fakeGoods);
                listGoods[index] = obj;
            });
        })
    } else {
        initSkeleton();
        getSeckillGoodsListFn()
    }
}

</script>
<style lang="scss" scoped>
.active-cube-wrap {
    .bd {
        .item {
            width: calc(43%);
            // margin-bottom:15rpx;
            image {
                width: 100%;
                height: 100%;
            }

        }
    }
}
</style>
