<template>
	<view class="bg-[var(--page-bg-color)] min-h-[100vh]" :style="themeColor()">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @up="getData" :down="{ use: false }">
			<view class="w-[100%] h-[340rpx]" :style="{ backgroundImage: 'url(' + img('addon/shop_fenxiao/fenxiao_goods_bg.png') + ')','background-size': 'cover' }"></view>
			<view class="bg-white flex card-template sidebar-margin rounded-[var(--rounded-big)] overflow-hidden mt-[var(--top-m)]"  v-for='(item,index) in list' :key="index" :class="{ 'mb-[20rpx]': (index+1) == list.length}" @click="toLink(item)">
				<view class="w-[190rpx] h-[190rpx]">
					<u--image width="190rpx" height="190rpx" radius="var(--goods-rounded-big)" :src="img(item.goods_cover_thumb_mid ? item.goods_cover_thumb_mid : '')" model="aspectFill">
						<template #error>
							<image class="w-[190rpx] h-[190rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
						</template>
					</u--image>
				</view>
				<view class="flex-1 flex flex-col ml-[20rpx] py-[4rpx]">
					<view class="text-[28rpx] text-[#333] leading-[40rpx]  multi-hidden mb-[10rpx]">{{ item.goods_name }}</view>
					<view class="mt-auto flex justify-between items-end">
						<view class="text-[var(--price-text-color)] price-font max-w-[194rpx] h-[40rpx] truncate">
							<text class="text-[24rpx] font-500">￥</text>
							<text class="text-[40rpx] font-500">{{ parseFloat(item.goodsSku.price).toFixed(2).split('.')[0] }}</text>
							<text class="text-[24rpx] font-500">.{{ parseFloat(item.goodsSku.price).toFixed(2).split('.')[1] }}</text>
						</view>
						<view @click.stop="openShareFn(item)" class="text-[24rpx] box-border border-[2rpx] border-solid border-[var(--price-text-color)] px-[16rpx] h-[54rpx] flex-center rounded-[50rpx] text-[var(--price-text-color)]">
							<text class="nc-iconfont nc-icon-fenxiangV6xx-1 mr-[6rpx] !text-[26rpx]"></text>
							<text>赚</text>
							<text class="max-w-[129rpx] truncate">{{ item.commission }}</text>
							<text>元</text>
						</view>
					</view>
				</view>
			</view>
			<mescroll-empty :option="{'icon': img('static/resource/images/empty.png')}" v-if="!list.length && !tableLoading"></mescroll-empty>
		</mescroll-body>
		<share-poster ref="sharePosterRef" posterType="fenxiao_goods" :posterParam="posterParam" :copyUrlParam="copyUrlParam" :copyUrl="copyUrl" @close="closeSharePoster" />

		<!-- #ifdef MP-WEIXIN -->
		<!-- 小程序隐私协议 -->
		<wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
		<!-- #endif -->
	</view>
</template>

<script setup lang="ts">
	import { redirect, img } from '@/utils/common';
	import { onLoad,onPageScroll, onReachBottom } from '@dcloudio/uni-app'
	import {ref, computed, reactive,nextTick} from 'vue'
	import { t } from '@/locale'
	import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue'
	import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue'
	import useMescroll from '@/components/mescroll/hooks/useMescroll.js'
	import { getFenxiaoGoodsList } from '@/addon/shop_fenxiao/api/fenxiao';
	import useMemberStore from '@/stores/member'
    import sharePoster from '@/components/share-poster/share-poster.vue'
	import { useShare }from '@/hooks/useShare'

    const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);

	// 会员信息
	const memberStore = useMemberStore()
	const userInfo = computed(() => memberStore.info)

	const list = ref([]);
	const tableLoading = ref<boolean>(true);

	const wxPrivacyPopupRef:any = ref(null)
	const shareType = ref('page') // page：分享页面，goods：分享商品
    const{ setShare } = useShare()

	onLoad(()=>{
		// #ifdef MP
		nextTick(()=>{
			if(wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
		})
		// #endif
	})

	const getData = (mescroll: any) => {
		let data: object = {
			page: mescroll.num,
			limit: mescroll.size
		};
		tableLoading.value = true;
		getFenxiaoGoodsList(data).then((res: any) => {
			let newArr: any = (res.data.data as Array<Object>);
			//设置列表数据
			if (mescroll.num == 1) {
				list.value = []; //如果是第一页需手动制空列表
			}
			list.value = list.value.concat(newArr);
			tableLoading.value = false;
			mescroll.endSuccess(newArr.length);

			setCurrentShare();
		}).catch(() => {
			tableLoading.value = false;
			mescroll.endErr(); // 请求失败, 结束加载
		})
	}

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

	/************* 分享海报-start **************/
	const sharePosterRef: any = ref(null);
	const copyUrlParam = ref('');
	const copyUrl = ref('');
	let posterParam: any = {};
	// 分享海报链接
	const copyUrlFn = (data: any)=> {
		copyUrl.value = '/addon/shop/pages/goods/detail';
		copyUrlParam.value = '?goods_id=' + data.goods_id;

		let path = '/addon/shop/pages/goods/detail?goods_id=' + data.goods_id;
		if (userInfo.value && userInfo.value.member_id) {
			copyUrlParam.value += '&mid=' + userInfo.value.member_id;
			path += '&mid=' + userInfo.value.member_id;
		}

		let share = {
			title: data.goods_name,
			path,
			url: data.goods_cover_thumb_mid
		}

		setShare({
			weapp: {
				...share
			}
		});
	}

	const openShareFn = (data: any)=>{
		posterParam.sku_id = data.goodsSku.sku_id;
		if (userInfo.value && userInfo.value.member_id) {
            posterParam.member_id = userInfo.value.member_id;
        }
		copyUrlFn(data);
		sharePosterRef.value.openShare()
        shareType.value = 'goods'
	}

	const closeSharePoster = () => {
		shareType.value = 'page'
		setCurrentShare();
	}

	const setCurrentShare = ()=>{
		copyUrl.value = '/addon/shop_fenxiao/pages/goods';
		copyUrlParam.value = '';

		let path = '/addon/shop_fenxiao/pages/goods';
		if (userInfo.value && userInfo.value.member_id) {
			copyUrlParam.value += '?mid=' + userInfo.value.member_id;
			path += '?mid=' + userInfo.value.member_id;
		}

		let share = {
			title: '分销商品',
			path
		}

		setShare({
			weapp: {
				...share
			}
		});
	}
	/************* 分享海报-end **************/
</script>

<style lang="scss" scoped>
	.mescroll-body{
		min-height: calc(100vh - 350rpx) !important;
	}
</style>
