<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1" :scroll-top="scrollTop" @scroll="scroll">
	<!-- #endif -->
		<!-- 顶部导航 -->
		<!-- <easy-tabs class="fix-top" v-if="tabShow" :list="list" @change="onChange"></easy-tabs> -->
		<!-- 商品-->
		<swiper ref="good" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<image class="swiper-image" :src="cdn(item.image)" mode=""></image>
			</swiper-item>
		</swiper>
		<view class="good">
			<text class="good-title">FGFEEL/普普风 纤纤细腰氛围感 简单又别致纯色短袖T恤OB2T7375S</text>
			<view class="good-price">
				<text class="good-price1">￥120.00</text>
				<text class="good-price2">￥180.00</text>
				<easy-tag type="error">7折</easy-tag>
			</view>
			<view class="good-static">
				<text class="good-static-text">月销：1345</text>
				<text class="good-static-text">收藏：482</text>
				<text class="good-static-text">浏览：4135</text>
			</view>
		</view>
		<easy-cell title="购买类型" value="白色 XS" :is-link="true" @click="show=true"></easy-cell>
		<easy-cell title="分享" value="分享得10元无门槛红包" :is-link="true"></easy-cell>
		<easy-cell title="优惠券" value="速抢手慢无" :is-link="true"></easy-cell>
		<!-- 评价 -->
		<easy-card ref="comment" title="评价(103)" value="好评率98.5%" link="123">
			<view class="comment" v-for="i in 3">
				<image class="comment-avatar" src="https://mzyun.tech/assets/img/avatar.png" mode=""></image>
				<view class="comment-right">
					<text class="comment-name">超级美少女{{i}}</text>
					<text class="comment-content">非常好看的衣服，超级喜欢</text>
					<text class="comment-date">2023-12-{{i}}</text>
				</view>

			</view>
		</easy-card>
		<!-- 图文详情 -->
		<view class="" ref="detail">
			<text class="detail-title">-----图文详情-----</text>
			<image class="swiper-image" v-for="i in 14" :src="cdn('/shop/1-'+i+'.jpeg')" mode=""></image>
		</view>


		<easy-blank></easy-blank>
		<easy-action-bar class="fix-bottom">
			<easy-action-bar-icon icon="chat-o" text="客服" @click="onClickKefu"></easy-action-bar-icon>
			<easy-action-bar-icon icon="cart-o" text="购物车" @click="onClickCart"></easy-action-bar-icon>
			<template #button>
				<easy-action-bar-button color="orange" text="加入购物车" @click="show=true"></easy-action-bar-button>
				<easy-action-bar-button color="orangered" text="立即购买" @click="show=true"></easy-action-bar-button>
			</template>
		</easy-action-bar>
		<easy-sku v-model:show="show" :good="good" :sku="sku" :value="value" @num-change="onNumChange"
			@add-cart="addCart" @buy-clicked="buy" cdn="https://cdn.mzyun.tech/easyx"></easy-sku>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script>
	export type listItem = { text : string, image : string, link ?: string, price ?: string }
	import type { SkuItem, GoodType } from '@/components/easy-sku/easy-sku.uvue'
	export default {
		data() {
			return {
				list: ['宝贝', '评价', '详情', '推荐'],
				scrollTop: 0,
				tabShow: false,
				swiperList: [{ text: "banner1", image: "/shop/1-1.jpeg", link: "" },
				{ text: "banner2", image: "/shop/1-2.jpeg", link: "" },
				{ text: "banner3", image: "/shop/1-3.jpeg", link: "" },
				{ text: "banner4", image: "/shop/1-4.jpeg", link: "" }] as listItem[],
				show: false,
				value: 1,
				good: { id: 1, image: '/shop/1-3.jpeg', price: "120.00" } as GoodType,
				sku: [
					{ k: "颜色", v: [{ id: 1, name: "白色" }, { id: 2, name: "黑色", imgUrl: "/shop/1-4.jpeg" }] },
					{ k: "尺码", v: [{ id: 3, name: "XS" }, { id: 4, name: "S" }, { id: 5, name: "M" }] },
				] as SkuItem[],
				goodNode: null as null | Element,
				commentNode: null as null | Element,
				detailNode: null as null | Element,

			};
		},
		onReady() {
			this.goodNode = this.$refs['good'] as Element;
			this.commentNode = this.$refs['comment'] as Element;
			this.detailNode = this.$refs['detail'] as Element;
		},
		methods: {
			cdn(url : String) : string {
				return "https://cdn.mzyun.tech/easyx" + url;
			},
			onChange(index : number) {
				// if(index==0){
				// 	let rect = this.goodNode!!.getBoundingClientRect();
				// 	this.scrollTop=rect.top
				// }
				// if(index==1){
				// 	this.scrollTop = this.commentNode!!.getBoundingClientRect().top;
				// }
				// if(index==2){
				// 	this.scrollTop = this.detailNode!!.getBoundingClientRect().top;
				// }
			},
			addCart() {
				uni.showToast({
					title: "已点击加入购物车"
				})
			},
			buy() {
				uni.showToast({
					title: "已点击购买按钮"
				})
			},
			onClickKefu() {
				uni.showToast({
					title: "已点击客服图标"
				})
			},
			onClickCart() {
				uni.showToast({
					title: "已点击购物车图标"
				})
			},
			onClickShop() {
				uni.showToast({
					title: "已点击店铺图标"
				})
			},
			onNumChange(value : number) {
				uni.showToast({
					title: '已选择' + value
				})
			},
			scroll(e : ScrollEvent) {
				console.log(e.detail.scrollTop)
				if (e.detail.scrollTop > 0) {
					this.tabShow = true
				} else {
					this.tabShow = false
				}
			},
		}
	}
</script>

<style lang="scss">
	.swiper-image {
		height: 400px;
	}

	.good {
		margin: 15px;

		.good-title {
			font-weight: bold;

		}

		.good-price {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin: 15px 0;

			.good-price1 {
				color: $uni-color-error;

			}

			.good-price2 {
				color: #c3c3c3;
				text-decoration-line: line-through;
				font-size: 12px;
				margin: 0 10px;
			}
		}

		.good-static {
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.good-static-text {
				color: #c3c3c3;
				font-size: 12px;
			}
		}
	}

	.comment {
		display: flex;
		flex-direction: row;
		margin: 15px 0;

		.comment-avatar {
			width: 60px;
			height: 60px;
			border-radius: 50px;
			margin-right: 15px
		}

		.comment-right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.comment-content {
				margin: 5px 0;
			}

			.comment-date {
				color: #c9c9c9;
				font-size: 12px
			}
		}
	}

	.detail-title {
		width: 100%;
		text-align: center;
		margin: 10px 0;
	}

	.fix-top {
		position: fixed;
		top: 0;
		width: 100%;
	}

	.fix-bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
	}
</style>