<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 v-if="diyStore.mode == 'decorate'">
                <view class="u-content">
                    <view class="service1">原厂正品保证承诺：</view>
                    <view>(1)...</view>
                </view>
            </view>
            <view class="u-content" v-else>
                <view class="service1">原厂正品保证承诺：</view>
                <view>(1)所有商品均为符合国家有关商品质量的技术标准、服务标准、环保标准的原厂正品。</view>
                <view>(2)所有商品保证是全新的货物，且来源于中华人民共和国或与中华人民共和国有正常贸易往来的国家或地区。</view>
                <view>(3)所有商品均为自营，不涉及任何第三方店铺，充分保证产品来源，保证质量。</view>
                <view>(4)所有商品均为原厂正品，如有假货，假一罚十。</view>
                <view>(5)所有产品均严格按照国家三包标准执行。</view>
                <view>(6)保证所售商品开具机打发票或电子发票。</view>
                <view class="service1">厂家服务：</view>
                <view>
                    本商品质保周期均为厂商对外公布的质保期或优易365对客户承诺的质保期为准。在此时间范围内可提交维修申请，具体请以厂家服务为准。
                    如因质量问题或故障，凭厂商维修中心或特约维修点的质量检测证明，享受7日内退货，15日内换货，15日以上在质保期内享受免费保修等三包服务！
                </view>
                <view>全国统一售后及服务电话：400-111-0027</view>
                <view>(注:如优易365在商品介绍中有售后保障的说明,则此商品按照说明执行售后保障服务。)</view>
                <view class="service1">服务承诺：</view>
                <view>平台销售并发货的商品，均由平台提供发票和相应的售后服务。请您放心购买！</view>
                <view>优易365确保客户收到的货物与商城图片、产地、附件说明完全一致。均为原厂正货！并且保证与当时市场上同样主流新品一致。</view>
                <view class="service1">无忧退货：</view>
                <view>
                    客户购买商品7日内（含7日，自客户收到商品之日起计算），在保证商品完好的前提下，可无理由退货。（部分商品除外，详情请见各商品细则）
                </view>
                <view>• 购买运费如何收取？</view>
                <view class="service2">
                    单笔订单金额(不含运费)满88元免邮费；不满88元，每单收取10元运费。（港澳台地区需满500元免邮费；不满500元，每单收取30元运费)
                </view>
                <view>• 使用什么快递发货?</view>
                <view class="service2">默认使用顺丰快递发货(个别商品使用其他快递）</view>
                <view class="service2">配送范围覆盖全国大部分地区(港澳台地区除外）。</view>
                <view>• 如何申请退货?</view>
                <view class="service2">1.自收到商品之日起30日内，顾客可申请无忧退货，退款将原路返还，不同的银行处理时间不同，预计1-5个工作日到账；</view>
                <view class="service2">2.内裤和食品等特殊商品无质量问题不支持退货；</view>
                <view>3.退货流程：</view>
                <view class="service2">确认收货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成；</view>
                <view>
                    4.因优品汇产生的退货，如质量问题，退货邮费由优品汇承担，退款完成后会以现金券的形式报销。因客户个人原因产生的退货，购买和寄回运费由客户个人承担。
                </view>
            </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 useGoodsDetailStore from '@/addon/shop/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: {
                goods_desc: '这里展示商品详情内容'
            }
        }
        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;
})

onMounted(() => {
    // 装修模式下刷新
    if (diyStore.mode == 'decorate') {
        watch(
            () => diyComponent.value,
            (newValue, oldValue) => {
                if (newValue && newValue.componentName == 'ShopGoodsDetailDesc') {
                    nextTick(() => { })
                }
            }
        )
    } else {
        watch(
            () => diyComponent.value,
            (newValue, oldValue) => {
                if (newValue && newValue.componentName == 'ShopGoodsDetailDesc') {
                    if (!diyComponent.value.isShow) {
                        emits('update:componentIsShow', false)
                    } else {
                        emits('update:componentIsShow', true)
                    }
                }
            },
            { immediate: true }
        )
    }
});
</script>
<style lang="scss" scoped>
.card-template {
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 30rpx 0 0;

    .title {
        padding: 0 24rpx;
    }

    .u-content {
        padding: 0 24rpx;

        view {
            margin-bottom: 10rpx;
            font-size: 28rpx;
        }

        .service1 {
            font-weight: 600;
        }

        .service2 {
            color: #999999;
        }
    }
}
</style>
