<template>
	<view class="goods-detail">
		<!-- 轮播图 -->
		<view class="wrap">
			<u-swiper
				:list="detailData?.info.gallery ? detailData?.info.gallery : []"
				img-mode="scaleToFill"
				height="800"
			></u-swiper>
		</view>

		<!-- 商品详情 -->
		<view class="goods-info">
			<uni-row>
				<uni-col :span="24">
					<text class="goods-title">{{ detailData?.info.name }}</text>
				</uni-col>
			</uni-row>
			<uni-row style="margin: 4rpx 0 10rpx;">
				<uni-col :span="24">
					<text class="goods-sub">{{ detailData?.info.brief }}</text>
				</uni-col>
			</uni-row>
			<uni-row>
				<uni-col :span="5">
					<!-- <text class="goods-price">
						<text class="unit">￥</text>
						<text class="price">{{ detailData?.info.counterPrice.toFixed(2) }}</text>
					</text> -->
				</uni-col>
				<!-- <uni-col :span="3" style="margin-top: 18rpx; margin-left: 20rpx;">
					<text class="goods-cost-price">
						<text class="unit">￥</text>
						<text class="price">{{ detailData?.info.counterPrice.toFixed(2) }}</text>
					</text>
				</uni-col> -->
			</uni-row>
		</view>

		<u-cell-group style="margin-top: 20rpx;">
			<u-cell-item
				v-if="!selectedGoodsItem"
				icon=""
				title="规格"
				value="请选择"
				:index="0"
				@tap="clickGroup"
			></u-cell-item>
			<u-cell-item
				v-else
				icon=""
				title="规格"
				:value="'已选：' + selectedGoods"
				:arrow="false"
				:index="0"
				@click="clickGroup"
			/>
			<u-cell-item icon="" title="属性" :index="1" @tap="clickGroup" />
		</u-cell-group>

		<view class="goods-intro">
			<uni-segmented-control
				:current="current"
				:values="tabButtons"
				@clickItem="onClickItem"
				styleType="text"
				activeColor="#e43d33"
			></uni-segmented-control>
			<view class="content">
				<view v-show="current === 0">
					<u-parse
						v-if="detailData?.info.detail || detailData?.info.detail != '<p></p>'"
						:html="detailData?.info.detail"
						show-with-animation
						lazy-load
						selectable
					/>
					<u-empty v-else text="暂无数据" mode="data" />
				</view>
				<view v-show="current === 1">选项卡2的内容</view>
			</view>
		</view>
		<!-- 提交订单栏 -->
		<view class="bottom-bar">
			<uni-goods-nav
				:fill="true"
				:options="options"
				:button-group="buttonGroup"
				@click="onClick"
				@buttonClick="buttonClick"
			/>
		</view>

		<!-- 属性弹窗 -->
		<u-popup v-model="attrPopup" mode="bottom" height="50%" closeable>
			<view class="attr-content">
				<view class="title">商品属性</view>
				<view v-if="attributeData.length !== 0">
					<u-row v-for="(item, index) in attributeData" :key="item.id">
						<u-col :span="4">
							<view class="left">{{ item.attribute }}</view>
						</u-col>
						<u-col :span="8">
							<view class="right">{{ item.value }}</view>
						</u-col>
						<u-line v-show="attributeData.length - 1 !== index" />
					</u-row>
				</view>
				<view v-else><u-empty text="暂无属性" mode="data" /></view>
			</view>
		</u-popup>
	</view>

	<goodsSku
		ref="goodsSkuRef"
		:cartId="cartId"
		@selected="selected"
		@partsClose="partsClose"
	></goodsSku>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import {
	indexDetails,
	collectAddordelete,
	goodsParts,
	orderAttribute
} from '@/api/index';
import goodsSku from './goodsSku'

const goodsSkuRef = ref()
const attrPopup = ref(false);
const detailData: any = ref();
const partsData = ref();
const tabButtons = ref(['商品详情']);
let current = ref(0);
let attributeData = ref([] as any)

const goodsInfo = ref({
	id: 1,
	star: true,
});

const options = ref([{
		icon: goodsInfo.value.star ? 'star-filled' : 'star',
		text: '收藏'
	}]);

const buttonGroup = ref([
	{
		text: '购买',
		backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
		color: '#fff'
	}
]);

const detailId = ref()
const cartId = ref() // 判断是否从购物车进去修改购物车信息的购物车Id

onLoad((options: any) => {
	if(typeof options.cartId !== 'undefined') cartId.value = options.cartId
	detailId.value = options.id
	// 在结算中返回时使用
	uni.setStorage({
		key: 'detailId',
		data: options.id
	})
	initDetails(options.id)
	initParts(options.id)
});

let selectedGoodsItem = ref()
let selectedGoodsSum = ref()

// 选择规格展示
let selectedGoods = computed(() => {
	if(selectedGoodsItem.value.length > 0) {
		let str = ''
		selectedGoodsItem.value.forEach((item: any, i: number) => {
			if(i == 0) {
				str += item
			} else {
				str += (' * ' + item)
			}
		})
		return str + ' * ' + selectedGoodsSum.value
	} else return ''
})

const selected = (data: any) => {
	selectedGoodsItem.value = data[0]
	selectedGoodsSum.value = data[1]
	let productId;
	detailData.value?.productList.forEach((item: any) => {
		// 判断是否相等
		if(item.specifications.length === data[0].length) {
			let bool = true
			item.specifications.forEach((res: any) => {
				if(data[0].indexOf(res) == -1) bool = false
			})
			if(bool) productId = item.id
			bool = true
		}
	})
	if(productId) initAttribute(productId)
	else attributeData.value = null

}

// 点击分组
const clickGroup = (index: number) => {
	switch (index) {
		case 0:
			buttonClick()
			break;
		case 1:
			attrPopup.value = true;
	}
};

// 设置收藏
const onClick = (e: any) => {
	if (e.index === 0) {
			let data = {
				type: 0,
				valueId: Number(detailId.value)
			}
			collectAddordelete(data).then((res: any) => {
				if(res.data.code === 200) {
					goodsInfo.value.star = !goodsInfo.value.star;
					e.content.icon = goodsInfo.value.star ? 'star-filled' : 'star';
					let text = '';
					text = goodsInfo.value.star ? '已收藏' : '已取消收藏';
					uni.showToast({
						title: text,
						icon: 'none'
					});
				}
			})

	}
};

// 打开sku
const buttonClick = () => {
	goodsSkuRef.value.init(detailData.value, detailId.value, partsData.value)
	goodsSkuRef.value.skuKey = true
};


// 还原配件信息数据
const partsClose = () =>{
	partsData.value.forEach((item: any) => {
		item.show = false
	})
}

// 选择选项卡
const onClickItem = (e: any) => {
	if (current.value != e.currentIndex) {
		current.value = e.currentIndex;
	}
};

const initAttribute = (productId: number) => {
	orderAttribute({ productId }).then((res: any) => {
		if(res.data.code === 200) {
			attributeData.value = res.data.data
			console.log('Attribute', res);
		}
	})
}

// 初始化商品详情数据
const initDetails = (id: number) => {
	indexDetails({
		id
	}).then((res: any) => {
		if (res.data.code === 200) {
			// 设置收藏
			if(res.data.data.userHasCollect == 1) {
				goodsInfo.value.star = true
				options.value[0].icon = 'star-filled'
			} else {
				goodsInfo.value.star = false
				options.value[0].icon = 'star'
			}
			// 去除数据 换行符
			for (let s in res.data.data?.attribute) {
				const value = res.data.data?.attribute[s].value.split('\n')
				if (value.length > 1) {
					let str: string = ''
					value.forEach((item: string) => {
						str += ' ' + item
					})
					res.data.data!.attribute[s].value = str
				}
			}
			// 清除 富文本图片空隙
			res.data.data.info.detail = res.data.data.info.detail.replace(/<img/g,"<img style='display: block'")
			res.data.data.info.detail = res.data.data.info.detail.replace(/<video/g,"<video preload='auto'")
			detailData.value = res.data.data;
			// console.log(detailData.value, '商品详情数据');
		}
	});
}

// 获取商品配件
const initParts = (id: number) => {
	goodsParts({ goodsId: id }).then((res: any) => {
		if(res.data.code === 200) {
			res.data.data.forEach((item: any) => {
				item['show'] = false
			})
			partsData.value = res.data.data
		}
	})
}
</script>

<style lang="scss" scoped>
.goods-detail {
	.goods-img {
		:deep(.swiper) {
			margin-top: 200px;
			height: 400rpx;

			.swiper-item {
				display: block;
				height: 100%;
				line-height: 600rpx;
				text-align: center;

				.banner {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.goods-info {
		//height: 200rpx;
		background-color: #ffffff;
		padding: 20rpx 30rpx;
		font-family: arial, sans-serif;
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;

		.goods-title {
			font-size: 16px;
			font-weight: bold;
			display: -webkit-box;
			word-break: break-all;
			text-overflow: ellipsis;
			overflow: hidden;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}

		.goods-sub {
			font-size: 12px;
			color: #ccc;
			display: -webkit-box;
			word-break: break-all;
			text-overflow: ellipsis;
			overflow: hidden;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}

		.goods-price {
			color: #dd524d;
			//position: absolute;
			font-size: 40rpx;
			display: flex;

			.unit {
				// font-size: 10px;
			}

			.price {
				// font-size: 16px;
				font-weight: bold;
			}
		}

		.goods-cost-price {
			color: #ccc;
			text-decoration: line-through;
			font-size: 24rpx;
			margin-left: 10rpx;
		}
	}

	.cell-group {
		margin-top: 20rpx;
		border-radius: 30rpx;
	}

	.goods-detail-item {
		margin-top: 20rpx;
		background-color: #ffffff;
		// padding: 20rpx 30rpx;
		font-size: 30rpx;
		font-family: arial, sans-serif;
		color: rgb(192, 192, 192);
		// border-radius: 30rpx;

		.popup-selected-spec {
			height: 800rpx;
			//background-color: #FFFFFF;

			.goods-item {
				padding: 40rpx;
				display: flex;
				border-bottom: 1px solid #ebeef5;

				//position: absolute;
				.goods-mini-img {
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
					//border: 2rpx soild black;
				}

				.goods-text {
					margin-top: 10rpx;
					margin-left: 50rpx;

					.goods-price {
						color: #dd524d;
						display: flex;

						.unit {
							font-size: 10px;
						}

						.price {
							font-size: 16px;
							font-weight: bold;
						}
					}

					.goods-selected {
						margin-top: 20rpx;
						display: flex;
					}
				}
			}

			.goods-spec {
				margin-left: 30rpx;
			}
		}

		.popup-bottom-button {
			height: 80rpx;
			display: flex;
			flex: 1;
			color: rgb(255, 255, 255);

			.add-to-cart {
				display: flex;
				flex: 1;
				margin: 0 30rpx 0 50rpx;
				justify-content: center;
				align-items: center;
				overflow: hidden;
				border-radius: 50rpx;
				background: linear-gradient(90deg, rgb(255, 205, 30), rgb(255, 138, 24));
			}

			.buy-now {
				display: flex;
				flex: 1;
				margin: 0 50rpx 0 30rpx;
				justify-content: center;
				align-items: center;
				overflow: hidden;
				border-radius: 50rpx;
				background: linear-gradient(90deg, rgb(254, 96, 53), rgb(239, 18, 36));
			}
		}
	}

	.shop-info {
		height: 160rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
		border-radius: 30rpx;
		display: flex;

		.shop-logo-box {
			padding: 30rpx;
			height: 100rpx;
			width: 100rpx;
			border-radius: 10rpx;
			overflow: hidden;

			.shop-logo {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.shop-desc {
			flex: 1;

			.shop-name {
				font-weight: bold;
				font-family: 'Helvetica Neue', Helvetica, sans-serif;
				line-height: 160rpx;
			}
		}

		.shop-enter-button {
			line-height: 160rpx;
			padding-right: 30rpx;

			text {
				color: rgb(255, 138, 24);
				font-size: 24rpx;
				padding: 5rpx 15rpx;
				border: 1rpx solid rgb(254, 96, 53);
				border-radius: 10rpx;
			}
		}
	}

	.goods-intro {
		//height: 160rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
		border-radius: 30rpx;

		.content {
			width: 100%;
			margin-top: 30rpx;
			margin-bottom: calc(100rpx + env(safe-area-inset-bottom));
			display: inline-block;
		}
	}

	.bottom-bar {
		display: flex;
		flex-direction: column;
		position: fixed;
		left: var(--window-left);
		right: var(--window-right);
		bottom: 0;
		z-index: 99;
		padding-bottom: constant(safe-area-inset-bottom);
		background-color: #ffffff;
		padding-bottom: env(safe-area-inset-bottom);
	}
}

.attr-content {
	padding: 32rpx 40rpx;

	.title {
		text-align: center;
		margin-bottom: 50rpx;
	}

	.left {
		padding: 20rpx 0;
		// overflow: hidden;
		// text-overflow: ellipsis; /* 超出部分省略号 */
		// word-break: break-all; /* break-all(允许在单词内换行。) */
		// display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
		// -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
		// -webkit-line-clamp: 2; /* 显示的行数 */
		// max-height: 80rpx; /* 设置最大高度，根据行高，要几行乘以几倍 */
	}

	.right {
		padding: 20rpx 0;
		font-weight: 600;
		// overflow: hidden;
		// text-overflow: ellipsis; /* 超出部分省略号 */
		// word-break: break-all; /* break-all(允许在单词内换行。) */
		// display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
		// -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
		// -webkit-line-clamp: 2; /* 显示的行数 */
		// max-height: 80rpx; /* 设置最大高度，根据行高，要几行乘以几倍 */
	}
}

:depp(uni-movable-view > img) {
	width: 50%;
	z-index: 99;
}
</style>
