<template>
    <view :style="warpCss" class="overflow-hidden pt-[18rpx] pb-[20rpx] px-[24rpx]" v-if="goodsList.length">
        <!-- 头部风格一 -->
        <view class="flex justify-between items-center mb-[16rpx]" v-if="diyComponent.headStyle.value == 'style-1'">
            <view class="flex items-center justify-start">
                <template v-if="diyComponent.titleStyle.way=='text'">
                    <view class="flex items-center">
                        <view @click="diyStore.toRedirect(diyComponent.titleStyle.link)" :style="{ color : diyComponent.titleStyle.textColor, fontWeight : diyComponent.titleStyle.fontWeight,'font-size': (diyComponent.titleStyle.fontSize * 2) + 'rpx',whiteSpace: 'nowrap'}">
                            {{ diyComponent.titleStyle.text }}
                        </view>
                        <view class="ml-[10rpx] using-hidden" :style="{ color : diyComponent.subTitleStyle.textColor, fontWeight : diyComponent.subTitleStyle.fontWeight,'font-size': (diyComponent.subTitleStyle.fontSize * 2) + 'rpx'}">
                            {{ diyComponent.subTitleStyle.text }}
                        </view>
                    </view>
                </template>
                <template v-if="diyComponent.titleStyle.way=='img'">
                    <view class="flex items-center">
                        <view class="flex max-w-[200rpx] items-center" v-if="diyComponent.titleStyle.imgUrl" @click="diyStore.toRedirect(diyComponent.titleStyle.link)">
                            <image :src="img(diyComponent.titleStyle.imgUrl)" class="h-[30rpx] max-w-[100%]" mode="heightFix" />
                        </view>
                        <view class="ml-[10rpx] using-hidden" :style="{ color : diyComponent.subTitleStyle.textColor, fontWeight : diyComponent.subTitleStyle.fontWeight,'font-size': (diyComponent.subTitleStyle.fontSize * 2) + 'rpx'}">
                            {{ diyComponent.subTitleStyle.text }}
                        </view>
                    </view>

                </template>
            </view>
            <view class="flex-1 flex justify-end items-center">
                <view class="flex items-center">
                    <view class="flex items-center" @click="diyStore.toRedirect(diyComponent.moreStyle.link)" :style="{ color : diyComponent.moreStyle.textColor,'font-size': (diyComponent.moreStyle.fontSize * 2) + 'rpx'}">
                        <text> {{ diyComponent.moreStyle.text }}</text>
                        <text class="text-[26rpx] ml-[6rpx] iconfont iconjiantouloukong-you"></text>
                    </view>
                </view>
            </view>
        </view>
        <!-- 头部风格二 -->
        <view class="flex justify-between items-center h-[66rpx] mb-[18rpx]" v-if="diyComponent.headStyle.value == 'style-2'">
            <view class="flex items-center justify-start">
                <template v-if="diyComponent.titleStyle.way=='text'">
                    <view class="flex items-center">
                        <view @click="diyStore.toRedirect(diyComponent.titleStyle.link)" :style="{ color : diyComponent.titleStyle.textColor, fontWeight : diyComponent.titleStyle.fontWeight,'font-size': (diyComponent.titleStyle.fontSize * 2) + 'rpx','font-style': diyComponent.titleStyle.fontStyle,whiteSpace: 'nowrap', fontStyle: diyComponent.titleStyle.fontStyle}">
                            {{ diyComponent.titleStyle.text }}
                        </view>
                        <view class="ml-[10rpx] using-hidden" :style="{ color : diyComponent.subTitleStyle.textColor, fontWeight : diyComponent.subTitleStyle.fontWeight,'font-size': (diyComponent.subTitleStyle.fontSize * 2) + 'rpx'}">
                            {{ diyComponent.subTitleStyle.text }}
                        </view>
                    </view>
                </template>
                <template v-if="diyComponent.titleStyle.way=='img'">
                    <view class="flex items-center">
                        <view class="flex items-center max-w-[200rpx]" v-if="diyComponent.titleStyle.imgUrl" @click="diyStore.toRedirect(diyComponent.titleStyle.link)">
                            <image :src="img(diyComponent.titleStyle.imgUrl)" class="h-[30rpx] max-w-[100%]" mode="heightFix" />
                        </view>
                        <view class="ml-[10rpx] using-hidden" :style="{ color : diyComponent.subTitleStyle.textColor, fontWeight : diyComponent.subTitleStyle.fontWeight,'font-size': (diyComponent.subTitleStyle.fontSize * 2) + 'rpx'}">
                            {{ diyComponent.subTitleStyle.text }}
                        </view>
                    </view>

                </template>
            </view>
            <view class="flex-1 flex justify-end items-center">
                <view class="flex items-center">
                    <view class="flex items-center" @click="diyStore.toRedirect(diyComponent.moreStyle.link)" :style="{ color : diyComponent.moreStyle.textColor,'font-size': (diyComponent.moreStyle.fontSize * 2) + 'rpx'}">
                        <text> {{ diyComponent.moreStyle.text }}</text>
                        <text class="text-[22rpx] iconfont iconxiangyoujiantou"></text>
                    </view>
                </view>
            </view>
        </view>
        <!-- 内容风格一 -->
        <scroll-view scroll-x="true" v-if="diyComponent.goodsStyle.value == 'style-1' && goodsList.length">
            <view class="whitespace-nowrap">
                <view v-for="(item,index) in goodsList" :key="index" class="bg-[#fff] box-border inline-flex flex-col items-center relative rounded-[32rpx] pt-[16rpx] w-[210rpx] box-border overflow-hidden" :class="{'ml-[18rpx]': index != 0}" @click="toDetail(item)" :style="goodsItemCss">
                    <view class="w-[160rpx] h-[160rpx] overflow-hidden" :style="goodsImgCss">
                        <u--image width="160rpx" height="160rpx" :src="img(item.goods.cover_thumb_mid || '')"  model="aspectFill">
                            <template #error>
                                <image class="w-[160rpx] h-[160rpx] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill" />
                            </template>
                        </u--image>
                    </view>
                    <view class="flex items-center mt-[10rpx]">
                        <image :src="img('/addon/pintuan/diy/pintuan_limit/icon_one.png')" class="w-[18rpx] h-[20rpx]" mode="aspectFit" />
                        <text class="ml-[4rpx] text-[24rpx] text-[#FF000D]">补贴{{ subsidyFn(item) }}元</text>
                    </view>
                    <view class="flex items-center w-[100%] bg-[#FFE2E2] h-[48rpx] mt-[10rpx] rounded-[16rpx]">
                        <view
                        class="font-bold text-[var(--price-text-color)] price-font block truncate max-w-[128rpx] flex-1 text-center -mr-[5rpx]">
                            <text class="text-[20rpx] font-500 mr-[4rpx]">￥</text>
                            <text class="text-[32rpx] font-500">{{ parseFloat(item.goods.show_price).toFixed(2) }}</text>
                        </view>
                        <image :src="img('/addon/pintuan/diy/pintuan_limit/btn_one.png')" class="max-w-[82rpx] h-[100%]" mode="heightFix" />
                    </view>
                </view>
            </view>
        </scroll-view>
        <!-- 内容风格二 -->
        <scroll-view scroll-x="true" v-if="diyComponent.goodsStyle.value == 'style-2' && goodsList.length">
            <view class="whitespace-nowrap flex gap-x-[22rpx]">
                <view v-for="(item,index) in goodsList" :key="index" class="box-border inline-flex relative" @click="toDetail(item)">
                    <view class="relative pb-[16rpx]">
                        <view class="z-10 relative overflow-hidden rounded-[20rpx] bg-[#fff] w-[140rpx] h-[140rpx]" :style="goodsImgCss">
                            <u--image width="140rpx" height="140rpx" class="relative z-10" :src="img(item.goods.cover_thumb_mid || '')"  model="aspectFill">
                                <template #error>
                                    <image class="w-[140rpx] h-[140rpx] relative z-10" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill" />
                                </template>
                            </u--image>
                            <text class="absolute z-10 truncate text-center left-0 right-0 bottom-0 z-[10] bg-[red] text-[18rpx] px-[6rpx] py-[6rpx] text-[#fff]">已省{{subsidyFn(item)}}元</text>
                        </view>
                        <text class="goods-decoration-two"></text>
                    </view>
                    <view class="ml-[10rpx] flex flex-col pb-[16rpx]">
                        <view class="text-[28rpx] w-[168rpx] leading-[40rpx] text-[#303133] overflow-ellipsis truncate mb-[10rpx]">{{ item.goods.title }}</view>
                        <view v-if="item.goods.sub_title" class="text-[24rpx] w-[168rpx] leading-[40rpx] text-[#999999] overflow-ellipsis truncate leading-[1] mb-[10rpx]">{{ item.goods.sub_title }}</view>
                        <view class="flex items-center flex-wrap leading-[1] mt-auto">
                            <view
                                class="font-bold text-[var(--price-text-color)] pb-[2rpx] price-font block truncate max-w-[350rpx] mr-[6rpx]">
                                <text class="text-[20rpx] font-500 mr-[4rpx]">￥</text>
                                <text class="text-[32rpx] font-500">{{ parseFloat(item.goods.show_price).toFixed(2) }}</text>
                            </view>
                            <view class="border-[2rpx] border-solid border-[red] rounded-[6rpx] text-[22rpx] text-[red] py-[2rpx] px-[4rpx] leading-[1] flex items-center justify-center">{{getDiscount(item)}}折</view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-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, reactive, computed, watch, onMounted, nextTick } from 'vue';
import { redirect, img } from '@/utils/common';
import useDiyStore from '@/app/stores/diy';
 import { getPintuanComponentsGoods } from '@/addon/pintuan/api/pintuan';
 import usePintuanIndexStore from '@/addon/pintuan/stores/index';

const props = defineProps(['component', 'index', 'value']);
const diyStore = useDiyStore();
const goodsList = ref([]) // 商品列表
const pintuanIndexStore = usePintuanIndexStore()

const diyComponent = computed(() => {
    if (props.value) {
        return props.value;
    } else if (diyStore.mode == 'decorate') {
        return diyStore.value[props.index];
    } else {
        return props.component;
    }
})

// 组件框架样式
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 goodsItemCss = computed(() => {
    let style = ''
    style += 'background-color:' + diyComponent.value.goodsStyle.bgColor + ';';
    style += 'border-radius:' + diyComponent.value.goodsStyle.rounded*2 + 'rpx;';
    return style
})

const goodsImgCss = computed(() => {
    let style = ''
    style += 'border-radius:' + diyComponent.value.goodsStyle.imgRounded*2 + 'rpx;';
    return style
})

const getDiscount = (item: any) => {
    let discount = (item.goods.show_price / item.goods.original_price * 10).toFixed(1);
    return Number(discount)
}

const subsidyFn = (data: any) =>{
    let price = Number( data.goods.original_price - data.goods.show_price).toFixed(2)
    return Number(price)
}

const loading = ref(false)
const refreshGoodsList = () => {
    loading.value = true
    let data = {
        num: diyComponent.value.goodsStyle.source == 'all' ? diyComponent.value.goodsStyle.num : '',
        pintuan_ids: diyComponent.value.goodsStyle.source == 'custom' ? diyComponent.value.goodsStyle.pintuanIds : ''
    }
    getPintuanComponentsGoods(data).then((res) => {
        goodsList.value = res.data
        setTimeout(() => {
            pintuanIndexStore.setPintuanComponentsLoad('pintuanLimit')
        }, 100);
        loading.value = false
    });
}


onMounted(() => {
    refresh();
    // 装修模式下刷新
    if (diyStore.mode == 'decorate') {
        goodsList.value = [
            {
                goods: {
                    cover_thumb_mid: '',
                    title: '商品名称',
                    sub_title: '副标题名称',
                    original_price: 500,
                    show_price: 200
                }
            },
            {
                goods: {
                    cover_thumb_mid: '',
                    title: '商品名称',
                    sub_title: '副标题名称',
                    original_price: 500,
                    show_price: 200
                }
            },
            {
                goods: {
                    cover_thumb_mid: '',
                    title: '商品名称',
                    sub_title: '副标题名称',
                    original_price: 500,
                    show_price: 200
                }
            }
        ]
    } else {
        refreshGoodsList()
    }
});

const refresh = () => {
    // 装修模式下设置默认图
    if (diyStore.mode == 'decorate') {

    } else {

    }
}

const toDetail = (item: any) => {
    if (diyStore.mode == 'decorate') return;
    uni.navigateTo({
        url: '/addon/pintuan/pages/goods/detail?pintuan_id=' + item.id
    })
}

</script>
<style lang="scss" scoped>
.goods-decoration-two{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    &::after{
        content: '';
        position: absolute;
        bottom: 8rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 110rpx;
        height: 110rpx;
        background-color: #DDDDDD;
        border-radius: 10rpx;
        z-index: 1;
        opacity: 1;
    }
    &::before{
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        width: 80rpx;
        height: 80rpx;
        background-color: #DDDDDD;
        border-radius: 10rpx;
        z-index: 2;
        opacity: 0.4;
    }
}
</style>
