<template>
    <view :style="warpCss" class="overflow-hidden relative" v-if="diyComponent && diyComponent.goods && Object.keys(diyComponent.goods).length">
        <view class="py-[30rpx]">
            <view class="flex items-center justify-between mx-[22rpx]">
                <view class="text-[#333333] text-[30rpx]">拼团玩法</view>
            </view>
            <view class="flex items-center justify-between mx-[22rpx] mt-[30rpx]">
                <!-- 开团/参团 -->
                <view class="flex flex-col items-center flex-1">
                    <view
                        class="relative w-[80rpx] h-[80rpx] flex items-center justify-center mb-[16rpx] bg-[#FFEBEB] rounded-[50%]">
                        <image :src="img('addon/pintuan/tg2.png')" mode="scaleToFill"
                            class="w-[40rpx] h-[40rpx]" />
                    </view>
                    <text class="text-[#333333] text-[24rpx]">开团/参团</text>
                </view>

                <!-- 箭头 -->
                <view class="flex items-center justify-center w-[60rpx] pb-[24rpx]">
                    <text class="iconfont iconyouV6xx1 text-[#FFEBEB] text-[28rpx]"></text>
                </view>

                <!-- 邀请好友参团 -->
                <view class="flex flex-col items-center flex-1">
                    <view
                        class="w-[80rpx] h-[80rpx] flex items-center justify-center mb-[16rpx] bg-[#FFEBEB] rounded-[50%]">
                        <image :src="img('addon/pintuan/wd2.png')" mode="scaleToFill"
                            class="w-[40rpx] h-[40rpx]" />
                    </view>
                    <text class="text-[#333333] text-[24rpx]">邀请好友参团</text>
                </view>

                <!-- 箭头 -->
                <view class="flex items-center justify-center w-[60rpx] pb-[24rpx]">
                    <text class="iconfont iconyouV6xx1 text-[#FFEBEB] text-[28rpx]"></text>
                </view>

                <!-- 成团发货 -->
                <view class="flex flex-col items-center flex-1">
                    <view
                        class="w-[80rpx] h-[80rpx] flex items-center justify-center mb-[16rpx] bg-[#FFEBEB] rounded-[50%]">
                        <image :src="img('addon/pintuan/dsh2.png')" mode="scaleToFill"
                            class="w-[40rpx] h-[40rpx]" />
                    </view>
                    <text class="text-[#333333] text-[24rpx]">成团发货</text>
                </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>
</style>
