<script setup>
	import {
		ref,
		reactive,
		nextTick,
		getCurrentInstance,
		computed,
	} from 'vue'
	import {
		onLoad,
		onReady,
		onPageScroll,
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from 'vuex'
	// 接口地址
	import api from '@/api/index.js'
	// 
	import util from '@/common/js/util.js'
	// 头部
	import apex from './components/jy-commodity-head';
	// 商品列表
	import productList from '@/components/shop/productList/productList'
	//底部
	import JyCommodityFoot from './components/jy-commodity-foot';
	const {
		proxy
	} = getCurrentInstance()
	// 产品详情
	const detail = reactive({})
	// 产品id
	const id = ref('')
	const {
		userinfo
	} = useStore().state
	// 轮播图详情
	const bannerIndex = ref(0)
	// 详情
	const banner = computed(() => {
		let result = []
		if (detail.sliderImage) result = detail.sliderImage.split(',')
		return result
	})

	onLoad(option => {
		if (option.productId) id.value = option.productId
		// 获取产品详情
		getDetail()
	})

	onReady(() => {
		// 
	})

	onPageScroll((ev) => {
		if (ev.scrollTop > 44) proxy.$refs.apexRef.headerActive = true
		else proxy.$refs.apexRef.headerActive = false
	})

	// 获取详情
	function getDetail() {
		api.shop.productDetail({
			query: {
				productionId: id.value
			}
		}).then(rs => {
			if (rs.code == 200) {
				Object.assign(detail, {}, rs.data)
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	/**
	 * 跳转路径
	 * @param {Object} url
	 */
	function link(url) {
		uni.navigateTo({
			url,
		})
	}
</script>

<template>
	<view class="app pr">
		<!-- 头部 -->
		<apex ref="apexRef" :detail="detail"></apex>

		<!-- 轮播图 -->
		<view class="banner pr" v-if="detail.sliderImage">
			<swiper class="swiper" :current="bannerIndex" @change="($event) => bannerIndex = $event.detail.current">
				<swiper-item v-for="(item, index) in banner" :key="index">
					<image class="poster" :src="item" mode=" aspectFill" />
				</swiper-item>
			</swiper>

			<!-- 计数器 -->
			<view class="text pa ptb5 plr20 cfff f24 bar">{{ bannerIndex + 1 }} / {{ banner.length }}</view>
		</view>

		<!-- 商品详情 -->
		<view class="detail bfff ptb25 plr20">
			<view class="line rows">
				<view class="price">
					<text class="txt">￥</text>
					<text class="txt f56">{{detail.price}}</text>
				</view>

				<!-- 已售 -->
				<view class="sold">
					<text class="c999 f26">已售 {{detail.sales}}</text>
				</view>
			</view>

			<!-- 优惠券 -->
			<view class="coupon df fdr fww f26 mtb20 cFF9B27">
				<view class="item">
					<text>限时直降0.5元</text>
				</view>
				<view class="item">
					<text>平台立减1元</text>
				</view>
				<view class="item">
					<text>关注店铺1元优惠券</text>
				</view>
			</view>

			<!-- 商品名称 -->
			<view class="name mtb20 f34 c333 t2hd">{{detail.name}}</view>

			<view class="history mtb20 rows">
				<view class="c666 f28">商品修改历史</view>
				<uni-icons type="right" />
			</view>

			<!-- 福利政策 -->
			<view class="gift df fdr fww c999 f24 mtb20">
				<view class="item">
					<text>全场包邮</text>
				</view>
				<view class="item">
					<text>48h内发货</text>
				</view>
				<view class="item">
					<text>假一赔十</text>
				</view>
				<view class="item">
					<text>7天无理由退货</text>
				</view>
				<view class="item">
					<text>支持先用后付</text>
				</view>
			</view>
		</view>

		<!-- 最近购买 -->
		<view class="recently mtb20">
			<swiper class="swiper" :autoplay="true" vertical="true">
				<swiper-item v-for="(item, index) in 2" :key="index">
					<view class="list plr10 bfff">
						<view class="item bsb rows plr10" v-for="(item, index) in 2" :key="index">
							<view class="avatar">
								<image class="avatar wh70 cir"
									src="https://img30.360buyimg.com/popWareDetail/jfs/t1/124291/22/31317/138753/6449f30dF90683c84/4fee5d1a337f7b90.jpg.avif"
									mode="aspectFill" />
							</view>

							<view class="name f1 mlr10 f28">用户xxx</view>
							<view class="info mlr10 f26 tar">
								<view class="fn">刚刚下单</view>
								<view class="time c999">2014.12.08 18:00</view>
							</view>
							<view class="btn sm warm plr15">立即购买</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 商品评价 -->
		<view class="evaluate mtb20 plr25 bfff">
			<view class="header rows ptb25" @click="link(util.setUrl('/pages/shop/commodity/evaluate',{id: 1}))">
				<text class="modelTitle">商品评价(3)</text>
				<uni-icons type="right" />
			</view>

			<!-- 部分评论 -->
			<view class="list">
				<view class="item ptb20" v-for="(item, index) in 2" :key="index">
					<view class="userinfo df c666 f28">
						<image class="avatar wh45 cir"
							src="https://img30.360buyimg.com/popWareDetail/jfs/t1/124291/22/31317/138753/6449f30dF90683c84/4fee5d1a337f7b90.jpg.avif"
							mode="aspectFill" />
						<view class="name thd f32 f1 ml20">用户xxx</view>
					</view>
					<view class="content t2hd mt10 c333 f28">这个商品不错</view>
				</view>
			</view>
		</view>

		<!-- 店铺 -->
		<view class="store df aic jcsb mtb20 ptb20 plr25 bfff">
			<view class="header rows">
				<!-- 店铺头像 -->
				<image class="wh140 br20"
					src="https://img30.360buyimg.com/popWareDetail/jfs/t1/124291/22/31317/138753/6449f30dF90683c84/4fee5d1a337f7b90.jpg.avif"
					mode="aspectFill" />
				<!-- 店铺信息 名称 评分 关注数量 -->
				<view class="info f1 mlr20">
					<!-- 店铺名称 -->
					<view class="name thd">
						<text class="f34 c333">家纺专营店</text>
					</view>
					<view class="line df dfr aic mt10">
						<!-- 评分 -->
						<view class="item f24 c666 df aic ">
							<uni-rate class="mr10" :value="4.5" :size="12" activeColor="#FF9B27" readonly />
							<text>4.5</text>
						</view>
						<!-- 关注数量 -->
						<view class="item follow c666 f24">
							<text>123关注</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 关注按钮 -->
			<view @click="followButton" class="btn sm warm plr30">
				<uni-icons class="mr10" color="#fff" type="plusempty" size="13" v-if="1" />
				<text class="cfff" v-else>已</text>
				<text class="cfff">关注</text>
			</view>
		</view>

		<!-- 宝贝详情 -->
		<view class="p25 mtb240 bfff">
			<view class="title">
				<text class="modelTitle">宝贝详情</text>
			</view>
			<!-- 商品详情 -->
			<view class="content mt30">
				<rich-text
					nodes="<p><img src='https://img30.360buyimg.com/popWareDetail/jfs/t1/124291/22/31317/138753/6449f30dF90683c84/4fee5d1a337f7b90.jpg.avif' width='100%' /></p>" />
			</view>
		</view>

		<!-- 精选 -->
		<view class="recommend mlr20">
			<productList :choicenessTitle="true" />
		</view>

		<!-- 底部 -->
		<JyCommodityFoot />
	</view>
</template>

<style lang="scss" scoped>
	// 补齐轮播图高度
	.swiper {
		height: 100%;
	}

	// 轮播图
	.banner {

		.swiper {
			height: 750rpx;

			.poster {
				width: 750rpx;
				height: 750rpx;
			}
		}

		.text {
			bottom: 20rpx;
			right: 20rpx;
			color: #fff;
			background-color: #000a;
		}
	}

	// 模块标题
	.modelTitle {
		color: #333;
		font-size: 30rpx;
	}

	// 详情
	.detail {
		.price .txt {
			color: #FF7F37;
		}

		// 优惠券
		.coupon {
			.item {
				padding: 2rpx 10rpx;
				margin-right: 15rpx;
				margin-bottom: 15rpx;
				border: 2rpx solid;
				border-radius: 6rpx;
			}
		}

		.gift {
			.item {
				margin-right: 20rpx;
				margin-right: 20rpx;
			}
		}
	}

	// 最近购买
	.recently {
		height: 220rpx;

		.item {
			height: 110rpx;

			&+.item {
				border-top: 2rpx solid #eee;
			}

			.info .fn {
				color: #FF9B27;
			}
		}
	}

	// 商品评价
	.evaluate {
		.header {
			border-bottom: 2rpx solid #eee;
		}

		.list {
			.item+.item {
				border-top: 2rpx solid #eee;
			}
		}
	}

	.comment-popup {
		border-radius: 20px 20px 0px 0px;

		.title {
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: 600;
			padding: 28rpx 0 14rpx 0;
			font-size: $uni-font-size-lg;
		}

		.close {
			position: absolute;
			right: 20rpx;
			top: 30rpx;
			display: inline-block;
			width: 50rpx;
			height: 50rpx;
		}

		//滚动
		.jy-comment-list-content {
			overflow: auto;
		}
	}

	// 店铺
	.store {

		.info {
			.item {
				margin-right: 10rpx;
			}

			.item+.item {
				padding-left: 10rpx;
				border-left: 2rpx solid #eee;
			}
		}
	}
</style>