<template>
	<view class="">
		<!-- 	<u-navbar title="商品详情" leftIconColor="#000" rightIcon='/static/common/white_left_arrrow.png' placeholder
			leftIconSize='38rpx' autoBack="true">
		</u-navbar> -->

		<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">
				<view class="top-fixed" :style="{ height: paddingTop }">
					<!-- swiper图 -->
					<image style="width: 100%;height: 100%;" :mode="'widthFix'" :src="currentSwiperImg">
					</image>
				</view>

				<view class="swiper-wrap">
					<swiper class="swiper" :current="current" @change="changeswiper">
						<swiper-item v-for="(item, index) in storeDetail.goodsImageList" :key="index">
							<view class="swiper-item">
								<image style="width: 100%;height: 100%;" :src="item" :mode="'widthFix'"></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">
						{{current+1}}/{{JSON.stringify(storeDetail.goodsImageList) !== 'null' ? storeDetail.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="fs38">￥</text>
									<text class="fs44">{{storeDetail.goodsPrice}}</text>
								</view>
								<view class="u-f u-f-fdc u-f-jcc">
									<text class="share-icon"></text>
									<text class="main-color fs22 fw400">分享</text>
								</view>
							</view>
							<view class="fw700 fs32 light-black two-line-ellipsis mg-bot-16">{{storeDetail.goodsName}}
							</view>
							<view class="fw400 fs24 light-gray mg-bot-30">月售 {{storeDetail.monthlySales}}</view>
							<!-- <view class="youhuiquan u-f u-f-aic u-f-jcsb">
								<view class="u-f u-f-jcfs u-f-aic"> 
									<view class="mg-right-10 main-line-btn">点击领取</view>
									<view class="fs24 main-color">【满200-50优惠券】/绑定</view>
								</view>
								<view class="main-color-right-arrow"></view>
							</view> -->
						</view>

						<view class="common-card mg-bot-20">
							<view class="fw400 fs28 light-black">车型</view>
							<view class="youhuiquan u-f u-f-aic u-f-jcc">
								<view class="main-line-btn one-line-ellipsis" style="width: 100%">
									{{storeDetail.vehicleBrand + storeDetail.vehicleModel + storeDetail.vehicleConfig}}
								</view>
							</view>
						</view>

						<view class="common-card mg-bot-20">
							<view class="u-f u-f-jcfs u-f-aic">
								<view class="fw400 light-gray fs28 mg-right-14 vertical-text">适用门店</view>
								<view class="right u-f u-f-jcfs">
									<view class="mg-right-12">
										<image style="width: 134rpx;height: 134rpx;" :mode="'widthFix'"
											:src="storeDetail.storeImage"></image>
									</view>
									<view>
										<view class="u-f u-f-jcsb u-f-aic mg-bot-10">
											<view class="fs28 fw400 light-black">{{storeDetail.storeName}}</view>
											<view class="u-f u-f-jcfs u-f-aic" @click="goToShopDetail">
												<text class="fs24 fw400 light-gray mg-right-18">更多门店</text>
												<image class="big-gray-right-arrow"
													src="/static/common/big_gray_right_arrow.png" mode=""></image>
											</view>
										</view>
										<view class="mg-bot-10">
											<text class="fs28 light-gray fw400">{{storeDetail.distance}} km</text>
										</view>
										<view class="u-f u-f-jcsb u-f-aic" @click="skipCityMap(storeDetail)">
											<text class="fs28 fw400 light-gray two-line-ellipsis"
												style="flex: 2">{{storeDetail.detailedAddress}}</text>
											<view class="u-f u-f-jcfe u-f-aic" style="flex: 1">
												<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="fw400 light-gray fs28 mg-bot-20">服务详情</view>
							<view class="u-f u-f-jcsb u-f-aic mg-bot-20">
								<view>先进全合成发动机油 4L</view>
								<view class="u-f u-f-jcsb u-f-aic fs24">
									<text class="light-gray mg-right-30">×1</text>
									<text class="light-black">￥128</text>
								</view>
							</view>
							<view class="u-f u-f-jcsb u-f-aic">
								<view>马勒机油滤清器</view>
								<view class="u-f u-f-jcsb u-f-aic fs24">
									<text class="light-gray mg-right-30">×1</text>
									<text class="light-black">￥128</text>
								</view>
							</view>
						</view>

						<view class="user-evlution mg-top-20">
							<view class="ue-title u-f u-f-jcsb u-f-aic" @click="jumpToEvaluationList">
								<common-title :msg="'用户评价'"></common-title>
								<view class="jump-location">
									<image src="../.././static/common/sg_right_arrow.png"
										style="width: 100%;height: 100%"></image>
								</view>
							</view>
							<view v-if="reviewsList.length > 0">
								<view class="ue-user u-f u-f-jcfs u-f-aic mg-top-16">
									<image class="avatar mg-right-10" style="border-radius: 50%;"
										:src="reviewsList[0].avatarUrl"></image>
									<view class="user-desc">
										<view class="fs26 fw400 light-black mg-bot-8">{{reviewsList[0].nickName}}</view>
										<view class="evaluate-wrap u-f u-f-jcfs">
											<view class="fs24 fw400 light-gray mg-right-10">
												{{reviewsList[0].createTime}}
											</view>
											<view class="evaluate u-f">
												<view class="star-icon" v-for="i in reviewsList[0].score" :key="i">
												</view>
												<view class="star-num fs24">{{reviewsList[0].score}}分</view>
											</view>
										</view>
									</view>
								</view>
								<view class="ue-content mg-top-24">
									<view class="light-black ellipsis mg-bot-10 fs24 fw400"
										v-if="reviewsList[0].commentContent">
										{{reviewsList[0].commentContent}}
									</view>
									<view class="image-list u-f u-f-jcfs"
										v-if="reviewsList[0].commentImageList && Object.prototype.toString.call(reviewsList[0].commentImageList) !== '[object Null]'">
										<view class="image-item mg-right-12"
											v-for="(innerItm,innerIdx) in reviewsList[0].commentImageList"
											:key="innerIdx">
											<image class="image-item" :mode="'widthFix'" :src="innerItm"></image>
										</view>
									</view>
								</view>
							</view>
							<view v-else class="fs24 light-gray mg-top-30" style="text-align: center;">暂无评论</view>
						</view>

						<view class="common-card mg-bot-20">
							<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="fw400 fs32 mg-right-16">商品详情</view>
									<view class="right-line"></view>
								</view>
							</view>
						</view>

						<view class="common-card mg-bot-34">
							<view class="good-detail">
								<rich-text :nodes="storeDetail.serviceIntroduction"></rich-text>
								<!-- <image src="../.././static/common/exclamation_ point.png" class="gantanhao"></image> -->
								<text class="light-gray fs24 fw400">“平台只为用户和商家提供服务，开发票请找服务商家”</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="fix-bot u-f u-f-jcsa u-f-aic">
				<view class="left u-f u-f-jcfs u-f-aic">
					<view class="u-f u-f-fdc u-f-jcc mg-right-48" @click="addCollection">
						<image v-show="goodsDetail.isCollect" class="already-collect mg-bot-10"
							src="../.././static/common/star.png"></image>
						<text v-show="!goodsDetail.isCollect" class="collect mg-bot-10"></text>
						<!-- onCollect -->
						<text class="light-black fs24 fw400">收藏</text>
					</view>
					<view class="u-f u-f-fdc u-f-jcc" @click="showCusServeicePopup">
						<text class="serve-person mg-bot-10"></text>
						<text class="light-black fs24 fw400">客服</text>
					</view>
				</view>
				<view class="right u-f u-f-jcfs u-f-aic">
					<view class="default-line-btn mg-right-10" @click="handleShowChoiseSize(1)">加购物车</view>
					<view class="main-btn" @click="handleShowChoiseSize(2)">立即购买</view>
				</view>
			</view>
		</view>

		<uni-popup :position="'bottom'" :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="goodsDetail.goodsImageList&&goodsDetail.goodsImageList[current]">
						</image>

						<view class="u-f u-f-fdc u-f-aifs">
							<view class="light-black fs28 ellipsis" style="text-align: left;">{{goodsDetail.goodsName}}
							</view>
							<view class="u-f u-f-jcfs u-f-aic">
								<view class="light-black mg-right-18 main-color">
									<text class="fs38">￥</text>
									<text
										class="fs44">{{(goodsDetail.specificationListList&&goodsDetail.specificationListList[active].specificationsUnitPrice) || goodsDetail.goodsPrice}}</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 goodsDetail.specificationListList" :key="item.specificationsId"
								@click="handleTabChooseSize(index, item)">
								{{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="goodsNum"></uni-number>
						</view>
					</view>

					<view class="u-f u-f-aic u-f-jcc" style="width: 100%;">
						<view class="line-gradient-btn" style="flex: 1;padding: 22rpx 0;" @click="addToShopCar">
							{{isShowCart == 1?'加入购物车':'立即购买'}}
						</view>
					</view>

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

		<!-- 客服 -->
		<uni-popup :position="'middle'" :show="showBotPopup" @hidePopup="hideCusServeicePopup">
			<view class="sys-mes-nofity">
				<view class="top u-f u-f-aic u-f-jcc">联系客服</view>
				<view class="mg-top-28">客服电话：{{customerService.cusServicePhone}}</view>
				<view class="bot u-f u-f-jcc u-f-aic" @click="callOut(customerService.cusServicePhone)">
					<text class="confirm">拨打电话</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import commonTitle from "../.././components/common-title/common-title.vue"
	import {
		getCusNavBarInfo
	} from "../.././common/customizeNavBarInfo.js"
	import uniNumber from "../.././components/uni-number-box/uni-number-box.vue"
	export default {
		components: {
			commonTitle,
			uniNumber
		},
		data() {
			return {
				goodsNum: 1,
				active: 0,
				current: 0,
				storeId: 0,
				paddingTop: 0,
				showChoiseSize: false,
				goodsDetail: {},
				currentSwiperImg: '',
				showBotPopup: false,
				goodsSpecificationId: 0,
				goodsSpecification: '',
				isShowCart: 1
			}
		},
		mounted() {
			let {
				customizeNavBarHeight
			} = getCusNavBarInfo()
			this.paddingTop = customizeNavBarHeight + 'px'
		},
		onLoad(option) {
			this.storeId = option.storeId
			this.goodsId = option.goodsId
			this.getStoreGoodDetail()
			this.getReviewsList()
			this.getCustomerService()

			console.log("storeId", this.storeId)
			console.log("goodsId", this.goodsId)
		},
		methods: {
			async getStoreDetail() {
				let data = {
					"lon": this.User.curcity.lng,
					"lat": this.User.curcity.lat,
					"storeId": this.storeId,
				}

				let res = await this.$http.post('/api/client/store/details', data)
				let storeDetail = res.data.data
				this.storeDetail = storeDetail
				this.goodsSpecificationId = this.goodsDetail.specificationListList ? this.goodsDetail
					.specificationListList[
						this.active].specificationsId : 0
				this.goodsSpecification = this.goodsDetail.specificationListList ? this.goodsDetail
					.specificationListList[
						this.active].specificationsName : ''
				console.log("storeDetail", storeDetail)
			},
			async getStoreGoodDetail() {
				let data = {
					"lon": this.User.curcity.lng,
					"lat": this.User.curcity.lat,
					"goodsId": this.goodsId,
					"storeId": this.storeId,
					"userCarId": uni.getStorageSync('cartId')
				}
				let res = await this.$http.post('/api/client/index/maintenanceGoodsDetails', data)
				let storeDetail = res.data.data
				this.storeDetail = res.data.data
				this.goodsDetail = res.data.data
				this.setFirstImg()
				console.log("storeDetail", storeDetail)
			},
			async getReviewsList() {
				let data = {
					"pageNum": 1,
					"pageSize": 5,
					"goodsId": this.goodsId,
					"storeId": this.storeId
				}

				let res = await this.$http.post('/api/client/store/reviewsList', data)
				let reviewsList = res.data.data.rows
				this.reviewsList = reviewsList || []
			},
			async getCustomerService() {
				let res = await this.$http.get('/api/client/userInfo/customerService')
				let customerService = res.data.data
				this.customerService = customerService
			},
			async addToShopCar() {

				if (this.isShowCart == 1) {
					let data = {
						"goodsSpecificationId": this.goodsSpecificationId,
						"goodsSpecification": this.goodsSpecification,
						"goodsId": this.goodsId,
						"storeId": this.storeId,
						"goodsNum": this.goodsNum
					}
					this.handleHideChoiseSize()
					let res = await this.$http.post('/api/client/shopping/add', data, {
						token: true,
						checkToken: true
					})
					let resData = res.data
					console.log("resData", resData)

					uni.showToast({
						title: resData.msg,
						duration: 500
					})

				} else {
					this.createBill()
				}

			},
			async createBill() {
				let data = {
					"storeId": this.storeId,
					"type": 1,
					// "userCarId": 0,
					"goodsId": this.goodsId,
					// "specificationsId": this.goodsSpecificationId,
					"goodsNum": this.goodsNum,
					"lon": this.User.curcity.lng,
					"lat": this.User.curcity.lat
				}

				console.log("createBill", data)
				let res = await this.$http.post('/api/client/order/createOrder', data)
				console.log(res);
				if (res.data.code == 200) {
					let goodsInfo = res.data.data
					// app.data = goodsInfo
					this.User.navigate({
						url: "/pages/good-product-buy/good-product-buy?data=" + encodeURIComponent(JSON
							.stringify(goodsInfo))
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					})
				}
			},
			enterShopCar() {
				uni.navigateTo({
					url: '/pages/shop-car/shop-car'
				})
			},
			handleClickLeft() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			changeswiper(e) {
				this.current = e.detail.current
				this.setFirstImg()
			},
			setFirstImg() {
				this.currentSwiperImg = this.storeDetail.goodsImageList[this.active]
			},
			showCusServeicePopup() {
				this.showBotPopup = true
				console.log("showCusServeicePopup", this.showBotPopup)
			},
			hideCusServeicePopup() {
				this.showBotPopup = false
			},
			jumpToEvaluationList() {
				this.User.navigate({
					url: '/pages/evaluation-list/evaluation-list?storeId=' + this.storeId
				})
			},
			callOut(data) {
				console.log("呼叫");
				uni.makePhoneCall({
					phoneNumber: data, //要拨打的手机号
					success: (res) => {
						// console.log("调用成功")
					},
					fail: (res) => {
						// console.log('调用失败!')
					}
				})
			},
			//收藏
			addCollection() {
				this.$http.post('/api/client/collectionRecord/addCollection', {
					targetId: this.goodsId,
					storeId: this.goodsDetail.storeId,
					type: 2
				}).then(res => {
					this.goodsDetail.isCollect = !this.goodsDetail.isCollect
					if (this.goodsDetail.isCollect) {
						uni.showToast({
							icon: 'none',
							title: '收藏成功'
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: '取消收藏成功'
						})
					}
				})
			},
			handleShowChoiseSize(type) {
				this.showChoiseSize = true;
				this.isShowCart = type
			},
			handleHideChoiseSize() {
				this.showChoiseSize = false;
			},
			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.User.navigate({
					url: "/pages/shop-detail/shop-detail?id=" + this.storeDetail.storeId
				}, "navigateTo", true);
			}
		}
	}
</script>

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

<style lang="scss" scoped>
	.maintenance-detail {
		.back-wrap {
			width: 100%;
			height: 100%;
		}

		.content {
			position: relative;

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

			.swiper-wrap {
				position: relative;

				.swiper {
					height: 750rpx;

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

				.shop-car {
					padding-top: 10rpx;
					position: absolute;
					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;
				}
			}

			.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;
									}

									.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;
			background-color: #ffffff;
			height: 150rpx;
		}
	}

	.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;
	}

	.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%;
	}

	.already-collect {
		width: 40rpx;
		height: 40rpx;
	}

	.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: 28rpx;
		border-radius: 40rpx;
		text-align: center;
		background-color: transparent;
		border: 1rpx solid #707070;
		width: 204rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
	}

	.main-btn {
		color: #ffffff;
		font-size: 28rpx;
		background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		width: 311rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
	}

	.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;
			}
		}
	}


	.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;
			}
		}
	}

	.sys-mes-nofity {
		padding: 0 90rpx;
		padding-bottom: 50rpx;
		position: relative;
		width: 100%;
		background: linear-gradient(180deg, #FFE3D9 0%, #FFFFFF 100%);
		border-radius: 14rpx;

		.top {
			border-radius: 14rpx;
			height: 148rpx;
		}

		.bot {
			margin-top: 72rpx;

			.confirm {
				padding: 10rpx 60rpx;
				border-radius: 30rpx;
				color: #ffffff;
				background-color: #FF4502;
			}
		}
	}
</style>