<template>
	<view class="maintenance-detail">
		<!-- 自定义导航栏开始 -->
		<uni-nav-bar :status-bar="true" :border="false" :background-color="'transparent'" :fixed="true"
			@click-left="handleClickLeft">
			<block v-slot:left>
				<view class="back-wrap u-f u-f-fdr u-f-aic u-f-jcfs">
					<image style="width: 16rpx;height:30rpx;" src="../.././static/common/white_left_arrrow.png"></image>
				</view>
			</block>
		</uni-nav-bar>

		<!-- 自定义导航栏结束 -->

		<view class="content" style="padding-bottom: 164rpx;">
			<view class="top-fixed" :style="{ height: paddingTop }">
				<!-- <image style="width: 100%;height: 100%;" src="../.././static/demo/test.png" :mode="'widthFix'">
				</image> -->
			</view>

			<view class="swiper-wrap">
				<swiper class="swiper" :current="current" @change="changeswiper">
					<swiper-item v-for="(item, index) in goodsInfo.goodsImageList" :key="index">
						<view class="swiper-item">
							<image style="width: 100%;height: 100%;" :src="item" :mode="'aspectFill'"></image>
						</view>
					</swiper-item>
				</swiper>
				<!-- <view class="shop-car" :style="{ top: paddingTop }" @click="enterShopCar">
					<image src="../.././static/common/shop_car.png" style="width: 100%;height: 100%;"></image>
				</view> -->
				<view class="swiper-num fw400 fs28" v-if="JSON.stringify(goodsInfo.goodsImageList) !== 'null'">
					{{current+1}}/{{JSON.stringify(goodsInfo.goodsImageList) !== 'null' ?goodsInfo.goodsImageList&&goodsInfo.goodsImageList.length : 0}}
				</view>
			</view>

			<view class="content-detail">
				<view class="shop-desc">
					<view class="common-card mg-bot-20">
						<view class="u-f u-f-jcsb u-f-aic mg-bot-16">
							<view class="main-color">
								<text class="fs44 fw600">{{goodsInfo.price}}</text>
							</view>
							<view class="u-f u-f-fdc u-f-jcc">
								<text class="light-gray fs24 fw400">已兑换{{goodsInfo.totalSales}}</text>
							</view>
						</view>
						<view class="fw700 fs32 light-black two-line-ellipsis mg-bot-16">
							{{goodsInfo.goodsName}}
						</view>
						<view v-if="goodsInfo.tireParametersMap!=null" class="guige u-f u-f-jcsb u-f-aic"
							@click="showTireParameter">
							<view class="item u-f u-f-fdc u-f-aic">
								<image class="mg-bot-12" style="width: 32rpx;height: 32rpx;" mode="widthFix"
									src="../.././static/common/huawen.png"></image>
								<text class="light-black fs24 mg-bot-6">花纹性能</text>
								<text
									class="light-blac fs22">{{goodsInfo.tireParametersMap.patternPerformance || '_'}}</text>
							</view>
							<view class="line"></view>
							<view class="item u-f u-f-fdc u-f-aic">
								<image class="mg-bot-12" style="width: 32rpx;height: 32rpx;" mode="widthFix"
									src="../.././static/common/chicun.png"></image>
								<text class="light-black fs24 mg-bot-6">尺寸</text>
								<text class="light-blac fs22">{{goodsInfo.tireParametersMap.size || '_'}}</text>
							</view>
							<view class="line"></view>
							<view class="item u-f u-f-fdc u-f-aic">
								<image class="mg-bot-12" style="width: 32rpx;height: 32rpx;" mode="widthFix"
									src="../.././static/common/guochan.png"></image>
								<text class="light-black fs24 mg-bot-6">国产/进口</text>
								<text
									class="light-blac fs22">{{goodsInfo.tireParametersMap.domesticImports || '_'}}</text>
							</view>
							<view class="line"></view>
							<view class="item u-f u-f-fdc u-f-aic">
								<image class="mg-bot-12" style="width: 32rpx;height: 32rpx;" mode="widthFix"
									src="../.././static/common/guochan.png"></image>
								<text class="light-black fs24 mg-bot-6">轮胎类型</text>
								<text class="light-blac fs22">{{goodsInfo.tireParametersMap.tireType || '_'}}</text>
							</view>
						</view>
					</view>

					<view class="common-card mg-bot-20">
						<view class="u-f u-f-jcfs u-f-aifs">
							<view class="fw400 light-gray fs28 mg-right-14 vertical-text" style="flex: 28rpx;">适用门店
							</view>
							<view class="right u-f u-f-jcfs">
								<view class="mg-right-12">
									<image style="width: 134rpx;height: 134rpx;" class="border-radius-9"
										:lazy-load="true" :mode="'scaleToFill'" :src="goodsInfo.storeLogo"></image>
								</view>
								<view style="width: calc(100% - 133rpx)">
									<view class="u-f u-f-jcsb u-f-aic mg-bot-10">
										<view style="flex: 3" class="fs28 fw400 light-black one-line-ellipsis">
											{{goodsInfo.storeName}}
										</view>
										<view style="flex: 1" class="u-f u-f-jcfs u-f-aic" @click="goToShopDetail">
											<text
												class="fs24 fw400 light-gray mg-right-18">{{goodsInfo.storeNum}}家门店</text>
											<image src="../.././static/common/big_gray_right_arrow.png"
												:mode="'widthFix'" style="width: 13rpx;height: 26rpx"></image>
										</view>
									</view>
									<view class="mg-bot-10">
										<text class="fs28 light-gray fw400">{{goodsInfo.distance}}km</text>
									</view>
									<view class="u-f u-f-jcsb u-f-aic" @click="skipCityMap(goodsInfo)">
										<text
											class="fs28 fw400 light-gray one-line-ellipsis">{{goodsInfo.detailedAddress}}</text>
										<view class="u-f u-f-jcfe u-f-aic">
											<image class="send-icon" :mode="'widthFix'"
												src="../.././static/common/send.png"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="common-card mg-bot-20">
						<view class="u-f u-f-jcsb u-f-aic" @click="handleShowChoiseSize">
							<view>选择规格</view>
							<view class="u-f u-f-jcsb u-f-aic">
								<text
									class="fs26 light-gray mg-right-10">{{specificationsInfo.specificationsName}}</text>
								<image src="../.././static/common/sg_right_arrow.png"
									style="width: 16rpx;height: 16rpx;"></image>
							</view>
						</view>
					</view>

					<view class="common-card mg-bot-20" style="margin-bottom: 20rpx;">
						<view class="good-detail">
							<view class="gr-title u-f u-f-aic u-f-jcc">
								<view class="left-line mg-right-16"></view>
								<view class="fw600 main-color fs32 mg-right-16">商品详情</view>
								<view class="right-line"></view>
							</view>
							<view>
								<rich-text :nodes="goodsInfo.serviceIntroduction"></rich-text>
							</view>
						</view>
					</view>

					<view class="common-card mg-bot-34 u-f u-f-jcfs u-f-aic">
						<image src="/static/common/exclamation_ point.png" style="width: 20rpx;height: 20rpx;">
						</image>
						<text class="light-gray fs24 fw400">“平台只为用户和商家提供服务，开发票请找服务商家”</text>
					</view>

				</view>
			</view>

			<view class="fix-bot u-f u-f-jcc u-f-aic">
				<view class="line-gradient-btn" style="padding: 24rpx 0;width: 90%" @click="sureDuHuan">
					立即兑换
				</view>
			</view>
		</view>

		<!-- 选择规格 -->
		<uni-popup :position="'bottom'" class="updatePopup" :show="showChoiseSize" @hidePopup="handleHideChoiseSize">
			<view class="share-modal">
				<view class="gray-close fw70" @click="handleHideChoiseSize">
					<image style="width: 100%;height: 100%;" src="/static/common/gray_close.png"></image>
				</view>
				<view>
					<view class="u-f  u-f-aic">
						<image style="width: 146rpx;height: 146rpx;" :mode="'aspectFit' "
							:src="goodsInfo.goodsImageList&&goodsInfo.goodsImageList[current]"></image>

						<view class="u-f u-f-fdc u-f-aifs">
							<view class="light-black fs32 one-line-ellipsis" style="text-align: left;">
								{{goodsInfo.goodsName}}
							</view>
							<view class="u-f u-f-jcfs u-f-aic">
								<view class="light-black mg-right-18 main-color fw600">
									<text class="fs44" v-if="goodsInfo.specificationListList[active].pointsPrice">
										{{goodsInfo.specificationListList[active].pointsPrice + '积分'}}</text>
									<text
										v-if="goodsInfo.specificationListList[active].exchangeAmount && goodsInfo.specificationListList[active].pointsPrice">+</text>
									<text class="fs44"
										v-if="goodsInfo.specificationListList[active].exchangeAmount">￥{{goodsInfo.specificationListList[active].exchangeAmount}}</text>
								</view>
							</view>
						</view>

					</view>

					<view class="mg-bot-40">
						<view class="fw700 light-black fs28 mg-bot-24" style="text-align: left;">规格</view>
						<view class="tab-list u-f u-f-jcfs">
							<view :class="['tab-item mg-right-20', active === index ? 'active' : '']"
								v-for="(item, index) in goodsInfo.specificationListList" :key="item.specificationsId"
								@click="handleTab(item, index)">
								{{item.specificationsName}}
							</view>
						</view>
					</view>

					<view class="u-f u-f-jcsb u-f-aic mg-bot-56">
						<text>数量</text>
						<view>
							<uni-number :min="1" v-model="number"></uni-number>
						</view>
					</view>

					<view class="u-f u-f-aic u-f-jcc" style="width: 100%;" @click="createBill">
						<view class="line-gradient-btn" style="flex: 1;padding: 22rpx 0;">
							立即兑换
						</view>
					</view>

				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import commonTitle from "../.././components/common-title/common-title.vue"
	import uniNumber from "../.././components/uni-number-box/uni-number-box.vue"

	import {
		getCusNavBarInfo
	} from "../.././common/customizeNavBarInfo.js"
	export default {
		components: {
			commonTitle,
			uniNumber
		},
		data() {
			return {
				number: 1,
				paddingTop: 0,
				show: false,
				showChoiseSize: false,
				goodsId: 0,
				pointsGoodsId: 0,
				goodsInfo: {},
				current: 0,
				specificationsInfo: {
					specificationsId: 0,
					specificationsName: ''
				},
				active: 0,
				isChangeShop: false,
			}
		},
		mounted() {
			let {
				customizeNavBarHeight
			} = getCusNavBarInfo()
			this.paddingTop = customizeNavBarHeight + 'px'
		},
		onLoad(option) {
			this.goodsId = option.goodsId
			this.pointsGoodsId = option.pointsGoodsId
			this.init()
		},
		onShow() {
			let detail = uni.getStorageSync('detail');
			if (detail && this.isChangeShop) {
				let object = JSON.parse(detail);
				this.goodsInfo.storeImage = object.storeLogo
				this.goodsInfo.storeName = object.storeName
				this.goodsInfo.distance = object.distance
				this.goodsInfo.score = object.score
				this.goodsInfo.storeId = object.storeId
				this.goodsInfo.detailedAddress = object.detailedAddress
				this.goodsInfo.commentNum = object.commentNum
				this.goodsInfo.totalSales = object.totalSales
			}
		},
		methods: {
			async getPointsGoodsDetails() {
				console.log()
				let data = {
					pointsGoodsId: this.pointsGoodsId,
					goodsId: this.goodsId,
					lon: this.User.curcity.lng,
					lat: this.User.curcity.lat
				}

				let res = await this.$http.post('/api/client/pointsRecord/pointsGoodsDetails', data, {
					token: true,
					checkToekn: true
				})
				let resData = res.data.data
				this.goodsInfo = resData
				// let content = this.goodsInfo.serviceIntroduction.replace(/style="[^"]*"/g, '').replace(/\<img/gi,
				// 	'<img style="max-width:100% !important;height:auto !important" ')
				// this.goodsInfo.serviceIntroduction = content
				
				if (goodsInfo.serviceIntroduction) {
					goodsInfo.serviceIntroduction = goodsInfo.serviceIntroduction.replace(/\<img/gi,
						'<img style="max-width:100% !important;height:auto !important" ')
				}
				this.goodsInfo.serviceIntroduction = goodsInfo.serviceIntroduction
				
				this.specificationsInfo = resData.specificationListList[0]
			},
			async handleExchange() {
				let data = {
					pointsGoodsId: this.pointsGoodsId,
					specificationsId: this.specificationsInfo.specificationsId,
					goodsNum: this.number,
					lon: this.User.curcity.lng,
					lat: this.User.curcity.lat
				}

				console.log("handleExchange", data)

				let res = await this.$http.post('/api/client/pointsRecord/exchange', data, {
					token: true,
					checkToekn: true
				})
				let key = res.data.data
				console.log("resData", key)

				uni.navigateTo({
					url: '/pagesE/home-jifen-duihuan/home-jifen-duihuan?key=' + key
				})

			},
			init() {
				this.getPointsGoodsDetails()
			},
			sureDuHuan() {
				if (this.goodsInfo.specificationListList > 1) {
					this.handleShowChoiseSize()
				} else {
					this.handleExchange()
				}
			},
			handleClickLeft() {
				uni.navigateBack({
					delta: 1
				})
			},
			skipCityMap(data) {
				uni.openLocation({
					// 
					latitude: Number(data.lat),
					longitude: Number(data.lon),
					name: data.storeName,
					address: data.detailedAddress,
					success: function(res) {
						console.log('打开系统位置地图成功')
					},
					fail: function(error) {
						console.log(error)
					}
				})
			},
			goToShopDetail() {
				this.isChangeShop = true
				this.User.navigate({
					url: "/pagesC/choice-shop/choice-shop?goodsId=" + this.goodsInfo.goodsId + '&storeType2Id=' + 0
				}, "navigateTo", true)
			},
			changeswiper(e) {
				this.current = e.detail.current
			},
			handleShowChoiseSize() {
				this.showChoiseSize = true;
			},
			handleHideChoiseSize() {
				this.showChoiseSize = false;
			},
			createBill() {
				this.handleHideChoiseSize()
				this.handleExchange()
			},
			handleTab(item, index) {
				this.active = index
				this.specificationsInfo = item
			}
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}
</style>

<style lang="scss" scoped>
	.maintenance-detail {
		.back-wrap {
			.white-back-icon {
				width: 30rpx;
				height: 30rpx;
				// background: url(../.././static/shop/white-left-arrow.png) no-repeat center center;
				background-size: 50%;
			}
		}

		.content {
			position: relative;

			.top-fixed {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				z-index: 3;
				overflow: hidden;
			}

			.swiper {
				height: 750rpx;

				.swiper-item {
					position: relative;
					display: block;
					width: 100%;
					height: 750rpx;

					// .shop-car {
					// 	padding-top: 10rpx;
					// 	position: absolute;
					// 	right: 28rpx;
					// 	width: 62rpx;
					// 	height: 62rpx;
					// 	background: url(../.././static/common/shop_car.png) no-repeat bottom center;
					// 	background-size: 100%;
					// 	z-index: 1000;
					// }

					.swiper-num {
						color: #ffffff;
						padding: 10rpx 24rpx;
						position: absolute;
						bottom: 58rpx;
						right: 24rpx;
						background-color: rgba(0, 0, 0, 0.25);
						border-radius: 28rpx 28rpx 28rpx 28rpx;
						z-index: 2;
					}
				}
			}

			.content-detail {
				position: relative;
				margin-top: -50rpx;
				padding: 26rpx 24rpx 24rpx 34rpx;
				background-color: #F9F9F9;
				border-radius: 40rpx 40rpx 0 0;

				.common-card {
					padding: 20rpx;
					border-radius: 18rpx;
					background-color: #ffffff;

					view {
						view {
							.share-icon {
								width: 30rpx;
								height: 30rpx;
								background: url(../.././static/common/share.png) no-repeat center center;
								background-size: 100%;
							}
						}
					}

					.youhuiquan {
						padding: 18rpx 20rpx;
						background: #FFF4F0;
						border-radius: 9rpx 9rpx 9rpx 9rpx;
					}

					.ue-user {
						.avatar {
							width: 78rpx;
							height: 78rpx;
						}

						.user-desc {
							.evaluate-wrap {
								.evaluate {
									.star-icon {
										width: 32rpx;
										height: 32rpx;
										background: url(../.././static/star.png) no-repeat center center;
										background-size: 100%;
									}

									.star-num {
										color: #F2CB51;
									}
								}
							}
						}
					}

					.ue-content {
						.image-list {
							.image-item {
								width: calc(25% - 12rpx);

								image {
									width: 100%;
								}
							}
						}
					}

					.good-detail {
						.big-title {
							.left {
								width: 165rpx;
								height: 4rpx;
								// background: url(../.././static/common/left_rect.png) no-repeat center center;
								background-size: 100%;
							}

							.right {
								width: 165rpx;
								height: 4rpx;
								// background: url(../.././static/common/right_rect.png) no-repeat center center;
								background-size: 100%;
							}
						}

						.gantanhao {
							width: 20rpx;
							height: 20rpx;
						}
					}
				}
			}
		}

		.fix-bot {
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 10rpx 0;
			background-color: #ffffff;
		}
	}

	.big-gray-right-arrow {
		width: 26rpx;
		height: 26rpx;
		// background: url(../.././static/common/black_right-arrow.png) no-repeat center center;
		background-size: 50%;
	}

	.send-icon {
		width: 56rpx;
		height: 56rpx;
		// background: url(../.././static/common/send.png) no-repeat center center;
		background-size: 100%;
	}

	.small-gray-right-arrow {
		width: 16rpx;
		height: 16rpx;
		// background: url(../.././static/common/gray_right_arrow.png) no-repeat center center;
		background-size: 100%;
	}

	.collect {
		width: 40rpx;
		height: 40rpx;
		// background: url(../.././static/common/collect.png) no-repeat center center;
		background-size: 100%;
	}

	.serve-person {
		width: 40rpx;
		height: 40rpx;
		// background: url(../.././static/common/say.png) no-repeat center center;
		background-size: 100%;
	}

	.default-line-btn {
		color: #333333;
		font-size: 22rpx;
		border-radius: 40rpx;
		padding: 30rpx 46rpx;
		text-align: center;
		background-color: transparent;
		border: 1rpx solid #707070;
	}

	.main-btn {
		color: #ffffff;
		font-size: 22rpx;
		background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		padding: 30rpx 100rpx;
	}

	.mark {
		font-size: 28rpx;
		padding: 8rpx 0 8rpx 36rpx;
		color: #ffffff;
		background: linear-gradient(90deg, #FF4502 0%, rgba(255, 137, 3, 0) 100%);
	}

	.join-group-person {
		.main-title-btn {
			padding: 6rpx 12rpx;
			background: #FFF6F3;
			border-radius: 9rpx 4rpx 9rpx 2rpx;
			border: 1rpx solid #FFD0BF;
			color: #FF4502;
			margin-top: 16rpx;
		}
	}

	.join-group-progress {
		margin-bottom: 28rpx;

		.progress-wrap {
			flex: 2;
			margin-right: 10rpx;
		}

		.join-group-person {
			color: #FF4502;
		}
	}

	.share-modal {
		position: relative;
		padding: 44rpx;

		.gray-close {
			position: absolute;
			right: 28rpx;
			top: 28rpx;
			width: 42rpx;
			height: 42rpx;
			// background: url(../.././static/common/gray-close.png) no-repeat center center;
			background-size: 100%;
		}

		.content-wrap {
			width: 100%;

			.inner {
				width: 420rpx;
				padding: 12rpx;
				border-radius: 10rpx;
				background-color: #ffffff;
				border: 10rpx solid #FF4502;
			}

			.share {
				width: 420rpx;

				view {
					.wx {
						width: 58rpx;
						height: 58rpx;
						// background: url(../.././static/common/wx.png) no-repeat center center;
						background-size: 100%;
					}

					.wx-pengyouquan {
						width: 58rpx;
						height: 58rpx;
						// background: url(../.././static/common/wx__pengyouquan.png) no-repeat center center;
						background-size: 100%;
					}
				}
			}
		}
	}

	.product-card {
		flex: 1;
		border-radius: 18rpx;
		background-color: #ffffff;

		.pc-image {
			width: 100%;
			height: 340rpx;
		}

		.pc-desc {
			color: #333333;
			height: 74rpx;
		}

		.pc-price {
			margin-top: 10rpx;
			color: #FF4502;
		}
	}

	.tab-list {
		.tab-item {
			padding: 12rpx 30rpx;
			font-size: 22rpx;
			border-radius: 28rpx;
			background-color: transparent;
			border: 1rpx solid transparent;
			background-color: #F9F9F9;
			color: #333333;

			&.active {
				color: #FF4502;
				background-color: #FFEFE9;
				border-color: #FF4502;
			}
		}
	}

	.guige .line {
		background-color: #707070;
		width: 1rpx;
		height: 50rpx;
		margin: 0 24rpx;
	}

	.gr-title {
		margin-bottom: 26rpx;

		.left-line {
			width: 165rpx;
			height: 4rpx;
			background: url(../.././static/common/l_recom.png) no-repeat center center;
		}

		.right-line {
			width: 165rpx;
			height: 4rpx;
			background: url(../.././static/common/r_recom.png) no-repeat center center;
		}
	}

	.swiper-wrap {
		position: relative;

		.swiper {
			height: 750rpx;

			.swiper-item {
				display: block;
				width: 100%;
				height: 750rpx;
			}
		}

		// .shop-car {
		// 	padding-top: 10rpx;
		// 	position: fixed;
		// 	right: 28rpx;
		// 	width: 62rpx;
		// 	height: 62rpx;
		// 	z-index: 1000;
		// }

		.swiper-num {
			color: #ffffff;
			padding: 10rpx 24rpx;
			position: absolute;
			bottom: 58rpx;
			right: 24rpx;
			background-color: rgba(0, 0, 0, 0.25);
			border-radius: 28rpx 28rpx 28rpx 28rpx;
			z-index: 2;
		}
	}

	.updatePopup :deep(.uni-popup-bottom) {
		border-radius: 40rpx 40rpx 0 0;
	}
</style>