<template>
	<view class="goods-detail">
		<view>
			<!-- 商品信息 -->
			<view class="goods-head">
				<view class="goods-imgs">
					<view class="goods-staus" v-if="goodContent.inventoryQty == 0 || goodContent.delFlage == 0 || goodContent.state == 0"></view>
					<u-swiper height="325" :border-radius="15" mode="number" indicator-pos="bottomRight" :list="imageList"></u-swiper>
				</view>
				<view class="goods-name">
					<view>
						{{goodContent.name}}
					</view>
					<view>
						<text>{{goodContent.sellGold}}</text>
						<u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
					</view>
				</view>
				<view class="goods-price">
					<view>兑换数量<text>（库存{{goodContent.inventoryQty}}件）</text></view>
					<view>
						<u-number-box :max="goodContent.inventoryQty" v-model="nums"></u-number-box>
					</view>
				</view>
				<view v-if="goldLimit>0" class="goods-goldLimit">
					此商品需要满<text>{{goldLimit}}</text>乐豆才可购买
				</view>
			</view>
			<!-- 商品属性 -->
			<view class="goods-attr">
				<view>
					<view>运费</view>
					<view>免运费</view>
				</view>
				<view>
					<view>限购</view>
					<view>每人限购1件</view>
				</view>
				<view>
					<view>售后</view>
					<view>兑换商品，一经售出，不支持退换货</view>
				</view>
			</view>
			<!-- 商品详情 -->
			<view class="goods-content">
				<jyf-parser :html="goodContent.desc" ref="article"></jyf-parser>
			</view>
		</view>
		<!-- 底部浮动按钮 -->
		<view class="bottom-btns" v-if="goodContent&&goodContent.inventoryQty > 0&&goodContent.state==1">
			<view><u-button :custom-style="addCartButton" type="warning" @click="addCart">加入购物车</u-button></view>
			<view><u-button :custom-style="toOrderButton" type="error" @click="toOrder()">立即下单</u-button></view>
		</view>
		<!-- 购物车 -->
		<uni-cart-fix :closeCurPage="true" :dragPic="dragPic"></uni-cart-fix>
	</view>
</template>

<script>
	import {
		getGoodsDetail
	} from '@/api/goods.js'
	import jyfParser from "@/components/jyf-parser/jyf-parser";
	export default {
		components: {
		    jyfParser
		  },
		data() {
			return {
				addCartButton: {
					background: '#ff9000',
					borderRadius:'100rpx 0 0 100rpx'
				},
				toOrderButton: {
					borderRadius:'0 100rpx 100rpx 0'
				},
				imageList:[], // 商品图片
				nums:1, // 商品数量
				id: '',
				goodContent: null,
				goldLimit: 0,
				dragPic: '/static/cart.png',  //  购物车图标
			};
		},
		onLoad(opts) {
			console.log(opts)
			this.id = opts.id
			this.goldLimit = opts.goldLimit
			this.getDetail()
		},
		methods: {
			// 查详情
			getDetail(){
				getGoodsDetail({id:this.id}).then(res => {
					console.log(res)
					if(res.status == 200){
						this.goodContent = res.data
						let arr=res.data.images.split(',')
						arr.map(item => {
							this.imageList.push({image:item})
						})
					}
				})
			},
			// 加入购物车
			addCart(){
				let _this = this
				let item = this.goodContent
				this.$bindClick(function(){
					uni.$emit("addCart",{goodsNo:item.goodsNo,buyQty:_this.nums})
				})
			},
			// 立即下单
			toOrder(){
				// console.log(this.goodContent,this.id,'pppppppp')
				if(this.goodContent.sellGold * this.nums >= this.goldLimit){
					this.$u.vuex("vuex_toOrderList",[{id:this.id,buyQty:this.nums,goodsNo:this.goodContent.goodsNo,goods:this.goodContent}])
					uni.redirectTo({
						url:"/pages/toOrder/index"
					})
				}else{
					uni.showToast({
						icon:"none",
						title:"此商品需要满" +this.goldLimit+ "乐豆才可购买"
					})
				}
			}
		},
	}
</script>

<style lang="scss">
page{
	height: 100%;
}
.goods-detail{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	> view{
		&:first-child{
			flex-grow: 1;
			overflow: auto;
		}
	}
	.goods-head{
		background: #FFFFFF;
		box-shadow: 1px 1px 3px #eee;
		padding: 10upx 0;
		.goods-imgs{
			position: relative;
			margin: 20upx 30upx 10upx;
			.goods-staus{
				width: 100%;
				height: 100%;
				position: absolute;
				z-index: 10000;
				background: url(../../static/yxt.png) no-repeat center center;
				background-size: 100% 100%;
				left: 0;
				top: 0;
			}
		}
		.goods-name{
			padding:0 40upx;
			margin: 20upx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			>view{
				&:first-child{
					width: 60%;
					font-weight: bold;
					font-size: 30upx;
				}
				&:last-child{
					display: flex;
					align-items: center;
					text{
						color: #d42a26;
						font-size: 36upx;
						margin-right: 6upx;
						font-weight: bold;
					}
				}
			}
		}
		.goods-price{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding:0 40upx;
			>view{
				&:first-child{
					font-size: 22upx;
					text{
						color: #999;
						font-size: 24upx;
						margin-right: 6upx;
					}
				}
			}
		}
		.goods-goldLimit{
			padding: 10upx 40upx;
			color: #F0AD4E;
			font-size: 24rpx;
			text-align: right;
			text{
				color: red;
			}
		}
	}
	.goods-attr{
		margin: 20upx 0;
		background: #FFFFFF;
		padding: 20upx 40upx;
		box-shadow: 1px 1px 3px #eee;
		> view{
			display: flex;
			align-items: center;
			>view{
				padding: 10upx 0;
				&:first-child{
					padding-right: 15upx;
					color: #666;
				}
			}
		}
	}
	.goods-content{
		background: #F8F8F8;
		padding: 20upx;
		box-shadow: 1px 1px 3px #eee;
		min-height: 50vh;
	}
	
	.bottom-btns{
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 30upx 100upx;
		>view{
			width: 50%;
		}
	}
}
</style>
