<template>
	<x-skeleton :type="skeleton.type" :loading="skeleton.loading" :config="skeleton.config">
		<view :style="warpCss"  v-if="goodsNum">
			<view class="w-full">
				<scroll-view :id="'warpStyle-'+diyComponent.id" class="whitespace-nowrap h-[341rpx] w-full" :scroll-x="true">
					<block v-for="(item,index) in goodsList" :key="index">
						<view v-if="item.info" :id="'item'+index+diyComponent.id" class="w-[224rpx] h-[341rpx] mr-[20rpx] inline-block bg-[#fff] box-border overflow-hidden" :class="{'!mr-[0rpx]' : index == (goodsList.length-1)}" :style="itemCss+itemStyle" @click="toLink(item)">
							<view class="w-full h-[134rpx]" :style="listFrameStyle(item)">
								<view class="flex pl-[16rpx] pr-[20rpx] justify-between h-[63rpx] items-center">
									<view class="text-[28rpx] leading-[34rpx] flex-1 mr-[8rpx]" :style="{'color':item.title.textColor}">{{item.title.text}}</view>
									<view class="w-[68rpx] h-[34rpx] text-[22rpx] text-center leading-[34rpx] text-[#fff] rounded-[17rpx]" :style="moreTitleStyle(item)">{{item.moreTitle.text}}</view>
								</view>
							</view>
							<view class="mt-[-71rpx] h-[278rpx] w-full px-[20rpx] pt-[18rpx] box-border bg-white" :style="itemCss">
								<view class="flex items-center justify-center w-[184rpx] h-[184rpx]">
									<u--image width="184rpx" height="184rpx" :radius="'var(--goods-rounded-small)'" :src="img(item.info.goods_cover_thumb_mid || '')" model="aspectFill">
										<template #error>
											<image class="w-[184rpx] h-[184rpx] rounded-[var(--goods-rounded-small)]" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
										</template>
									</u--image>
								</view>
								<view class="pt-[12rpx]">
									<view class="h-[44rpx] pl-[4rpx] min-w-[168rpx] box-border flex justify-between items-center mx-auto border-[2rpx] border-solid border-[var(--primary-color)] rounded-[20rpx]" :style="{'border-color':item.button.color}">
										<view class="text-[var(--price-text-color)] font-bold price-font flex items-baseline leading-[40rpx] flex-1 justify-center" >
											<view class="leading-[1] max-w-[105rpx] truncate" :style="{ color : diyComponent.priceStyle.mainColor }">
												<text class="text-[18rpx] font-400 mr-[2rpx]">￥</text>
												<text class="text-[28rpx] font-500">{{ parseFloat(diyGoods.goodsPrice(item.info.goodsSku)).toFixed(2)}}</text>
											</view>
										</view>
										<view class="w-[70rpx] box-border text-right text-[#fff] pr-[8rpx] text-[22rpx] font-500 leading-[44rpx] rounded-tr-[20rpx] rounded-br-[20rpx] rounded-tl-[24rpx] relative" :style="{'background-color':item.button.color}">
											<text>{{item.button.text}}</text>
											<image class="w-[24rpx] h-[44rpx] absolute top-[-2rpx] left-0" :src="img('/addon/shop/Union.png')" />
										</view>
									</view>
								</view>
							</view>
						</view>
					</block>
				</scroll-view>

			</view>
		</view>
	</x-skeleton>
</template>

<script setup lang="ts">
	// 商品推荐
    import { ref,reactive,computed, watch, onMounted, nextTick,getCurrentInstance } from 'vue';
	import { redirect, img, deepClone } from '@/utils/common';
	import useDiyStore from '@/app/stores/diy';
	import { getGoodsComponents } from '@/addon/shop/api/goods';
	import {useGoods} from '@/addon/shop/hooks/useGoods'

	const diyGoods = useGoods();
	const props = defineProps(['component', 'index', 'pullDownRefreshCount','value']);
	const diyStore = useDiyStore();
	const emits = defineEmits(['loadingFn']); //商品数据加载完成之后触发

	const goodsNum = ref(0);

    const skeleton = reactive({
        type: '',
        loading: false,
        config: {}
    })

	const goodsList = ref<Array<any>>([]);

	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(() => {
		var style = '';
        style += 'position:relative;';
        if(diyComponent.value.componentStartBgColor) {
            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 + ';';
        }

		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 itemCss = computed(() => {
        var style = '';
        if (diyComponent.value.elementBgColor) style += 'background-color:' + diyComponent.value.elementBgColor + ';';
        if (diyComponent.value.topElementRounded) style += 'border-top-left-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
        if (diyComponent.value.topElementRounded) style += 'border-top-right-radius:' + diyComponent.value.topElementRounded * 2 + 'rpx;';
        if (diyComponent.value.bottomElementRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
        if (diyComponent.value.bottomElementRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomElementRounded * 2 + 'rpx;';
        return style;
    })

	//listFrame样式
	const listFrameStyle = (item:any)=>{
		var style= '';
		 if(item.listFrame.startColor){
			if(item.listFrame.startColor && item.listFrame.endColor) style = `background:linear-gradient( 110deg, ${item.listFrame.startColor} 0%, ${item.listFrame.endColor} 100%);`;
			else style = 'background-color:' + item.listFrame.startColor + ';';
		 }
		 return style
	}
	//moreTitle样式
	const moreTitleStyle = (item:any)=>{
		var style= '';
		 if(item.moreTitle.startColor){
			if(item.moreTitle.startColor && item.moreTitle.endColor) style = `background:linear-gradient( 0deg, ${item.moreTitle.startColor} 0%, ${item.moreTitle.endColor} 100%);`;
			else style = 'background-color:' + item.moreTitle.startColor + ';';
		 }
		 return style
	}
	//商品样式
	const itemStyle = ref('');
	const setItemStyle = ()=>{
		// #ifdef  MP-WEIXIN
			// uni.createSelectorQuery().in(instance).select('#warpStyle-'+diyComponent.value.id).boundingClientRect((res:any) => {
			// 	uni.createSelectorQuery().in(instance).select('#item0'+diyComponent.value.id).boundingClientRect((data:any) => {
			// 		itemStyle.value = `margin-right:${(res.width - data.width*3)/2}px;`
			// 	}).exec()
			// }).exec()
		// #endif
		// #ifdef  H5
			// itemStyle.value= 'margin-right:19rpx;'
		// #endif
		if(diyComponent.value.margin && diyComponent.value.margin.both) itemStyle.value = 'width: calc((100vw - ' + (diyComponent.value.margin.both*4) + 'rpx - 40rpx) / 3);'
		else itemStyle.value = 'width: calc((100vw - 40rpx) / 3 );'
	}

	setItemStyle();

	watch(
		() => props.pullDownRefreshCount,
		(newValue, oldValue) => {
			// 处理下拉刷新业务
		}
	)

	const getGoodsListFn = () => {
        let data: any = {}
        if(diyComponent.value.source == 'all') {
	        data.num = diyComponent.value.list.length;
        }else if(diyComponent.value.source == 'custom') {
	        data.goods_ids = diyComponent.value.goods_ids;
        }

        getGoodsComponents(data).then((res) => {
			let goodsObj = res.data;
			goodsNum.value = goodsObj.length || 0;
            diyComponent.value.list.filter((el:any, index)=>{
				el.info=deepClone(goodsObj[index])
			});
			goodsList.value = deepClone(diyComponent.value.list)
            skeleton.loading = false;
        });
    }

	const instance = getCurrentInstance();

	onMounted(() => {
		refresh();
	});
	watch(
	    () => diyComponent.value,
	    (newValue, oldValue) => {
	        refresh();
	    },
	)
	const refresh = () => {
		// 装修模式下设置默认图
		if (diyStore.mode == 'decorate') {
			nextTick(() => {
				if(diyComponent.value && diyComponent.value.list){
					goodsList.value = diyComponent.value.list.map((el:any)=>{
						let obj = deepClone(el)
						obj.info={
							goods_cover_thumb_mid:'',
							goodsSku:{
								price:'10.00'
							}
						}
						return obj
					})
					goodsNum.value = 3;
					setItemStyle()
				}
			})
		}else{
			getGoodsListFn();
		}
	}

	const toLink = (data: any) => {
		redirect({ url: '/addon/shop/pages/goods/detail', param: { goods_id: data.info.goods_id } })
	}

</script>

<style lang="scss" scoped>
</style>
