<template>
    <!-- 商品服务 -->
    <view :style="warpCss" class="overflow-hidden relative" v-if="diyComponent && diyComponent.goods && Object.keys(diyComponent.goods).length">
        <view class="card-template" v-if="isShowTemplate">
            <view @click="buyFn" class="card-template-item" v-if="diyComponent.spec_list && diyComponent.spec_list.length&&serviceConfig.includes('spec_select')">

                <text class="text-[#333] text-[26rpx] leading-[30rpx] font-400 shrink-0 mr-[20rpx]">已选</text>
                <view class="ml-auto text-right truncate flex-1 text-[#343434] text-[26rpx] leading-[30rpx] font-400">{{ diyComponent.defaultSku.sku_spec_format }}</view>
                <text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light6)] ml-[8rpx]"></text>
            </view> 
            <view @click="remarkDataShow = true" class="card-template-item" v-if="diyComponent.desc && serviceConfig.includes('instructions')">
                <text class="text-[#333] text-[26rpx] leading-[30rpx] font-400 shrink-0 mr-[20rpx]">购买须知</text>
                <view class="ml-auto text-right truncate flex-1 text-[#343434] text-[26rpx] leading-[30rpx] font-400">查看</view>
                <text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light6)] ml-[8rpx]"></text>
            </view>
            <view class="card-template-item" v-if="diyComponent.refund_type_name && serviceConfig.includes('guarantee')">
                <text class="text-[#333] text-[26rpx] leading-[30rpx] font-400 shrink-0 mr-[20rpx]">服务保障</text>
                <view class="ml-auto text-right truncate flex-1 text-[#343434] text-[26rpx] leading-[30rpx] font-400">{{ diyComponent.refund_type_name }}</view>
            </view>
            <view class="card-template-item" v-if="diyComponent.expire_desc">
                <text class="text-[#333] text-[26rpx] leading-[30rpx] font-400 shrink-0 mr-[20rpx]">核销码</text>
                <view class="ml-auto text-right truncate flex-1 text-[#343434] text-[26rpx] leading-[30rpx] font-400">{{ diyComponent.expire_desc }}</view>
            </view>
        </view>
         <!-- 购买须知 -->
         <view @touchmove.prevent.stop>
            <u-popup class="popup-type" :show="remarkDataShow" @close="remarkDataShow = false" overlayOpacity="0.8">
                <view class="min-h-[480rpx] popup-common" @touchmove.prevent.stop>
                    <view class="title">购买须知</view>
                    <scroll-view class="h-[520rpx] px-[32rpx] box-border" scroll-y="true">
                        <u-parse :content="diyComponent.desc" :tagStyle="{img: 'vertical-align: top;width:100%;',p:'overflow: hidden;word-break:break-word;' }"></u-parse>
                    </scroll-view>
                </view>
            </u-popup>
        </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 remarkDataShow = ref(false); //购买须知

const diyComponent = computed(() => {
    if (diyStore.mode == 'decorate') {
        const obj = {
            goods:{
                spec_list: ['红色', '小'],
            },
            desc: '购买须知',
            refund_type_name: '随时退', 
            expire_desc: '购买之后10天有效'
        }
        return Object.assign({}, obj, diyStore.value[props.index]);
    } else {
        return Object.assign({}, props.component, usePintuanGoodsDetailStore().goodsDetail);
    }
})

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 isShowTemplate = ref(false);
const isGoodsPropertyTemp = () => {
    isShowTemplate.value = false;
    if (
        (diyComponent.value.spec_list && diyComponent.value.spec_list.length && serviceConfig.value.includes('spec_select')) ||
        (diyComponent.value.desc && serviceConfig.value.includes('instructions')) ||
        (diyComponent.value.refund_type_name && serviceConfig.value.includes('guarantee')) ||
        (diyComponent.value.expire_desc) ||
        diyStore.mode == 'decorate'
        ) {
        isShowTemplate.value = true;
    }
    emits('update:componentIsShow', isShowTemplate.value)
}


const buyFn = (type: any) => {
    usePintuanGoodsDetailStore().setGoodsDetail({isOpenSkuBuy: true});
}

onMounted(() => {
    refresh()
    // 装修模式下刷新
    if (diyStore.mode == 'decorate') {
        isGoodsPropertyTemp()
    } else {
        watch(
            () => diyComponent.value,
            (newValue, oldValue) => {
                if (newValue && newValue.componentName == 'PintuanGoodsDetailPurchaseService') {
                    isGoodsPropertyTemp()
                }
            },
            { immediate: true }
        )
    }
});


const serviceConfig = ref([])
const refresh = () =>{
    serviceConfig.value = diyComponent.value?.serviceConfig;
}
</script>
<style lang="scss" scoped>
.card-template{
    background-color: transparent !important;
    border-radius: 0 !important;
}
</style>
