<template>
	<view class="shop-details-container">
		<view class="banner-swiper">
			<swiper class="swiper-wrapper" circular :indicator-dots="false" :autoplay="true" @change="bannerChange">
				<swiper-item v-for="(banner, i) in details.product_pic_json" :key="i">
					<image class="swiper-img" :src="banner.photos_image" />
				</swiper-item>
			</swiper>
			<view class="flex-row-center dot-box">
				<view v-for="(banner, index) in bannerList" :key="index" class="dot-item"
					:class="{ active: bannerIndex === index }"></view>
			</view>
		</view>

		<view class="good-info">
			<view class="info-cell">
				<!-- <view class="flex-row-start label">
					<image class="hot-icon" :src="`${imgPrefix}mall-hot.png`"></image>
					<view class="fs-20 app-fc-main label-name">{{details.sales}}人买过</view>
				</view> -->
				<view class="flex-row-between" style="margin-top: 20rpx">
					<view class="">
						<text class="app-fc-mark fs-28">￥</text>
						<text class="app-fc-mark fs-28">{{picList[0].actual_price / 100 || 0 }}</text>
						<!--            <text class="fs-24 origin-price">
              ¥{{ minPrice.price_shichang || 0 }}
            </text> -->
					</view>
					<!--          <text class="fs-22 app-fc-cancel">
            已售 {{ details.xiaoliang || 0 }}件
          </text> -->
				</view>
				<view class="fs-29   good-name">
					{{ details.product_name || "" }}
				</view>
				<!-- 				<view class="flex-row-start">
					<text class="fs-20 sale-btn" v-for="(label, i) in labelList" :key="i"
						:class="[i > 0 ? 'sale-today app-fc-mark' : 'app-fc-white']">
						{{ label }}
					</text>
				</view> -->
			</view>
			<view class="info-cell shipping-info-cell">
				<view class="selected-row" @click="showSpecModal">
					<text class="selected-label">已选</text>
					<text class="selected-value">{{ selectedSpec || "请选择规格" }}</text>
					<image class="arrow-right-icon" :src="require('./static/arrow_right.png')" />
				</view>
				<view class="service-features">
					<view class="feature-item">
						<image :src="`${imgPrefix}mall-detailTips.png`" class="mallPng"></image>
						<!-- <view class="check-icon">✓</view> -->
						<text class="feature-text">快递发货</text>
					</view>
					<view class="feature-item" style="margin-left: 20rpx;">
						<!-- <view class="check-icon">✓</view> -->
						<image :src="`${imgPrefix}mall-detailTips.png`" class="mallPng"></image>
						<text class="feature-text">七天无理由退货</text>
					</view>
				</view>
			</view>
			<view class="info-cell" v-if="remarkList.length">
				<view class="width-fill flex-row-between">
					<text class="fs-28 postage-info">
						用户评价
						<text class="fs-24 app-fc-normal">
							({{ details.pingjia_num }})
						</text>
					</text>
					<view class="flex-row-end" @click="jumpToRemark">
						<text class="fs-26 app-fc-main">查看全部</text>
						<image class="arrow-icon" :src="require('./static/arrow_right.png')" />
					</view>
				</view>
				<view class="remark-list">
					<remark-item v-for="item in remarkList" :key="item.id" :data="item" />
				</view>
			</view>
		</view>

		<view class="fs-24 app-fc-normal rich-text-title">—— 商品详情 ——</view>
		<view class="rich-text-content" v-html="details.content"></view>
		<view class="place-view"></view>

		<view class="flex-row-between details-bottom">
			<view class="flex-row-start">
				<view class="flex-center opt-item" @click="collectAction">
					<image class="opt-icon" :src="
              details.shoucang_id
                ? 	`${imgPrefix}shopDetail-collect_done.png`
                :  `${imgPrefix}shopDetail-collect.png`
            " mode="widthFix" />
					<text class="fs-20 app-fc-main">收藏</text>
				</view>
				<view class="flex-center opt-item service" @click="jumpToWeChat">
					<image class="opt-icon" :src="`${imgPrefix}shopDetail-contact.png`" mode="widthFix" />
					<text class="fs-20 app-fc-main">客服</text>
				</view>
				<view class="flex-center opt-item service cart-item-wrapper" @click="jumpToCart">
					<view class="cart-icon-wrapper">
						<image class="opt-icon" :src="`${imgPrefix}shopDetail-car.png`" mode="widthFix" />
						<view v-if="cartCount > 0" class="cart-badge">
							<text class="cart-badge-text">{{ cartCount > 99 ? '99+' : cartCount }}</text>
						</view>
					</view>
					<text class="fs-20 app-fc-main">购物车</text>
				</view>
			</view>
			<view class="flex-row-start opt-btns">
				<view class="flex-center fs-30 app-fc-white  opt-btn opt-btn-cart" @click="addToCart">
					加入购物车
				</view>
				<view class="flex-center fs-30 app-fc-white  opt-btn" @click="goBuy">
					立即购买
				</view>
			</view>
		</view>

		<add-goods-modal v-if="showModal" :optText="type === 'cart' ? '加入购物车' : '立即购买'" :data="details"
			@optAction="optAction" @change="(val) => (showModal = val)" />

		<contact-modal v-if="showConcactModal" @close="showConcactModal = false" />
	</view>
</template>

<script>
	import {
		addCart,
		getGoodsDetail,
		collectShop,
		getCartList
	} from "@/api/shop";

	import {
		imgPrefix
	} from '@/utils/common';


	import RemarkItem from "@/components/goods/RemarkItem.vue";
	import AddGoodsModal from "@/components/goods/AddGoodsModal.vue";
	import ContactModal from "@/components/ContactModal.vue";
	import {
		getRemarkList
	} from "../../../api/shop";
	import {
		jumpToWeChat,
		showLoginConfirmModal
	} from "@/utils/common";

	export default {
		components: {
			RemarkItem,
			AddGoodsModal,
			ContactModal,
		},
		data() {
			return {
				imgPrefix,
				bannerIndex: 0,
				picList:[],
				bannerList: [],
				details: {},
				showModal: false,
				type: "", // cart/gobuy
				goodId: "",
				showConcactModal: false,
				remarkList: [],
				petOrderId: "",
				petOrderAddressId: "",
				selectedSpec: "", // 已选规格
				cartCount: 0, // 购物车商品数量
			};
		},
		computed: {
			minPrice() {
				let minPrice = {};
				let minPriceValue = 0;
				(this.details?.price_list || []).map((v) => {
					if (!minPriceValue || minPriceValue > +v.price) {
						minPriceValue = +v.price;
						minPrice = {
							...v
						};
					}
				});
				return minPrice;
			},
			labelList() {
				return (this.details?.label || "").split(",").filter((v) => !!v);
			},
			sliverFee() {
				return +this.details?.yunfei || 0;
			},
		},
		onLoad(options) {
			this.product_id =  options.product_id 
			// console.log(this.product_id ,'??')
			const {
				id,
				petOrderId = "",
				petOrderAddressId = ""
			} = options;
			this.goodId = id;
			this.petOrderId = petOrderId;
			this.petOrderAddressId = petOrderAddressId;
			this.getDetails(this.product_id);
			// this.getRemarkListData();
			this.getCartCount();
		},
		onShow() {
			// 页面显示时更新购物车数量
			this.getCartCount();
		},
		methods: {
			jumpToWeChat,
			// 跳转购物车
			jumpToCart() {
				uni.redirectTo({
					url: '/pages/client/cart/index'
				});
			},
			// 获取购物车数量
			getCartCount() {
				getCartList({
					p: 1,
					num: 999
				}).then((res) => {
					const cartList = res?.info || [];
					// 计算购物车商品总数量
					this.cartCount = cartList.reduce((total, item) => {
						return total + (item.number || 0);
					}, 0);
				}).catch(() => {
					this.cartCount = 0;
				});
			},
			// 获取商品详情
			getDetails(id) {
				getGoodsDetail({
					product_id: Number(id) 
				}).then((res) => {
					this.details = res.data || {};
					// console.log(this.details,'--')
					this.picList = res.data?.prices
					// console.log(this.picList,'??')
					this.bannerList = this.details?.pic_list || [];
					// 默认选择第一个规格
					this.setDefaultSpec();
				});
			},
			// 设置默认规格
			setDefaultSpec() {
				const priceList = this.details?.price_list || [];
				const shuxingList = this.details?.shuxing_list || [];

				if (priceList.length > 0) {
					const firstPrice = priceList[0];
					const firstShuxing = shuxingList.length > 0 ? shuxingList[0] : null;

					// 使用 price_name 或 shuxing_name
					const specName = firstPrice.price_name || firstShuxing?.name || "";
					this.selectedSpec = specName ? `${specName}*1` : "";
				}
			},
			// 获取评论列表
			// getRemarkListData() {
			// 	getRemarkList({
			// 		p: 1,
			// 		num: 1,
			// 		type: 1,
			// 		guanlian_id: this.goodId
			// 	}).then(
			// 		(res) => {
			// 			this.remarkList = res?.info || [];
			// 		}
			// 	);
			// },
			// 跳转评论列表
			jumpToRemark() {
				uni.navigateTo({
					url: `/pages/client/remark/list?shopId=${this.goodId}`,
				});
			},
			bannerChange(e) {
				this.bannerIndex = e.detail.current;
			},
			addToCart() {
				const {
					goods_id,
					price_list,
					shuxing_list
				} = this.details;
				// 只有一个规格时，直接加入购物车
				// if (price_list?.length === 1 && shuxing_list.length === 1) {
				//   this.addCartAction({
				//     goods_id,
				//     price_id: price_list?.[0]?.price_id,
				//     number: 1,
				//     shuxing_name: shuxing_list?.[0]?.name,
				//   });
				//   return;
				// }
				this.showModal = true;
				this.type = "cart";
			},
			// 加入购物车
			addCartAction({number}) {
				const data = {
				item_id:this.details.id,
				item_type:this.details.type,
				price_id:this.details.prices[0].id,
				price_desc:this.details.prices[0].price_desc,
				item_name:this.details.product_name,
				item_price:this.details.prices[0].actual_price,
				number:number,
				item_pic:this.details.product_pic,
				is_select:1,
				property:this.details.property_name,
				}
				// console.log(this.details,'??')
				addCart(data).then(() => {
						uni.showToast({
							title: "已加入购物车！",
							icon: "none"
						});
						this.showModal = false;
						// 更新购物车数量
						this.getCartCount();
					})
					.catch((err) => {
						uni.showToast({
							title: err || "加入购物车失败！",
							icon: "none"
						});
					});
			},
			optAction({ goods_id, shuxing_name, price_id, number}) {
				
				// if (kucun <= 0) {
				// 	uni.showToast({
				// 		title: "该商品已售罄",
				// 		icon: "none",
				// 	});
				// 	return;
				// }
				// 更新已选规格显示
				const priceInfo = (this.details?.price_list || []).find(
					(v) => v.price_id === price_id
				);
				if (priceInfo) {
					this.selectedSpec = `${priceInfo.price_name || shuxing_name}*${number}`;
				}
				if (this.type === "cart") {
					// 加入购物车
					this.addCartAction({
						goods_id,
						price_id,
						number,
						shuxing_name,
					});
				} else {
					// 立即购买
					this.jumpToOrder({
						goods_id,
						shuxing_name,
						price_id,
						number
					});
				}
			},
			// 显示规格选择modal
			showSpecModal() {
				this.showModal = true;
				this.type = "cart";
			},
			goBuy() {
				const {
					goods_id,
					price_list,
					shuxing_list
				} = this.details;
				// 只有一个规格时，直接加入购物车
				// if (price_list?.length === 1 && shuxing_list.length === 1) {
				//   this.jumpToOrder({ goods_id, shuxing_name, price_id, 1 })
				//   return;
				// }
				this.showModal = true;
				this.type = "gobuy";
			},
			// 立即购买
			jumpToOrder({
				goods_id,
				shuxing_name,
				price_id,
				number
			}) {
				uni.navigateTo({
					url: `/pages/client/order/create`,
					success: (res) => {
						// 通过eventChannel向被打开页面传送数据
						const priceInfo = (this.details?.prices || []).find(
							(v) => price_id === v.id
						);
						res.eventChannel.emit("createOrder", {
							goodList: [{
								...this.details,
								goods_id,
								shuxing_name,
								price_id,
								number,
								goods_name: this.details.goods_name,
								price_name: priceInfo?.price_name,
								goods_price: +((priceInfo?.actual_price / 100) * number).toFixed(2),
							}, ],
						});
					},
				});
			},
			// 收藏
			async collectAction() {
				const token = uni.getStorageSync('token');
				if (!token) {
					const willLogin = await showLoginConfirmModal();
					if (!willLogin) return;
					return;
				}
				collectShop({
						goods_id: this.details.goods_id,
						type: this.details.shoucang_id ? 2 : 1,
					})
					.then(() => {
						this.getDetails();
					})
					.catch((err) => {
						uni.showToast({
							title: err || "收藏失败！",
							icon: "none"
						});
					});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.shop-details-container {
		height: 100%;
		position: relative;

		.banner-swiper {
			position: relative;
			width: 100%;
			height: 750rpx;

			.swiper-wrapper {
				width: 100%;
				height: 750rpx;

				.swiper-img {
					width: 100%;
					height: 100%;
					border-radius: 40rpx;
				}
			}

			.dot-box {
				position: absolute;
				bottom: 30rpx;
				left: 0;
				width: 100%;

				.dot-item {
					width: 12rpx;
					height: 12rpx;
					border-radius: 12rpx;
					background: rgba(255, 255, 255, 0.6);
					margin-right: 12rpx;

					&.active {
						width: 28rpx;
						height: 12rpx;
						background: #ffffff;
					}
				}
			}
		}

		.good-info {
			margin: 20rpx;

			.info-cell {
				background: #fff;
				border-radius: 20rpx;
				padding: 20rpx;
				margin-bottom: 20rpx;
			}

			.origin-price {
				color: #726e71;
				text-decoration: line-through;
				margin-left: 18rpx;
				line-height: 44rpx;
			}

			.good-name {
				margin-top: 16rpx;
			}

			.sale-btn {
				padding: 6rpx 12rpx;
				background: $app_color_main;
				border-radius: 4rpx;
				border: 1rpx solid $app_color_main;
				margin-right: 12rpx;
				margin-bottom: 24rpx;

				&.sale-today {
					background: transparent;
				}
			}

			.postage-info {
				color: #9b939a;
				margin-right: 32rpx;
			}

			.arrow-icon {
				width: 11rpx;
				height: 18rpx;
				margin-left: 20rpx;
			}

			.shipping-info-cell {
				.selected-row {
					display: flex;
					align-items: center;
					margin-bottom: 24rpx;
					cursor: pointer;

					.selected-label {
						font-size: 24rpx;
						color: #999;
						margin-right: 12rpx;
					}

					.selected-value {
						flex: 1;
						font-size: 24rpx;
						color: #3D3D3D;
					}

					.arrow-right-icon {
						width: 11rpx;
						height: 18rpx;
						flex-shrink: 0;
					}
				}

				.shipping-row {
					display: flex;
					align-items: center;
					margin-bottom: 24rpx;

					.shipping-label {
						font-size: 24rpx;
						color: #999;
						margin-right: 12rpx;
					}

					.shipping-value {
						font-size: 24rpx;
						color: #3D3D3D;
					}
				}

				.service-features {
					background: #F5F5F5;
					border-radius: 12rpx;
					padding: 12rpx 20rpx;
					display: flex;
					align-items: center;
					border-radius: 339px;

					.feature-item {
						display: flex;
						align-items: center;


						.mallPng {
							width: 20rpx;
							height: 20rpx;
						}



						.feature-text {
							font-size: 20rpx;
							color: #3D3D3D;
							margin-left: 4rpx;
						}
					}
				}
			}

			.remark-list {
				border-top: 2rpx solid #ebebeb;
				margin-top: 36rpx;

				::v-deep {
					.remark-item {
						width: 100%;
						margin: 0;
						padding: 40rpx 0;
					}
				}
			}
		}

		.rich-text-title {
			margin: 32rpx 0 24rpx;
			text-align: center;
		}

		.rich-text-content {
			background: #fff;
			padding: 24rpx;
		}

		.place-view {
			height: 190rpx;
		}

		.details-bottom {
			position: fixed;
			bottom: 0;
			padding-bottom: 20rpx;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			padding-top: 20rpx;
			padding-left: 40rpx;
			padding-right: 36rpx;
			left: 0;
			width: 100vw;
			background: #fff;
			box-sizing: border-box;

			.opt-item {
				&.service {
					margin-left: 36rpx;
				}

				.opt-icon {
					width: 33rpx;
					height: 33rpx;
					margin-bottom: 8rpx;
				}

				&.cart-item-wrapper {
					.cart-icon-wrapper {
						position: relative;
						display: inline-block;
					}

					.cart-badge {
						position: absolute;
						top: -16rpx;
						right: -16rpx;
						min-width: 32rpx;
						height: 32rpx;
						background: #FF19A0;
						border-radius: 16rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 0 8rpx;
						box-sizing: border-box;

						.cart-badge-text {
							color: #FFFFFF;
							font-size: 20rpx;
							font-weight: 500;
							line-height: 1;
						}
					}
				}
			}

			.opt-btns {
				width: 376rpx;
				height: 76rpx;
				border-radius: 92rpx;
				overflow: hidden;


				.opt-btn {
					width: 188rpx;
					height: 100%;
					background: $app_color_main;
					font-size: 28rpx;

					&.opt-btn-cart {
						background: #F8C142;
					}
				}
			}
		}
	}

	.label {
		background-color: #ffecf3;
		display: inline-flex;
		border-radius: 4rpx;


		.hot-icon {
			width: 28rpx;
			height: 28rpx;
		}

		.label-name {
			padding: 4rpx;
			color: #FF19A0;
		}
	}
</style>