<template>
    <view :style="warpCss" class="overflow-hidden" v-if="diyComponent && diyComponent.goods && Object.keys(diyComponent.goods).length">
        <view class="card-template overflow-hidden">
            <view class="title">商品详情</view>
            <view class="u-content">
                <u-parse :content="diyComponent.goods.desc" :tagStyle="{img: 'vertical-align: top;width:100%;',p:'overflow: hidden;word-break:break-word;' }"></u-parse>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { 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']);
const diyStore = useDiyStore();
const emits = defineEmits(['update:componentIsShow']); //商品数据加载完成之后触发
const diyComponent = computed(() => {
    if (diyStore.mode == 'decorate') {
        const obj = {
            goods: {
                desc: '这里展示商品详情内容'
            }
        }
        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(() => {
    // 装修模式下刷新
    if (diyStore.mode == 'decorate') {

    } else {
        
    }
});
</script>
<style lang="scss" scoped>
.card-template{
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 30rpx 0 0;
    .title{
       padding: 0 24rpx; 
    }
}
</style>
