<template>
	<view class="" v-if="istrue">
		<!-- model -->
		<view v-show="show" @click="show=false"
			style="width: 100%;height: 100vh;position: fixed;z-index: 1;background: rgba(0,0,0,.6);">
		</view>
		<view :class="['t1','ptb20','bgwhite','flex_around','flex_items']">
			<view v-for="(item,index) in list" :key="index" class="flex_column flex_items">
				<text :class="['f28','bold',current==index?'chose':'nochose']"
					@click="change(index)">{{item.name}}</text>
				<view v-if="index==current" class="mt10"
					style="height: 6rpx;width:30rpx;background: linear-gradient(157deg, #FFBCA0 0%, #FF8A5D 100%);">
				</view>
			</view>
		</view>
		<!-- main -->
		<view>
			<view v-if="current==0" class="jj">
				<view>
					<!-- t2 -->
					<view class="mt30">
						<image :src="info.main_image" style="width: 100%;height: 740rpx;" mode=""></image>
					</view>
					<!-- t3 -->
					<view class="p30 bgwhite">
						<!-- 		<view v-if="info.immediate_reduction_price!=0" class="flex_items flex_center"
							style="width: 180rpx;height: 48rpx;background: linear-gradient(90deg, #FC563A 0%, #FF9348 100%);border-radius: 0rpx 38rpx 38rpx 0rpx;">
							<text class="f32" style="color: #fff;">立省{{info.immediate_reduction_price}}分</text>
						</view> -->
						<view class="bold mt30" style="color: #333;">{{info.name}}</view>
						<view class="flex_between flex_items mt20">
							<view class="flex_start flex_items">
								<text class="bold f32" style="color: #EA5404;">{{info.price}}积分</text>
								<view class="pos ml20">
									<text class="f26" style="color: #B2B2B2;">{{info.real_price}}积分</text>
									<view class="abs" style="width: 100%;height:2rpx;background:#b8b8b8;top:22rpx;">
									</view>
								</view>
							</view>
							<!-- 		<view class="f26" style="color: #b2b2b2;">
							已兑：9999件
						</view> -->
						</view>
						<view class="flex_between flex_items pb30 mt30 bbe9s">
							<text class="f28" style="color: #333333;">规格</text>
							<text class="f24" style="color: #666;">{{info.spec_name}}</text>
							<u-icon name="arrow-right" color="#666666" size="15"></u-icon>
						</view>
						<view class="flex_between flex_items pb30 mt30 bbe9s">
							<text class="f28" style="color: #333333;">商家</text>
							<text class="f24" style="color: #666;">成都蓝色网络科技有限公司</text>
							<u-icon name="arrow-right" color="#666666" size="15"></u-icon>
						</view>
						<view class="pt30 flex_start flex_items">
							<image :src="imgUrl+'zs.png'" style="width: 24rpx;height: 24rpx;" mode=""></image>
							<text class="f24 ml10" style="color: #666;">正品保障</text>
							<image :src="imgUrl+'zs.png'" class="ml35" style="width: 24rpx;height: 24rpx;" mode="">
							</image>
							<text class="f24 ml10" style="color: #666;">积分兑换</text>
						</view>
					</view>
					<!-- t4 -->
					<view class="t4 p30 bgwhite mt30">
						<view class="bold f40" style="color: #3D3D3D;">宝贝详情</view>
						<!-- <view v-html="info.introduce" class="ql-editor"></view> -->
						<view class="flex_column flex_items mt20">
							<image v-for="(item,index) in info.detail_image" :key="index" :src="item"
								style="width: 100%;" mode="widthFix"></image>
						</view>
					</view>
					<view style="height: 130rpx;width: 100%;"></view>
				</view>
			</view>
			<view v-if="current==1">
				<view class="bgwhite p30">
					<view class="flex_start flex_items p30 bbe9s">
						<text class="f28" style="color: #333333;">商品</text>
						<view class="f26 ml35" style="color: #666666;width:520rpx;">{{info.name}}</view>
					</view>
					<view class="flex_start flex_items p30 bbe9s">
						<text class="f28" style="color: #333333;">公司</text>
						<text class="f26 ml35" style="color: #666666;">成都蓝色网络科技有限公司</text>
					</view>
				</view>
			</view>
			<view v-if="current==2">
				<xz></xz>
			</view>
		</view>
		<!-- t5 -->
		<view class="bgwhite p30 flex_start flex_items" style="position: fixed;width: 100%;left: 0;bottom: 0;">
			<view class="flex_start flex_items">
				<image :src="imgUrl+'dd.png'" style="width: 40rpx;height: 40rpx;" mode=""></image>
				<text class="f24 bold" style="color: #333333;" @click="gomyorder">我的订单</text>
				<view @click="goup" class="flex_center flex_items ml35"
					style="width: 494rpx;height: 72rpx;background: linear-gradient(90deg, #FF898E 0%, #F43139 100%);border-radius: 68rpx 68rpx 68rpx 68rpx;">
					<text style="color: #fff;" class="f28">立即兑换</text>
				</view>
			</view>
		</view>
		<!-- myorder -->
		<view v-show="show" class="bgwhite dk">
			<view class="plr50 ptb50 flex_column">
				<text class="f28">商品参数</text>
				<view class="mt40 flex_start flex_items">
					<view>
						<image :src="info.main_image" style="width: 178rpx;height: 178rpx;border-radius: 12rpx;"
							mode="">
						</image>
					</view>
					<view class="ml20 flex_column" style="height: 178rpx;">
						<!-- 	<view v-if="info.immediate_reduction_price!=0" class="f-center"
							style="width: 180rpx;height: 48rpx;background: linear-gradient(90deg, #FC563A 0%, #FF9348 100%);border-radius: 0rpx 38rpx 38rpx 0rpx;">
							<text class="f32" style="color: #fff;">立省{{info.immediate_reduction_price}}分</text>
						</view> -->
						<view class="flex_between flex_items">
							<view style="color: #EA5404;" class="f32 mt30 bold">{{info.price}}积分</view>
							<view class="pos ml20 mt30" style="width: 120rpx;color: #D9D9D9;">
								<text class="f26" style="color: #B2B2B2;">{{info.real_price}}积分</text>
								<view class="abs" style="width: 100%;height:2rpx;background:#b8b8b8;top:22rpx;">
								</view>
							</view>
						</view>
						<view class="flex_start flex_items f26 mt30" style="color: #888888;">
							<text>已选择：{{tags[curindex]}}</text>
							<!-- style="margin-left: 100rpx;" -->
							<text class="" style="margin-left: 50rpx;">库存：{{info.stock}}</text>
						</view>
					</view>
				</view>
				<text class="f28 mt40">规格</text>
				<view v-if="info.spec_name!=null" class="mt30 flex_warp flex_items">
					<view v-for="(item,index) in tags" :key="index"
						:class="['f-center','ptb10','plr30','mr30',index==curindex?'chosem':'nochosem']"
						@click="chosem(index)">{{item}}
					</view>
				</view>
				<view @click="okdiu" class="flex_items flex_center mt80"
					style="width: 638rpx;height: 108rpx;background: linear-gradient(90deg, #FF898E 0%, #F43139 100%);border-radius: 54rpx;color: #fff;">
					<text class="f32 bold">确认兑换</text>
				</view>
			</view>
		</view>
		<Ywatermark :info="'蓝色兄弟'"></Ywatermark>
	</view>
</template>

<script>
	import xz from "./xz.vue"
	export default {
		data() {
			return {
				list: [{
					name: '商品简介'
				}, {
					name: '商品参数'
				}, {
					name: '购买须知',
				}],
				current: 0,
				curindex: 0,
				show: false,
				tags: [{
					tt: "10元"
				}, {
					tt: "20元"
				}, {
					tt: "特惠微信100元立减金"
				}, ],
				istrue: false,
				id: "",
				info: {},
				imgUrl: ""
			}
		},
		components: {
			xz
		},
		onLoad(options) {
			this.id = options.id
			this.imgUrl = this.api.imgUrl
			this.getData()
		},
		methods: {
			getData() {
				uni.showLoading({
					title: "加载中..."
				})
				this.api.getdetail({
					id: this.id,
				}).then((res) => {
					console.log(res)
					if (res.data.code == 200) {
						this.info = res.data.data
						this.info.detail_image = JSON.parse(this.info.detail_image)
						this.tags = []
						this.tags.push(res.data.data.spec_name)
						uni.hideLoading()
						this.istrue = true
					} else {
						uni.showToast({
							icon: "none",
							title: res.data.message
						})
					}
				})
			},
			change(index) {
				this.current = index;
			},
			goup() {
				this.show = true
			},
			chosem(index) {
				this.curindex = index
			},
			gomyorder() {
				uni.switchTab({
					url: "/pages/order/index"
				})
			},
			okdiu() {
				let data = {
					img: this.info.main_image,
					name: this.info.name,
					price: this.info.price,
					real_price: this.info.real_price,
					id: this.info.id
				}
				uni.navigateTo({
					url: "/pages/product/Pay?data=" + JSON.stringify(data)
				})
			}
		},
	}
</script>

<style>
	page {
		background: #f5f5f5 !important;
	}

	.chose {
		color: #003A6E;
	}

	.nochose {
		color: #888888;
	}

	.dk {
		z-index: 2;
		width: 100%;
		bottom: 0;
		left: 0;
		width: 100%;
		position: fixed;
		border-top-left-radius: 12rpx;
		border-top-right-radius: 12rpx;
	}

	.nochosem {
		background: #F2F2F7;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		color: #666666;
		font-size: 22rpx;
	}

	.chosem {
		background: #F5393A;
		color: #fff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-size: 22rpx;
	}
</style>