<template>
	<view>
		<view class="shop">
			<view>
				<u-swiper :list="goods.goods_image" name="uri" height="500" border-radius="0" mode="number"
					indicator-pos="bottomRight"></u-swiper>
			</view>

			<view class="bg-white mx24 px24 u-m-t-24 u-padding-top-20 u-padding-bottom-20 br24">
				<view class="nr">{{ goods.name }}</view>
				<view class="mt10 row u-row-between">
					<view class="row">
						<view class="primary">
							<price-format :price="goods.min_price" :subscriptSize="22" :firstSize="34"
								:secondSize="26"></price-format>
						</view>
						<view class="sale u-text-center primary u-m-l-12">0折</view>
						<view class="primary u-m-l-12">
							<price-format :lineThrough="true" color="#999" :subscriptSize="22" :firstSize="22"
								:secondSize="22" :price="goods.market_price"></price-format>
						</view>
					</view>
					<view class="text-999">已售66</view>
				</view>

				<view class="u-m-t-20 u-m-b-20">
					<u-line color="#eee" />
				</view>
				<view>
					<view>
						<text>须知</text>
						<text class="text-999 ml20">周一至周日可用</text>
					</view>

					<view class="row-between mt20">
						<view>
							<text>保障</text>
							<text class="text-999 ml20">随时退 过期自动退</text>
						</view>
						<view>
							<u-button @click="openSpec" hover-class="none"
								:customStyle="{ width: '116rpx', height: '46rpx', lineHeight: '46rpx', fontSize: '24rpx', backgroundColor: themeColor, color: '#fff', border: 'none', paddingTop: '8rpx' }"
								:hair-line="false" shape="circle">
								选规格
							</u-button>
						</view>
					</view>
				</view>
			</view>

			<view class="u-m-t-24">
				<view class="u-m-l-48 nr">详情</view>
				<view class="bg-white mx24 px24 u-m-t-24 u-p-t-20 u-p-b-20 br24">
					<u-image :src="cloudPath + 'img/banner.png'" height="600"></u-image>
				</view>
			</view>

			<view class="u-m-t-24">
				<view class="u-m-l-48 nr">购买须知</view>
				<view class="bg-white mx24 px24 u-m-t-24 u-p-t-20 u-p-b-20 br24">
					这里是购买须知的内容
				</view>
			</view>
		</view>

		<view class="fixed bg-white row-between px48 u-p-t-20 u-p-b-20">
			<view class="column u-text-center u-relative" @click="addCartFun">
				<view class="row-center">
					<!-- <u-image src="/static/tabbar/tab_cart.png" width="48" height="48"></u-image> -->
					<u-icon name="shopping-cart" size="48" color="#254062"></u-icon>
				</view>
				<view>购物车</view>
				<view class="u-absolute top-0 right-0 text-fff number u-text-center xxs" v-if="cartNum">
					{{ cartNum }}
				</view>
			</view>
			<view class="u-m-l-64 flex1">
				<u-button hover-class="none" @click="showSpecFun"
					:customStyle="{ height: '92rpx', fontSize: '24rpx', backgroundColor: themeColor, color: '#fff', border: 'none', paddingTop: '8rpx' }"
					:hair-line="false" shape="circle">
					立即购买
				</u-button>
			</view>
		</view>

		<shop-spec v-model="showSpec" :name="goods.name" :goods="goods" @confirm="confirmSpec"
			@buynow="onBuy"></shop-spec>
	</view>
</template>

<script>
import {
	mapActions,
	mapGetters
} from 'vuex';
import {
	getGoodsDetail,
	getCartList,
	addCart,
	getPoster,
	getCartNum
} from '@/api/store'
import {
	toLogin
} from '@/utils/login'

export default {
	data() {
		return {
			id: 0,
			showSpec: false,
			goods: [],
			spec: [],
			checkedGoods: {},
			source: '',
			cartLists: [],
			totalPrice: 0,
			showPopup: false,
		}
	},

	onLoad(options) {
		console.log("🚀 ~ onLoad ~ options:", options)
		this.id = options.id
		this.showPopup = options.showPopup === 'true' ? true : false
		this.showSpec = this.showPopup
	},

	onUnload() {
		uni.$emit('refreshCartList');
	},

	onShow() {
		this.getGoodsDetailFun();
		this.getCartNum()
		this.getCartListFun()
	},

	methods: {
		...mapActions(['getCartNum']),

		// 获取商品详情
		async getGoodsDetailFun() {
			const {
				data,
				code
			} = await getGoodsDetail({
				id: this.id
			});
			if (code == 1) {
				this.goods = data
				console.log(this.goods.goods_image);
			}
		},

		// 获取购物车列表数据
		getCartListFun() {
			// 获取商品的分类ID
			getCartList().then((res) => {
				if (res.code == 1) {
					let {
						lists,
						total_amount
					} = res.data;
					this.cartLists = lists;
					// // let cartType = 0;

					// // if (lists.length == 0) {
					// // 	cartType = 2;
					// // } else {
					// // 	cartType = 1;
					// // }

					// this.cartLists = list;
					// console.log(">>>", this.cartLists);

					// // this.cartType = cartType;
					this.totalPrice = total_amount
					// // this.isShow = true;
					this.getCartNum();
				}
			});
		},

		// 将当前的商品添加到购物车里面
		addCartFun() {
			this.showSpec = true
		},

		// 打开商品规格
		openSpec() {
			this.showSpec = true
		},

		// 获取选择的商品规格
		confirmSpec(data) {
			console.log("data>>>", data.spec);
			this.spec = data.spec
			this.showSpec = false
		},

		onChangeGoods(e) {
			console.log(e);
			this.checkedGoods = e.detail;
		},

		// 选择规格
		showSpecFun() {
			if (!this.isLogin) return toLogin();
			this.showSpec = true;
		},

		// 购买商品
		onBuy(e) {
			if (e.type === 'cart') {
				let { id, goodsNum } = e.detail
				addCart({
					item_id: id,
					goods_num: goodsNum
				}).then(res => {
					if (res.code == 0) {
						this.$toast({
							title: res.msg
						});
						return;
					}

					this.getCartListFun()
					if (this.showPopup) {
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/store/store'
							});
						}, 300);
					} 
					this.showSpec = false
				});
			} else {
				let { id, goodsNum } = e.detail
				let goods = [{ item_id: id, num: goodsNum }]
				const params = { goods }
				this.showSpec = false
				uni.navigateTo({
					url: '/pages/order_now/order_now?data=' + encodeURIComponent((JSON.stringify(params)))
				})
			}
		}
	},
	computed: {
		...mapGetters(['cartNum']),
	},
}
</script>

<style lang="scss">
.shop {
	padding-bottom: 180rpx;

	.sale {
		background-color: #FEFBEA;
		width: 100rpx;
		height: 30rpx;
		line-height: 30rpx;
	}
}

.fixed {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding-bottom: env(safe-area-inset-bottom);
}

.number {
	background-color: #FF2C3C;
	width: 40rpx;
	height: 40rpx;
	line-height: 40rpx;
	border-radius: 100%;
}
</style>