<template>
    <!-- 商品服务 -->
    <!--  -->
    <view :style="warpCss" class="overflow-hidden relative" v-if="
        diyComponent &&
        diyComponent.goods &&
        Object.keys(diyComponent.goods).length
    ">
        <view class="card-template" v-if="serviceConfig && serviceConfig.length && isShowTemplate">
            <view v-if=" serviceConfig.includes('goods_service')" class="card-template-item">
                <text class="text-[#333] text-[26rpx] leading-[30rpx] font-400 shrink-0">商品编号</text>
                <view class="diyComponenttext-[#343434] text-[26rpx] leading-[30rpx] font-400 truncate ml-auto">
                    {{ diyComponent.productNo }}</view>
            </view>
            <view class="card-template-item"
                v-if=" serviceConfig.includes('delivery_info')">
                <text class="text-[#333] text-[26rpx] leading-[30rpx] font-400 shrink-0">规格/型号</text>
                <view class="ml-auto flex items-center text-[#343434] text-[26rpx] leading-[30rpx] font-400">
                    {{ diyComponent.specificationsCode }}</view>
            </view>
            <view v-if="serviceConfig.includes('coupons')"
				class="card-template-item">
				<text class="text-[#333] text-[26rpx] leading-[30rpx] font-400 shrink-0 mr-[20rpx]">UPC(69)条码</text>
				<view class="ml-auto flex items-center text-[#343434] text-[26rpx] leading-[30rpx] font-400">
                    {{ diyComponent.upcBarcode || '-' }}</view>
			</view>
            <view v-if="serviceConfig.includes('activity')"
				class="card-template-item">
				<text class="text-[#333] text-[26rpx] leading-[30rpx] font-400 shrink-0 mr-[20rpx]">供货时间</text>
				<view class="ml-auto flex items-center text-[#343434] text-[26rpx] leading-[30rpx] font-400">
                    {{ diyComponent.deliveryTime || '-' }}</view>
			</view>
        </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 useGoodsDetailStore from "@/addon/shop/stores/goodsDetail";

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

onMounted(() => {
    refresh();
    isGoodsPropertyTemp();
    // 装修模式下刷新
    if (diyStore.mode == "decorate") {
        watch(
            () => diyComponent.value,
            (newValue, oldValue) => {
                if (
                    newValue &&
                    newValue.componentName == "ShopGoodsDetailPurchaseService"
                ) {
                    nextTick(() => {
                        refresh();
                    });
                }
            }
        );
    } else {
        watch(
            () => diyComponent.value,
            (newValue, oldValue) => {
                if (
                    newValue &&
                    newValue.componentName == "ShopGoodsDetailPurchaseService"
                ) {
                    emits("update:componentIsShow", isShowTemplate.value);
                }
            },
            { immediate: true }
        );
    }
});

const diyComponent = computed(() => {
    if (diyStore.mode == "decorate") {
        const obj = {
            service: [{ service_name: "24小时配送" }],
            goods: {
                delivery_type_list: [
                    {
                        name: "物流配送",
                    },
                ],
            },
            goodsSpec: ["红色", "小"],
            sku_spec_format: "红色,小",
            productNo:'000051164',
            specificationsCode:'柯尼卡美能达TN328C',
            upcBarcode:'xxxxxxxxx',
            deliveryTime:'2026-01-01'
        };
        return Object.assign({}, obj, diyStore.value[props.index]);
    } else {
        return Object.assign(
            {},
            props.component,
            useGoodsDetailStore().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.productNo &&
            serviceConfig.value.includes("goods_service")) ||
        (diyComponent.value.goodsSpec &&
            diyComponent.value.goodsSpec.length &&
            serviceConfig.value.includes("spec_select")) ||
        (diyComponent.value.goods.goods_type == "real" &&
            diyComponent.value.goods.delivery_type_list &&
            diyComponent.value.goods.delivery_type_list.length &&
            serviceConfig.value.includes("delivery_info"))
    ) {
        isShowTemplate.value = true;
    }
    emits("update:componentIsShow", isShowTemplate.value);
};

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