<template>
	<view class="rf-product-detail">
		<u-loading-page :loading="loading"></u-loading-page>
		
		<view class="detail" v-if="!loading">
			<!--顶部商品轮播图-->
			<view class="carousel">
				<swiper indicator-dots circular="true" duration="400" controls touchable>
					<!--
					<swiper-item class="swiper-item" v-if="product.video_url">
						<video muted :poster="product.covers[0]" object-fit="contain" :src="product.video_url"></video>
					</swiper-item>
					-->
					<swiper-item
						class="swiper-item"
						v-for="(item, index) in covers"
						:key="index">
						<view class="image-wrapper">
							<image :src="item" class="loaded" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			
			<!--商品信息-->
			<view class="introduce-section">
				<view class="jf">
					<uni-row justify="space-between" customStyle="margin-bottom: 15px">
						<uni-col :span="20">
							<image class="icon" mode="widthFix" src="../../static/jf/icon_points_small_16@2x.png"></image>
							<text class="count">{{listData.dhsxjf}}</text>
						</uni-col>
						<uni-col :span="4" style="text-align: right">
							<view class="mxname">已兑 : {{listData.spydhsl}}</view>
						</uni-col>
					</uni-row>	
					<uni-row justify="space-between" customStyle="margin-bottom: 10px">
						<uni-col :span="24">
							<image class="icon" mode="widthFix" src="../../static/jf/icon_address_small_16@2x.png"></image>
							<text class="location">{{listData.xz}}</text>
						</uni-col>
					
					</uni-row>	
				</view>
			
				<view class="introduce-second-line">
					<view class="title">
						<text>{{listData.spmc}}</text>
					</view>
				</view>
				
				<view class="detail">	
					<!--<uni-row justify="space-between" customStyle="margin-bottom: 10px">
						<uni-col :span="6">
							<text>品牌</text>
						</uni-col>
						<uni-col  :span="18" style="">
							<text>金号</text>
						</uni-col>
					</uni-row>
					
					<uni-row justify="space-between" customStyle="margin-bottom: 10px">
						<uni-col :span="6">
							<text>类别</text>
						</uni-col>
						<uni-col  :span="18" style="">
							<text>毛巾</text>
						</uni-col>
					</uni-row>
					
					<uni-row justify="space-between" customStyle="margin-bottom: 10px">
						<uni-col :span="6">
							<text>产品尺寸</text>
						</uni-col>
						<uni-col  :span="18" style="">
							<text>毛巾</text>
						</uni-col>
					</uni-row>
					
					<uni-row justify="space-between" customStyle="margin-bottom: 10px">
						<uni-col :span="6">
							<text>产地</text>
						</uni-col>
						<uni-col  :span="18" style="">
							<text>毛巾</text>
						</uni-col>
					</uni-row>
					<uni-row justify="space-between" customStyle="margin-bottom: 10px">
						<uni-col :span="6">
							<text>适用人群</text>
						</uni-col>
						<uni-col  :span="18" style="">
							<text>毛巾</text>
						</uni-col>
					</uni-row>
					
					<uni-row justify="space-between" customStyle="margin-bottom: 10px">
						<uni-col :span="6">
							<text>国产/进口</text>
						</uni-col>
						<uni-col  :span="18" style="">
							<text>毛巾</text>
						</uni-col>
					</uni-row>
					
					<uni-row justify="space-between" customStyle="margin-bottom: 10px">
						<uni-col :span="6">
							<text>重量</text>
						</uni-col>
						<uni-col  :span="18" style="">
							<text>毛巾</text>
						</uni-col>
					</uni-row>
					
					<uni-row justify="space-between" customStyle="margin-bottom: 10px">
						<uni-col :span="6">
							<text>规格</text>
						</uni-col>
						<uni-col  :span="18" style="">
							<text>毛巾</text>
						</uni-col>
					</uni-row>
					
					<uni-row justify="space-between" customStyle="margin-bottom: 10px">
						<uni-col :span="6">
							<text>面料</text>
						</uni-col>
						<uni-col  :span="18" style="">
							<text>毛巾</text>
						</uni-col>
					</uni-row>
					
					<uni-row justify="space-between" customStyle="margin-bottom: 10px">
						<uni-col :span="6">
							<text>产品等级</text>
						</uni-col>
						<uni-col  :span="18" style="">
							<text>毛巾</text>
						</uni-col>
					</uni-row>-->
					<uni-row>
						<view v-html="listData.spms" class="description"></view>
						<image v-for="(item, index) in covers" :src="item" mode="widthFix" style="width: 100%"></image>
					</uni-row>
				
				</view>
		
			</view>
			
			
			<view class="goods-carts">
						<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
							@buttonClick="buttonClick" />
			</view>

		</view>
		
	</view>

</template>

<script>

import {jwtdSpgldetail,jwtdGwc,jwtdGwcList,jwtdSpglDhjl} from '@/api/jfsc.js'
	export default {
		data(){
			return{
				loading:true,
				listData:{},
				covers:[],
				product:{
					covers:[
					'https://gw.alicdn.com/imgextra/O1CN01AQckRr1UNL8YJGGu0_!!2849252505.jpg',
					'https://gw.alicdn.com/imgextra/O1CNA12MNRp91UNL9KreI41_!!2849252505-0-psf.jpg'
					],
					video_url:'',
					video_url:'',
					name:'超亮吸顶灯客厅大灯主卧室吊灯具大全现代简约大气全屋家用中山',
				},

					options: [{
						icon: 'cart',
						text: '购物车',
						info: 0
					}],
					buttonGroup: [{
							text: '加入购物车',
							backgroundColor: 'linear-gradient(0deg, #FFD452, #FF9700)',
							color: '#fff'
						},
						{
							text: '立即兑换',
							backgroundColor: 'linear-gradient(0deg, #65CBFF, #0260FE)',
							color: '#fff'
						}
					],
				
				
			}
		},
		onLoad(options) {
			jwtdSpgldetail(options.id).then(res=>{
				this.listData = res.data
				this.covers = res.data.spzp.split(',')
				this.loading=false
			}).finally(()=>{
			})
			
			jwtdGwcList(this.userInfo.user_id).then(res=>{
				this.options[0].info = res.data.records.length
			})
		},
		methods:{
			back(){
				uni.switchTab({
				   url: "/pages/jfsc/index", // 确保 url 是正确的
				 });
			},
			onClick(e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
				if(e.content.text=='购物车'){
					uni.navigateTo({
						url:'/product/product/card'
					})
				}
			},
			buttonClick(e) {
				if(e.index==0){
					jwtdGwc({
						spId:this.listData.id,
						userId:this.userInfo.user_id
					}).then(res=>{
						if(res.data=='购物车已有此物品'){
							uni.showToast({
								title:res.data,
								icon:'error'
							})
						}else{
							this.options[0].info++
							uni.showToast({
								title:'已添加到购物车',
								icon:'success'
							})
						}
						
					}).finally(()=>{
						
					})
				}else{
					let buyList =[]
					buyList.push({spId:this.listData.id,spsl:1,xhjf:this.listData.dhsxjf})
					jwtdSpglDhjl(buyList).then(res=>{
						uni.showToast({
							title:'兑换成功',
							icon:'success'
						})
					})
				}
				
				
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .uni-navbar__content{
		border-bottom: none !important;
	}
	.description{
		font-size: 24rpx;
		padding: 24rpx 0;
		line-height: 36rpx;
		color: #111111;
	}
	.goods-carts {
			display: flex;
			flex-direction: column;
			position: fixed;
			left: 0;
			right: 0;
			left: var(--window-left);
			right: var(--window-right);
			bottom: 0;
		}
	.rf-product-detail {
		.back-btn {
			position: fixed;
			left: 40upx;
			z-index: 9999;
			padding-top: 10px;
			top: 40upx;
			font-size: 40upx;
			color: transparent;
		}
		.carousel {
			height: 722upx;
			position: relative;
			swiper {
				height: 100%;
			}
			.image-wrapper {
				width: 100%;
				height: 100%;
			}
			.swiper-item {
				display: flex;
				justify-content: center;
				align-content: center;
				height: 750upx;
				overflow: hidden;
				border-bottom: 1upx solid rgba(0, 0, 0, 0.01);
				image {
					width: 100%;
					height: 100%;
				}
				.content {
					position: absolute;
					right: 0;
					bottom: 0;
				}
			}
		}
		.detail {
			padding-bottom: 60upx;
		}
		.introduce-section{
				padding:24rpx 24rpx;
				.title{
					height: 84rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;                                                       
					color: #000000;
					line-height: 42rpx;
					text-align: justify;
					font-style: normal;
					margin-bottom: 12rpx;
				}
				.icon{
					vertical-align: bottom;
					margin-right: 5rpx;
					position: relative;
					top: -2px;
					width: 32rpx;
				}
				.count{
					height: 44rpx;
					font-family: DIN, DIN;
					font-weight: 500;
					font-size: 36rpx;
					color: #FF1D1D;
					line-height: 44rpx;
					text-align: left;
					font-style: normal;
				}
				.location{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #111111;
					line-height: 32rpx;
					text-align: left;
					font-style: normal;
					 white-space: nowrap; /* 确保文本在一行内显示 */
					  overflow: hidden; /* 隐藏溢出的内容 */
					  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
				}
				.mxname{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					line-height: 32rpx;
					text-align: center;
					font-style: normal;
			
			}
			.introduce-second-line{
				padding: 24rpx 0 !important;
				.title{
					text{
						height: 96rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 34rpx;
						color: #111111;
						line-height: 48rpx;
						text-align: left;
						font-style: normal;
						
					}
				}
			}
			.detail{
				text{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #111111;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
				}
			}
		}
	}
</style>


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