<template>
	<view class="container">
		<image :key="index" v-for="(item, index) in imgList" mode="widthFix" class="productimg" :src="item.imgUrl">
		</image>
		<view class="btnbox" v-if="productId && skuId">
			<image  @tap="buyHandler" class="btnbuy" :src="$baseUrl + 'brandpage/btnbuy.png'"></image>
			<button class="btnshare" v-if="isShowShare" @tap="handleShare" open-type="share" style="background: none; border: none; padding: 0;">
				<image class="btnshare" :src="$baseUrl + 'brandpage/btnshare.png'"></image>
			</button>
		</view>
		<view class="btnbox" v-else>
			<button class="btnshare2" @tap="handleShare" open-type="share" style="background: none; border: none; padding: 0;">
				<image class="btnshare2" :src="$baseUrl + 'brandpage/btnsharebig.png'"></image>
			</button>
		</view>
	
	</view>
</template>

<script>
import md from '../../md';
export default {
	data() {
		return {
			productId: '',
			imgLength: 0,
			imgList: [],
			productId: '',
			skuId: '',
			contentImg: '',
			contentImgLen: '',
			shareTitle: '',
			shareImg: '',
			tabName: '',
			title: '',
			isShowShare:true
		}
	},

	onLoad(options) {

		// options 就是跳转时传递的参数对象
		console.log('页面参数:', options);
		const { productId, skuId, contentImg, contentImgLen, shareTitle, shareImg,tabName,title } = options;
		this.productId = productId;
		this.skuId = skuId;
		this.contentImg = contentImg;
		this.contentImgLen = contentImgLen;
		this.shareTitle = shareTitle;
		this.tabName = tabName;
		this.title = title;
		if(shareImg.indexOf('http') === -1){
			this.shareImg = this.$baseUrl + shareImg;
		}else{
			this.shareImg = shareImg;
		}
		
		// this.shareImg = "https://yun.duiba.com//fh/"+shareImg;


		this.imgList = Array.from({ length: this.contentImgLen }, (_, index) => {
			return {
				imgUrl: this.$baseUrl + 'brandpage/products/' + contentImg.split('-')[0] + '/'
					+ contentImg + '/product_' + contentImg.replace('-', '_') + '_' + index + '.jpg'
			}
		});

		if(this.imgList && this.imgList.length > 0 && this.imgList[0].imgUrl.indexOf('products/5/') > -1){
			this.isShowShare = false;
		}else{
			this.isShowShare = true;
		}
		md.sensorLogTake({
			xcxPage: `品牌故事-${tabName}-${title}产品详情页页面浏览`,
			pageName: `品牌故事-${tabName}-${title}产品详情页页面浏览`,
		});
		

		uni.hideShareMenu();
	},
	methods: {
		buyHandler() {
			md.sensorLogTake({
				xcxClick: `品牌故事-${this.tabName}-${this.title}产品详情页-分享按钮点击`,
				pageName: `品牌故事-次屏页面`,
				buttonName: `${this.tabName}-${this.title}立即购买`
			});

			const _path = `/subPackages/shopMainProcess/product/index?productId=${this.productId}&skuId=${this.skuId}&entrySource=xmh_wechatmp_brand_profamily`
			uni.navigateToMiniProgram({
				appId: 'wx4205ec55b793245e',
				path: _path,
				success(res) {
					console.log('跳转成功', res)
				},
				fail(err) {
					console.error('跳转失败', err)
				}
			})
		},
		
		handleShare() {
			md.sensorLogTake({
				xcxClick: `品牌故事-${this.tabName}-${this.title}产品详情页-分享按钮点击`,
				pageName: `品牌故事-次屏页面`,
				buttonName: `${this.tabName}-${this.title}立即分享`
			});
		},
	},
	onShareAppMessage() {
		return {
			title: this.shareTitle,
			path: '/pages/product/product?productId=' + this.productId + '&skuId=' + this.skuId + '&contentImg=' + this.contentImg + '&contentImgLen=' + this.contentImgLen + '&shareTitle=' + this.shareTitle + '&shareImg=' + this.shareImg + '&tabName=' + this.tabName+'&title=' + this.title,
			imageUrl: this.shareImg
		}
	},
	
}
</script>

<style lang="less" scoped>
.container {

	.productimg {
		width: 750rpx;
		vertical-align: top;
		margin: 0;
		padding: 0;
		border: none;
		margin-top: -1rpx;
	}

	.btnbox {
		position: fixed;
		left: 0;
		width: 100%;
		bottom: 0;
		height: 150rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 20rpx;
		padding: 0 20rpx;
		box-sizing: border-box;

		.btnbuy {
			width: 350rpx;
			height: 75rpx;
			flex-shrink: 0;
		}

		button.btnshare::after {
			border: none !important;
		}

		.btnshare {
			width: 350rpx;
			height: 75rpx;
			flex-shrink: 0;
		}
		button.btnshare2::after {
			border: none !important;
		}

		.btnshare2 {
			width: 718rpx;
			height: 75rpx;
			flex-shrink: 0;
		}
	}
}
</style>
