<template>
	<view class="content">
		<view class="swiper-box">
			<swiper :indicator-dots="true" :autoplay="false" style="width: 750rpx;height: 750rpx;">
				<swiper-item v-for="(item ,index) in goodsDetail.detail_image" :data-src="item" :key="index">
					<view class="swiper-item">
						<image class="goods_img" :src="item"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="goods_v">
			<view class="goods_v_left">
				<view>￥ <text>{{goodsDetail.seckill_price}}</text> </view>
				<view>已售 {{goodsDetail.sale_num}}</view>
			</view>
			<view class="hang2"> {{goodsDetail.title}} </view>
		</view>
		<view class="xuanzhe" @click="$refs.mengban_show.open()">
			<view>选择</view>
			<view class="xuanzhe_con">
				<view>已选：{{pop_news.name}}</view>
				<image src="/static/mine/yaoqing/point_right.png" mode="widthFix" style="width: 24rpx;"></image>
			</view>
		</view>

		<view class="shop_detail">
			<image src="/static/shop/detail_head.png" class="xiangqing_head"></image>
			<view class="zhuyi" v-html="goodsDetail.content"></view>
		</view>
		<view class="bar_box">
			<view class="btn_boxs" @click="$refs.mengban_show.open()">立即购买</view>
		</view>


		<uni-popup ref="mengban_show" type="bottom">
			<view class="addcar">
				<view class="order_title">
					<view>选择规格</view>
					<view class="ca" @click="$refs.mengban_show.close()">×</view>
				</view>
				<scroll-view scroll-y="true" class="guige">
					<view class="addcar_head">
						<image :src="pop_news.pic"></image>
						<view class="addcar_head_r">
							<view>单价：￥ <text style="font-size: 40rpx;">{{pop_news.seckill_price}}</text> </view>
							<view>规格：{{pop_news.name}}</view>
							<view style="font-size: 24rpx;">库存：{{pop_news.stock}}</view>
						</view>
					</view>
					<view class="size">
						<view class="size_z" v-for="(a,b) in goodsDetail.spec_data" :key='b'>
							<view class="g_title">{{a.title}}</view>
							<view>
								<view :class="v.dis?'sel_color':''" @click.stop="color_sel(b,i)"
									v-for="(v,i) in a.items" :key="i">{{v.title}} </view>
							</view>
						</view>
					</view>

					<view class="duihuan">
						<view class="g_title">购买数量：</view>
						<uni-number-box :min="1" :max="pop_news.stock" v-model="num" background="#FAF8F5" color="#fff">
						</uni-number-box>
					</view>
				</scroll-view>
				<view class="btn_boxs" @click="getOrder()">确定</view>
			</view>

		</uni-popup>

		<!-- 确认订单 -->
		<uni-popup ref="order_show" type="bottom">
			<view class="order animated fadeInUp">
				<view class="order_title">
					<view>确认订单</view>
					<view class="ca" @click="$refs.order_show.close()">×</view>
				</view>
				<view class="addcar_head">
					<image :src="pop_news.pic"></image>
					<view class="addcar_head_r">
						<view>{{pop_news.goods_name}}</view>
						<view>规格：{{pop_news.name}}</view>
						<view class="price_order">
							<text>￥ <text style="font-size: 36rpx;">{{ pop_news.price }}</text> </text>
							<text>×{{ num }}</text>
						</view>
					</view>
				</view>

				<view class="order_title_con2">
					<view style="font-size: 28rpx">付款方式</view>
					<view class="fangshi" @click="change_yuan_index(1)">
						<view class="flex_center">
							<image src="/static/shop/bi.png" class="fangshi_img"></image>
							<view>
								使用星钻抵扣￥ {{ pay_news.use_integral }}（剩余：{{ pay_news.integral }}）
							</view>
						</view>
						<view class="p_t_r">
							<image src="/static/shop/yuan_sel.png" v-if="bi"></image>
							<image src="/static/shop/yuan.png" v-else></image>
						</view>

					</view>
					<view class="fangshi" @click="change_yuan_index(2)">
						<view class="flex_center">
							<image src="/static/shop/yue.png" class="fangshi_img"></image>
							<view>
								使用星钻抵扣￥ {{ pay_news.use_money}}（剩余：{{ pay_news.money }}）
							</view>
						</view>
						<view class="p_t_r">
							<image src="/static/shop/yuan_sel.png" v-if="yue"></image>
							<image src="/static/shop/yuan.png" v-else></image>
						</view>
					</view>
				</view>
				<view class="kuaidi">
					<view @click="showMulLinkageThreePicker">
						<view style="width: 630rpx">
							{{ selectCity }}
						</view>
						<image src="/static/mine/yaoqing/point_right.png"></image>
					</view>
					<view v-if="pop_news.freight>0">
						提示：需支付{{ pop_news.freight }}元运费
					</view>
					<textarea maxlength="50" placeholder="请输入留言内容" v-model="message" />
				</view>
				<view @click="gotoPage('/pages/guize/guize?type=4')" class="xieyi">下单购买即表示同意 《用户服务协议条款》 </view>
				<view class="btn_boxs" @click="pay()">确认支付</view>
			</view>

		</uni-popup>


	</view>
</template>

<script>
	import xwCountDown from '@/components/xw-CountDown'
	export default {
		components: {
			xwCountDown
		},
		data() {
			return {
				num: 1,
				goodsDetail: {},
				// 是否收藏
				is_collect: 2,
				// 商品id
				goods_id: '',
				sku: '',
				// 弹窗信息
				pop_news: {},
				// 支付信息
				pay_news: {},
				// 1:是否币支付,
				bi: true,
				// 2:星钻支付
				yue: false,

				cityPickerValueDefault: [0, 0, 0],
				selectCity: '选择收货地址',
				name: '',
				mobile: '',
				message: ''

			}
		},
		onLoad(v) {
			let that = this;
			that.goods_id = v.goods_id;
			that.getData()
		},
		onShareAppMessage() {
			return {
				title: "友达赏，正版潮玩手办一番赏",
				imageUrl: '',
				path: '/pages/shouye/index?pid=' + uni.getStorageSync('pid')
			}
		},
		methods: {
			pay() {
				let that = this
				that.req({
					url: 'shop_order_buy',
					data: {
						goods_id: that.goods_id,
						ks: that.sku,
						num: that.num,
						is_money: that.yue ? 1 : 2,
						is_integral: that.bi ? 1 : 2,
						name: that.name,
						mobile: that.mobile,
						address: that.address,
						message: that.message
					},
					success(res) {
						console.log(res)
						if (res.status == 1) {
							if (res.data.is_weixin == 1) {
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: res.data.timeStamp,
									nonceStr: res.data.nonceStr,
									package: res.data.package,
									signType: 'MD5',
									paySign: res.data.paySign,
									success(res) {
										console.log(res)
									},
									complete(res) {
										if (res.errMsg == 'requestPayment:fail cancel') {
											uni.showToast({
												title: '取消支付',
												icon: 'loading',
												duration: 1000
											})
										}
										if (res.errMsg == 'requestPayment:ok') {
											uni.showToast({
												title: '支付成功',
												icon: 'success',
												duration: 1000
											})
											setTimeout(() => {
												that.$refs.order_show.close()
												//去订单
												that.$customRouter.navigateTo('/pages/miaosha/shop_order', {}, 'redirectTo');
											}, 1500)
										}
									}
								})
							} else {
								uni.showToast({
									title: '支付成功',
									icon: 'success',
									duration: 1000
								})
								setTimeout(() => {
									that.$refs.order_show.close()
									//去订单
									that.$customRouter.navigateTo('/pages/miaosha/shop_order', {}, 'redirectTo');
								}, 1500)
							}
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},

			/*三级联动选择*/
			showMulLinkageThreePicker() {
				let that = this
				this.canInit = false
				uni.chooseAddress({
					success(res) {
						that.selectCity = res.userName + '-' + res.provinceName + '-' + res.cityName + '-' + res
							.countyName + '-' + res.detailInfo + '-' + res.telNumber
						that.name = res.userName
						that.mobile = res.telNumber
						that.address = res.provinceName + '-' + res.cityName + '-' + res.countyName + '-' + res
							.detailInfo
					},
					complete() {
						// console.log('结束了')
						setTimeout(() => {
							that.canInit = true
						}, 500)
					}
				})

				// this.$refs.mpvueCityPicker.show();
			},

			getOrder() {
				this.$refs.mengban_show.close()
				this.$refs.order_show.open()
				this.change_yuan_index()
			},
			change_yuan_index(e) {
				if (e == 1) {
					this.bi = !this.bi
				}
				if (e == 2) {
					this.yue = !this.yue
				}
				let that = this;
				that.req({
					url: 'shop_goods_browse',
					data: {
						goods_id: that.goods_id,
						ks: that.sku,
						num: that.num,
						is_integral: that.bi ? 1 : 2,
						is_money: that.yue ? 1 : 2
					},
					success(res) {
						that.pay_news = res.data
						that.pop_news = that.pay_news.goods
					}
				})
			},
			getData() {
				let that = this;
				that.req({
					url: 'shop_goods_detail',
					data: {
						goods_id: that.goods_id,
					},
					success(res) {
						if (res.status == 1) {
							that.goodsDetail = res.data
							let Things = that.goodsDetail.spec_data;
							for (let i = 0; i < Things.length; i++) {
								for (let j = 0; j < Things[i].length; j++) {
									that.$set(Things[i].items[j], 'dis', false)
								}
								that.$set(Things[i].items[0], 'dis', true)
							}
							that.product_norms()

						}
					}
				})
			},

			color_sel(a, b) {
				let that = this;
				let Things = that.goodsDetail.spec_data;
				for (let j = 0; j < Things[a].items.length; j++) {
					that.$set(Things[a].items[j], 'dis', false)
					that.$set(Things[a].items[b], 'dis', true)
				}
				that.product_norms()
			},
			product_norms() {
				let that = this;
				that.sku = []
				let Things = that.goodsDetail.spec_data;
				for (let m = 0; m < Things.length; m++) {
					for (let n = 0; n < Things[m].items.length; n++) {
						if (Things[m].items[n].dis) {
							that.sku += Things[m].items[n].k + ','
						}
					}
				}
				this.sku = this.sku.substr(0, this.sku.length - 1)
				that.req({
					url: 'shop_goods_detail_spec',
					data: {
						goods_id: that.goods_id,
						ks: that.sku ? that.sku : '默认'
					},
					Loading: true,
					success(res) {
						if (res.status == 1) {
							if (res.data.type == 1) {
								that.pop_news = res.data.spec_info
							}
						}
					}
				})

			}

		}
	}
</script>

<style>
	textarea {
		width: 630rpx;
		height: 120rpx;
		background: #333333;
		border-radius: 10rpx;
		margin-top: 20rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		color: #999999;
	}

	.kuaidi>view:nth-of-type(2) {
		font-size: 24rpx;
		color: #999999;
	}

	.kuaidi>view:nth-of-type(1) {
		border-bottom: 1rpx solid #E5E5E5;
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		font-weight: 500;
	}

	.kuaidi>view {
		margin-top: 20rpx;
	}

	.kuaidi image {
		width: 32rpx;
		height: 32rpx;
	}

	.kuaidi {
		padding: 0 30rpx 30rpx 30rpx;
		width: 690rpx;
		box-shadow: 0px 0rpx 10rpx 0px #1FF7F0;
		border-radius: 20rpx;
		margin: 24rpx auto 0;
		box-sizing: border-box;
	}

	.p_t_r>image {
		display: block;
		width: 100%;
		height: 100%;
	}

	.p_t_r {
		width: 40rpx;
		height: 40rpx;
		background: #FFFFFF;
		border: 4rpx solid #CCCCCC;
		border-radius: 50%;
		box-sizing: border-box;
	}

	.fangshi_img {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.fangshi {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		line-height: 76rpx;
		align-items: center;
	}


	.xieyi {
		font-size: 24rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin: 20rpx;
	}

	.price_order {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		width: 386rpx;
		font-weight: bold;
		color: #1FF7F0;
		font-size: 24rpx;
	}

	.order_title_con2 {
		box-shadow: 0px 0rpx 10rpx 0px #1FF7F0;
		border-radius: 24rpx;
		width: 690rpx;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		font-weight: 500;
		border-radius: 24rpx;
		margin-top: 40rpx;
	}

	.ca {
		position: absolute;
		top: 0rpx;
		right: 0;
		font-size: 60rpx;
		color: #FFFFFF;
	}

	.order_title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
		font-weight: 500;
		position: relative;
		padding: 20rpx 0;
		box-sizing: border-box;
	}

	.order {
		width: 750rpx;
		background: #0D0D0D;
		box-shadow: 0rpx -2rpx 0rpx 0rpx #FFFFFF, 0rpx -2rpx 7rpx 0rpx #1FF7F0;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		position: absolute;
		bottom: 0;
		padding: 10rpx 30rpx 50rpx;
		box-sizing: border-box;
		color: #ffffff;
	}


	.confirm_pop {
		width: 330rpx;
		height: 88rpx;
		border-radius: 44rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
	}

	.guige {
		border-radius: 24rpx;
		margin: 20rpx auto;
		max-height: 1000rpx;
	}

	.size {
		/* background: #FFFFFF; */
		margin-top: 40rpx;
		padding: 1rpx 20rpx 40rpx;
		box-sizing: border-box;
		border-radius: 24rpx;
		color: #FFFFFF;
	}

	.size_z {
		margin-top: 40rpx;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.g_title {
		font-size: 28rpx;
		font-family: Source Han Sans SC;
		font-weight: 600;
		color: #FFFFFF;
	}

	.size_z>view:nth-of-type(2) {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10rpx;
	}

	.size_z>view:nth-of-type(2)>view {
		border: 1px solid #1FF7F0;
		box-sizing: border-box;
		text-align: center;
		line-height: 60rpx;
		margin-right: 36rpx;
		padding: 0 40rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
		color: #1FF7F0;
		font-size: 28rpx;
	}

	.sel_color {
		color: #0D0D0D !important;
		background: linear-gradient(90deg, #F4F4F4 15%, #62FFFE 100%) !important;
	}

	.duihuan {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		font-size: 28rpx;
		margin-top: 30rpx;
		/* background: #FFFFFF; */
		box-sizing: border-box;
		border-radius: 24rpx;
	}

	.addcar {
		width: 100%;
		position: absolute;
		bottom: 0;
		box-sizing: border-box;
		padding: 10rpx 30rpx 50rpx;
		color: #FFFFFF;
		background: #0D0D0D;
		box-shadow: 0rpx -2rpx 0rpx 0rpx #FFFFFF, 0rpx -2rpx 7rpx 0rpx #1FF7F0;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}

	.addcar_head {
		display: flex;
	}

	.addcar_head>image {
		width: 220rpx;
		height: 220rpx;
		border-radius: 24rpx;
	}


	.addcar_head_r {
		margin-left: 29rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		font-size: 28rpx;
	}


	.xiangqing_head {
		width: 750rpx;
		height: 66rpx;
		display: block;
		margin-bottom: 30rpx;
	}

	.shop_detail {
		width: 100%;
		/* background: #FFFFFF; */
		padding: 18rpx;
		box-sizing: border-box;
		color: #120A06;
		font-size: 28rpx;
	}



	/deep/.shop_detail image {
		width: 100%;
	}

	.content {
		padding-bottom: 120rpx;
		box-sizing: border-box;
		background: #000000;
		width: 100vw;
		min-height: 100vh;
	}

	.goods_img {
		width: 100%;
		height: 760rpx;
	}

	.swiper-box {
		width: 100%;
		height: 750rpx;
		position: relative;
	}

	.goods_v_left text {
		font-size: 40rpx;
	}

	.goods_v_left>view:nth-of-type(1) {
		font-weight: bold;
		color: #1FF7F0;
		font-size: 24rpx;
	}

	.goods_v_left {
		display: flex;
		justify-content: space-between;
		margin: 14rpx auto;
	}

	.goods_v {
		width: 690rpx;
		height: 158rpx;
		border-radius: 10rpx;
		margin: 44rpx auto;
		box-sizing: border-box;
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #ffffff;
		background: #090909;
		border: 1px solid #FFFFFF;
		box-shadow: 0rpx 0 5rpx 3rpx #1FF7F0;
	}



	.xuanzhe {
		width: 690rpx;
		height: 91rpx;
		background: #090909;
		border: 1px solid #FFFFFF;
		box-shadow: 0rpx 0 5rpx 3rpx #1FF7F0;
		border-radius: 10rpx;
		margin: 20rpx auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.xuanzhe_con {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
		width: 560rpx;
	}

	.bar_box {
		box-sizing: border-box;
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 30rpx;
		background: #000000;
	}

	.btn_boxs {
		width: 692rpx;
		height: 88rpx;
		color: #FFFFFF;
		font-size: 36rpx;
		font-family: 'YouSheBiaoTiHei';
		display: flex;
		justify-content: center;
		align-items: center;
		background: url('/static/shop/btn_bg.png') no-repeat 0 0 / 100% 100%;
	}
</style>
