<template>
	<view class="goods">
		<!-- 返回按钮 -->
		<wd-navbar fixed :bordered="false" left-arrow custom-style="background-color: transparent !important;" safeAreaInsetTop @click-left="back"></wd-navbar>
		<wd-swiper height="750rpx" :list="goods.images" autoplay v-model:current="current">
			<template #indicator="{ current, total }">
				<view class="custom-indicator">{{ current + 1 }}/{{ total }}</view>

				<view class="goods_sals">销量{{ goods.sales }}</view>
			</template>
		</wd-swiper>
		<view style="height: 35rpx"></view>
		<view class="goods_block">
			<view>
				<view class="goods_block_tit">{{ goods.name }}</view>
				<view class="goods_block_stock">库存{{ goods.stock }}</view>
			</view>
			<view style="margin-top: 20rpx">
				<view class="goods_block_spec">{{ goods.specs }}</view>
				<view class="goods_block_price">￥{{ goods.currentPrice }}</view>
			</view>
		</view>
		<view style="font-weight: bold; font-size: 30rpx; color: #232323; margin: 30rpx 0 25rpx; text-align: center">商品详情</view>

		<view style="background-color: #fff">
			<mp-html :content="goods.detail" />
			<!-- <rich-text :nodes="goods.detail"></rich-text> -->
		</view>

		<view style="height: 145rpx"></view>

		<view
			style="
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 35rpx 60rpx;
				position: fixed;
				bottom: 0;
				left: 0;
				background-color: #fff;
				border-radius: 24rpx 24rpx 0 0;
				width: 100%;
			"
		>
			<view style="display: flex; align-items: center; font-size: 24rpx">
				<button style="margin-right: 24rpx" open-type="share">
					<image style="width: 40rpx; height: 40rpx" src="/static/icons/fx.png"></image>
					<view>分享</view>
				</button>
				
				
				
				<button open-type="contact">
					<image style="width: 40rpx; height: 40rpx" src="/static/icons/goodkf.png"></image>
					<view>客服</view>
				</button>
			</view>
			<view
				style="
					width: 468rpx;
					height: 70rpx;
					background: #ffffff;
					border-radius: 12rpx;
					border: 1rpx solid #5d7a4e;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: bold;
					font-size: 28rpx;
					color: #5d7a4e;
				"
				@click="toConfirm"
			>
				立即购买
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import api from '@/api/index';
import { useNav } from '@/hooks/useNav';
const { navTo } = useNav();

const current = ref<number>(0);
const swiperList = ref(['https://wot-ui.cn/assets/redpanda.jpg', 'https://wot-ui.cn/assets/capybara.jpg']);

const goods = ref({});

interface optionsType {
	id: string;
}

onLoad((options: any) => {
	api.goodsInfo({ id: options.id }).then((res: any) => {
		goods.value = res;
	});
});

const toConfirm = () => {
	navTo(`/pages/order/confirm?id=${goods.value.id}`, true);
};

const back = () => {
	uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.goods {
	--wot-swiper-radius: 0;

	&_sals {
		width: 166rpx;
		height: 44rpx;
		background: #ffffff;
		border-radius: 46rpx 0rpx 0rpx 46rpx;
		opacity: 0.5;
		position: absolute;
		bottom: 30rpx;
		right: 0;
		font-weight: 400;
		font-size: 24rpx;
		color: #232323;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	&_block {
		margin: auto;
		width: 690rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 6rpx 2rpx rgba(22, 22, 23, 0.07);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 24rpx;
		view {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		&_tit {
			font-weight: bold;
			font-size: 32rpx;
			color: #232323;
		}
		&_stock {
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}
		&_spec {
			font-weight: bold;
			font-size: 24rpx;
			color: #232323;
		}
		&_price {
			font-weight: bold;
			font-size: 38rpx;
			color: #ff2929;
		}
	}
}
.custom-indicator {
	width: 52rpx;
	height: 52rpx;
	background: #ffffff;
	border-radius: 6rpx 6rpx 6rpx 6rpx;
	opacity: 0.5;
	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 24rpx;
	color: #232323;

	position: absolute;
	top: 170rpx;
	right: 24rpx;
}

button {
	all: unset;
}
button::after {
	all: unset;
}
</style>
