<template>
	<view>
		<view class="banner"> 
				<swiper class="swiper-box" >
					<swiper-item v-for="(item ,index) in details.images" :key="index">
						<view class="swiper-item">
							<image :src="item" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper> 
		</view>
		<view class="text-details fsz36 ">
			<view class="">{{details.name}}</view> 
			<view class="qishu fsz28 ">
				<view class="fsz36 tprice">{{details.point}}积分+{{details.price}}元</view>
				<view style="font-size: 12px;position: absolute;right: 25px;">库存:{{details.stock}}</view> 
			</view> 
		</view>  
		 
		 <view class="fr" style="height:40px;width: 100%;">
			 <view style="float:right">
		 	<uni-number-box v-model="numbers" min="1" max="99" background="#eee" @change="changeValue" /></view>
		 </view>
		 <view class="product">
		 	<view class="mainwidth2"> 
		 		<uni-segmented-control   :current="tab" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#f50"></uni-segmented-control>
		 		 <view class="content fsz30"  >
		 			<rich-text :nodes="strings"></rich-text> 
		 		</view> 
		 	</view> 
		 </view> 
		  
		  <view class="button-bottom">  
				<button class="btn btn-primary  " v-if="user_point < details.point "  >积分不足</button>
				<button class="btn btn-primary  " v-else-if="  details.stock ==0 "  >库存不足</button>
				<button class="btn btn-success" v-else @click="exchange()" >兑换</button>
		  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return { 
				details:{point:0},
				id:'',
				strings:'',
				user_point:0,
				 items: ['商品详情'],
				numbers:1
			}
		},
		onLoad(options) { 
			 
			this.id = options.id
			this.getdata()
			
		},
		methods: {
			changeValue(value) { 
			}, 
			getdata(){
				this.$api.exchangegoodsinfo({id:this.id},res=>{ 
					if(res.code == '1'){
						this.details = res.data 
							var jsonDa = JSON.stringify(this.details.content);
							var newResData = JSON.parse(jsonDa); 
							this.strings = newResData 
					}
				})
				this.$api.userInfo({},res=>{
					if(res.code == '1'){
						this.user_point = res.data.user.user_point
					}
				})
			},
			exchange(){ 
				if(this.details.stock ==0 ){
					uni.showToast({ title: "库存不足" , icon: 'none' })  
					 return false;
				}
				uni.navigateTo({
					url:'/pages/exchange/createorder?goods_id=' + this.id+'&number='+this.numbers
				})  
			}
		}
	}
</script>

<style lang="scss">
page{background-color: #fff;}	
	.banner{position: relative;}
	.swiper-box{height: 450upx;}
	.swiper-box image{height: 450upx;width: 100%;}
	.text-details view:nth-child(1){font-weight: 700;}
	.text-details{color: #333;
    background: #fff;
    padding: 30rpx;
    box-sizing: border-box;}
	.text-details .qishu{margin-top: 20rpx;display: flex;}
	.tprice{color: #ff5a68;}
	.text-details .qishu text:nth-child(2){margin-left: 16rpx;font-weight: normal;color: #777;}
	.product image{width: 100%;}
 
	.product{background: #fff;overflow: hidden;padding: 0px 10px;}
	.product .mainwidth2{ padding-bottom: 100rpx;}
 
</style>
