<script setup>
	/**
	 * 商品详情
	 */

	import {
		ref,
		reactive,
		nextTick,
		getCurrentInstance,
		computed,
		onMounted,
		onUnmounted,
		defineProps,
	} from 'vue'
	import {
		useStore
	} from 'vuex'
	// 接口地址
	import api from '@/api/index.js'
	// 
	import util from '@/common/js/util.js'
	// 富文本处理
	import parseRichText from '@/components/public/parse/parse.vue'

	const {
		proxy
	} = getCurrentInstance()
	// 传参
	const props = defineProps({
		id: {
			type: [Number, String],
			default: ''
		},
		detail: {
			type: Object,
			default: {}
		},
	})
	// 是否礼包商品
	const giftPack = computed(() => props.detail.categoryCode?.startsWith('GIFT_PACK'))
	// 在这里设置swiper高度补足多端差异
	const bannerHeight = ref('800rpx')
	// 轮播图详情
	const bannerIndex = ref(0)
	// 商品评论
	const comment = reactive({
		list: [],
		total: 0,
	})
	// 最近购买订单列表
	const recentOrderList = ref([])
	// 已选择的规格下标
	const spaceIndex = ref(0)
	// 数量
	const payNum = ref(1)
	// 当前选择的规格
	const currentSpec = computed(() => {
		let spec = props.detail.specs || []
		return spec[spaceIndex.value] || {}
	})
	// 应付总价
	const total = computed(() => {
		let price = parseFloat(props.detail.price) * 100
		let result = parseInt(price * payNum.value) / 100
		return result
	})
	// 详情
	const banner = computed(() => {
		let result = []
		if (props.detail.sliderImage) result = props.detail.sliderImage.split(',')
		return result
	})
	// 当前登录的用户信息
	const userinfo = computed(() => uni.$store.state.userinfo)
	// 详情信息
	const infoRichText = computed(() => {
		let result = ''
		const richText = props.detail.infoRichText || ''
		if (richText) result = decodeURIComponent(escape(atob(richText)))
		return result
	})

	onMounted(() => {
		// 获取商品评论
		getProComment()
		// 获取最近购买
		getRecentOrder()
	})

	// 获取最近购买
	function getRecentOrder() {
		api.shop.recentOrder({
			query: {
				// 产品id
				productId: props.id,
			}
		}).then(rs => {
			if (rs.code == 200) {
				// 结果
				const result = rs.data
				let list = []
				// 
				for (let i = 0; i < result.length / 2; i++) {
					if (!result[i * 2 + 1]) break
					list.push([result[i * 2], result[i * 2 + 1]])
				}
				recentOrderList.value = list
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 获取商品评论
	function getProComment() {
		api.shop.getProComment({
			query: {
				// 产品id
				productId: props.id,
				pageNum: 1,
				pageSize: 2,
			}
		}).then(rs => {
			if (rs.code == 200) {
				comment.list = rs.rows
				comment.total = rs.total
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

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

	// 收藏店铺
	function handleCollectStore() {
		api.shop.followShop({
			data: {
				shopId: props.detail.merId,
				status: {
					0: 1,
					1: 0,
				} [props.detail.isFollow]
			}
		}).then(rs => {
			if (rs.code == 200) {
				// 关注状态
				props.detail.isFollow = {
					0: 1,
					1: 0,
				} [props.detail.isFollow]
				// 关注数量
				props.detail.merFollowNumber = rs.data
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 获取店铺信息
	function getShop() {
		api.shop.shopDetail({
			query: {
				shopId: props.detail.merId
			}
		}).then(rs => {
			if (rs.code == 200) {
				Object.assign(props.detail, {}, rs.data)
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}
</script>

<template>
	<!-- 轮播图 -->
	<view class="banner pr" v-if="detail.sliderImage">
		<swiper class="swiper" :style="{height: bannerHeight,}" :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="count pa ptb5 plr20 bar">
			<text class="text cfff f24">{{ bannerIndex + 1 }} / {{ banner.length }}</text>
		</view>
	</view>

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

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

		<!-- 优惠券 -->
		<view class="coupon df fdr fww f26 mtb20 cFF9B27" v-if="0">
			<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 t2hd">
			<text class="c333 f34">{{detail.name}}</text>
		</view>

		<view class="history mtb20 df fdr jcsb aic">
			<text class="c666 f28">商品修改历史</text>
			<uni-icons type="right" color="#999" size="30rpx" />
		</view>

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

	<!-- 最近购买 -->
	<view class="recently mtb20" v-if="recentOrderList[0] && !giftPack">
		<swiper class="swiper" style="height: 220rpx;" :autoplay="true" vertical="true">
			<swiper-item v-for="(item, index) in recentOrderList" :key="index">
				<view class="list plr10 bfff">
					<view class="item bsb df fdr jcsb aic plr10" v-for="(secItem, secIndex) in item" :key="secIndex">
						<view class="avatar">
							<image class="avatar wh70 cir" :src="secItem.avatar" mode="aspectFill" />
						</view>

						<view class="name f1 mlr10">
							<text class="name c666 f28">{{secItem.nickname}}</text>
						</view>
						<view class="info mlr10 tar">
							<!-- <view class="fn">刚刚下单</view> -->
							<view class="time">
								<text class="c999 f26">{{secItem.time}}</text>
							</view>
						</view>
						<view class="btn sm warm plr15">
							<text class="cfff f26">立即购买</text>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>

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

		<!-- 部分评论 -->
		<view class="list">
			<view class="item ptb20" v-for="(item, index) in comment.list" :key="index">
				<view class="userinfo df fdr aic">
					<image class="avatar wh45 cir" :src="item.avatar" mode="aspectFill" />
					<view class="name thd f32 f1 ml20">
						<text class="c666 f28">{{item.nickname}}</text>
					</view>
				</view>
				<view class="content t2hd mt10">
					<text class="c333 f28">{{item.content}}</text>
				</view>
			</view>
		</view>
	</view>

	<!-- 店铺 -->
	<view class="store df fdr aic jcsb mtb20 ptb20 plr25 bfff" v-if="!giftPack">
		<view class="header df fdr jcsb aic">
			<!-- 店铺头像 -->
			<image class="wh140 br20" :src="detail.merAvatar" mode="aspectFill" />
			<!-- 店铺信息 名称 评分 关注数量 -->
			<view class="info f1 mlr20">
				<!-- 店铺名称 -->
				<view class="name thd">
					<text class="f34 c333">{{detail.merName}}</text>
				</view>
				<view class="line df fdr 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">
						<text class=" c666 f24">{{detail.merFollowNumber}}关注</text>
					</view>
				</view>
			</view>
		</view>

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

	<!-- 宝贝详情 -->
	<view class="p25 mtb240 bfff">
		<view class="title">
			<text class="modelTitle">宝贝详情</text>
		</view>

		<!-- 商品详情 -->
		<view class="content mt30">
			<!-- <rich-text :nodes="infoRichText" v-if="infoRichText" /> -->
			<parseRichText :imageProp="{'mode': 'widthFix',}" :content="infoRichText" v-if="infoRichText" />

			<template v-if="giftPack">
				<text class="f28 mt10 cFF4242">礼包商品不支持售后</text>
			</template>
		</view>
	</view>
</template>

<style lang="scss">
	.container {
		overflow: hidden;
	}

	// 轮播图
	.banner {
		.swiper {

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

		.count {
			bottom: 20rpx;
			right: 20rpx;
			background-color: rgba(0, 0, 0, .4);

			.text {
				color: #fff;
			}
		}
	}

	// 模块标题
	.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;
			}

			.text {
				color: #999;
				font-size: 24rpx;
			}
		}
	}

	// 最近购买
	.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;
			}
		}
	}

	// 店铺
	.store {

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

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

	// 
	.editorImg {
		width: 700rpx;
		height: 400rpx;
	}
</style>