<template>
    <view :style="warpCss" class="overflow-hidden relative" v-if="diyComponent && diyComponent.goods && Object.keys(diyComponent.goods).length">
        <view class="p-[30rpx]">
            <view class="text-[#333333] text-[30rpx] font-bold mb-[30rpx]">拼团玩法</view>
            <view>
                <view class="flex mb-[40rpx]">
                    <view class="flex flex-col items-center mr-[20rpx] relative">
                        <view class="w-[72rpx] h-[72rpx] rounded-full bg-[#FFEAE9] flex items-center justify-center">
                            <image :src="img('addon/pintuan/tgn_1.png')" class="w-[40rpx] h-[40rpx]" mode="aspectFit"/>
                        </view>
                        <view class="iconfont icona-gengduoV6xx-28 absolute text-[red] text-[44rpx] top-[70rpx] drop"></view>
                    </view>
                    <view class="flex-1">
                        <view class="text-[#333] text-sm ">1.购买商品开团</view>
                        <view class="text-[#999] text-xs mt-[10rpx]">点击右下角拼团购买,支付成功即开团</view>
                    </view>
                </view>
                <view class="flex mb-[40rpx]">
                    <view class="flex flex-col items-center mr-[20rpx] relative">
                        <view class="w-[72rpx] h-[72rpx] rounded-full bg-[#FFEAE9] flex items-center justify-center">
                            <image :src="img('addon/pintuan/tgn_2.png')" class="w-[40rpx] h-[40rpx]" mode="aspectFit"/>
                        </view>
                        <view class="iconfont icona-gengduoV6xx-28 absolute text-[red] text-[44rpx] top-[70rpx] drop"></view>
                    </view>
                    <view class="flex-1">
                        <view class="text-[#333] text-sm ">2.邀请好友参团</view>
                        <view class="text-[#999] text-xs mt-[10rpx]">邀请好友一起来参与你的拼团</view>
                    </view>
                </view>
                <view class="flex">
                    <view class="mr-[20rpx]">
                        <view class="w-[72rpx] h-[72rpx] rounded-full bg-[#FFEAE9] flex items-center justify-center">
                             <image :src="img('addon/pintuan/tgn_3.png')" class="w-[40rpx] h-[40rpx]" mode="aspectFit"/>
                        </view>
                    </view>
                    <view class="flex-1">
                        <view class="text-[#333] text-sm ">3.拼团成功</view>
                        <view class="text-[#999] text-xs mt-[10rpx]">有效期内达到拼团人数即拼团成功</view>
                    </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, nextTick } from 'vue';
import { img } from '@/utils/common';
import useDiyStore from '@/app/stores/diy';
import usePintuanGoodsDetailStore from '@/addon/pintuan/stores/goodsDetail'

const props = defineProps(['component', 'index', 'value', 'global']);
const diyStore = useDiyStore();
const emits = defineEmits(['update:componentIsShow']); //商品数据加载完成之后触发

const diyComponent = computed(() => {
    if (diyStore.mode == 'decorate') {
        const obj = {
            goods:{
                pintuan_price: '100.00',
            }
        }
        emits('update:componentIsShow', diyStore.value[props.index].isShow)
        return Object.assign({}, {diyInfo: diyStore.value[props.index]}, obj);
    } else {
        emits('update:componentIsShow', props.component.isShow)
        return Object.assign({}, { diyInfo: props.component }, usePintuanGoodsDetailStore().goodsDetail);
    }
})

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;
})

onMounted(() => {
    refresh()
    // 装修模式下刷新
    if (diyStore.mode == 'decorate') {
    } else {
    }
});


const refresh = () =>{
}
</script>
<style lang="scss" scoped>
.drop{
    transform: rotate(90deg);
}
</style>
