<template>
	<view class="shop-detail mg-lr-24">
		<view class="swiper-wrap">
			<swiper class="swiper" :next-margin="'180rpx'" :circular="true">
				<swiper-item v-for="(item, index) in storeDetail?.pictureList" :key="index">
					<view class="swiper-item mg-right-20">
						<image :src="item" class="border-radius-9" :mode="'aspectFill'"
							@click="previewImage(storeDetail?.pictureList,index)"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="fix-left u-f u-f-aic u-f-jcc" @click="addCollection"
				style="position: fixed; top: 20rpx; right: 20rpx;">
				<image style="width: 40rpx;height:40rpx;"
					:src="storeDetail.isCollect?'../../static/common/collect2.png':'../../static/common/collect.png'">
				</image>
			</view>
		</view>
		<view class="shop-online-info mg-bot-20">
			<view class="shop-info u-f u-f-jcsb u-f-aic mg-bot-22">
				<view class="shop-name fs32 fw600">{{storeDetail.storeName}}</view>
				<view class="shop-month-sell fs24 fw400">月销{{storeDetail.monthlySales}}</view>
			</view>
			<view class="deep-gray fs28 fw400 border-bot mg-bot-20" style="padding-bottom: 20rpx;">
				服务范围：{{storeDetail.businessScope}}
			</view>
			<view class="time u-f u-f-jcsb u-f-aic border-bot mg-bot-20" style="padding-bottom: 20rpx;">
				<view class="detail-time fs28 fw400">
					营业时间 {{storeDetail.openingHours}} - {{storeDetail.closingHours}}
				</view>
				<view class="call u-f u-f-jcfe u-f-aic">
					<image class="call-icon" @click.stop="markPhone(storeDetail)"
						src="../.././static/common/phoneImg.png"></image>
				</view>
			</view>
			<view class="address u-f u-f-jcsb">
				<view class="detail-address">
					<text class="black">{{storeDetail.distance}}km&nbsp;&nbsp;|</text>
					<text class="gray one-line-ellipsis"
						style="margin-left: 10rpx;">{{storeDetail.detailedAddress}}</text>
				</view>
				<view class="address-icon-wrap u-f u-f-jcfe u-f-aic">
					<image class="address-icon" @click.stop="skipCityMap(storeDetail)" src="/static/common/send.png"
						:mode="'widthFix'"></image>
				</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="reviewsTotal==0?'用户评价':'用户评价('+reviewsTotal+')条'"></common-title>
				<view class="jump-location">
					<image src="../.././static/common/sg_right_arrow.png" style="width: 100%;height: 100%"
						:mode="'widthFix'"></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="u-f u-f-aic">
							<view style="color: #999999;font-size: 24rpx;margin-right: 10rpx;">
								{{reviewsList[0].createTime}}
							</view>
							<image style="width: 30rpx;height: 30rpx;" src="/static/common/star.png"
								v-for="i in reviewsList[0].score==0?5:reviewsList[0].score" :key="i" mode="">
							</image>
							<view style="color: #F2CB51;font-size: 24rpx;">
								{{reviewsList[0].score==0?5:reviewsList[0].score}}.0分
							</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 :mode="'widthFix'" :src="innerItm"></image>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="fs24 light-gray mg-top-30">暂无评论</view>
		</view>

		<view class="shop-server-type">
			<view class="tab-list u-f u-f-jcfs u-f-fww mg-bot-38">
				<view class="tab-item fw600" v-for="(item, index) in goodsType" :key="index">
					<common-tab class="item-content" style="wdith: 100%;" :acitve-tab="activeGoodsType" :item="item"
						@tab-item="item => handleTabItem(item, index)"></common-tab>
				</view>
			</view>

		</view>
		<view class="tab-content-list" v-if="newslist.length">
			<view class="tab-content mg-bot-24" v-for="item in newslist[tabIndex].list" :key="item.goodsId"
				@click="goDetail('/pagesB/shop-goods-detail/shop-goods-detail?storeId='+this.storeId+'&goodsId='+item.goodsId)">
				<view class="car-info-item u-f u-f-jcsb">
					<view class="left u-f u-f-jcfs f-3">
						<view class="image mg-right-14">
							<image :src="item.goodsImage" class="border-radius-9"></image>
						</view>
						<view class="name u-f u-f-fdc u-f-jcsb">
							<text class="car-name fs26 fw400">{{item.goodsName}}</text>
							<view class="price">
								<text class="fs22">￥</text>
								<text class="fs30 fw600">{{item.goodsPrice}}</text>
							</view>
						</view>
					</view>
					<view class="right u-f u-f-fdc u-f-jcsb f-1">
						<view><text class="bug fs24">抢购</text></view>
						<view class="total-sell fs26 fw400">总售 {{item.totalSales}}</view>
					</view>
				</view>
			</view>
			<!-- <view class="check-more u-f u-f-jcc u-f-aic mg-top-34">
				<view class="check-more-center u-f" @click="loadMore">
					<text class="mg-right-10 fs24">{{newslist[tabIndex].loadtext}}</text>
					<image src="../.././static/common/gray_down_arrow.png" class="more" v-show="newslist[tabIndex].loadtext !== '没有更多数据了'"></image>
				</view>
			</view> -->
		</view>

	</view>
</template>

<script>
	import commonTab from "../../components/common-tab/common-tab.vue"
	import commonTitle from "../../components/common-title/common-title.vue"
	export default {
		components: {
			commonTab,
			commonTitle
		},
		data() {
			return {
				storeId: 0,
				storeDetail: {
					isCollect: false
				},
				pageNum: 1,
				pageSize: 4,
				reviewPageNum: 1,
				reviewPageSize: 1,
				typeId: '',
				activeGoodsType: 0,
				goodsType: [],
				storeGoodsList: [],
				reviewsList: [],
				tabIndex: 0,
				newslist: [],
				total: 0,
				reviewsTotal: 0,
			}
		},
		onLoad(option) {
			this.storeId = option.id
			this.getStoreDetail()
			this.getGoodsType()

			console.log("storeId", this.storeId)
		},
		onReachBottom() {
			if (this.total == this.newslist[this.tabIndex].list.length) {
				wx.showToast({
					title: '没有更多啦！',
					icon: 'none'
				})
			} else {
				this.newslist[this.tabIndex].page++
				this.getStoreGoodsList();
			}
			console.log("触底");
		},
		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
			},
			async getGoodsType() {
				let data = {
					"storeId": this.storeId
				}

				let res = await this.$http.get('/api/client/store/goodsType', data)
				let list = res.data.data

				let arr = [];
				let arr2 = [];
				for (let i = 0; i < list.length; i++) {
					arr.push({
						id: list[i].value,
						name: list[i].label
					})
					arr2.push({
						loadtext: "查看更多",
						list: [],
						page: 1,
						firstload: false
					});
				}
				this.goodsType = arr;
				this.newslist = arr2;

				if (this.goodsType.length > 0) {
					this.activeGoodsType = this.goodsType[this.tabIndex].id
					this.getStoreGoodsList()
				}

				this.getReviewsList()

			},
			loadMore() {
				if (this.newslist[index].loadtext != "查看更多") {
					return;
				}
				// 修改状态
				this.newslist[index].loadtext = "加载中...";
				this.newslist[this.tabIndex].page++;
				this.getStoreGoodsList();
			},
			async getStoreGoodsList() {
				if (this.newslist[this.tabIndex].loadtext === "没有更多数据了") {
					return
				}

				let data = {
					"pageNum": this.newslist[this.tabIndex].page,
					"pageSize": this.pageSize,
					"storeId": this.storeId,
					"typeId": this.goodsType[this.tabIndex].id
				}

				let res = await this.$http.post('/api/client/store/storeGoodsList', data)
				let list = res.data.data.rows
				this.total = res.data.data.total
				console.log(this.newslist, "newslist");
				this.newslist[this.tabIndex].list = this.newslist[this.tabIndex].page > 1 ? this.newslist[this
					.tabIndex].list.concat(list) : list;
				this.newslist[this.tabIndex].firstload = true;
				// if (list.length < 10) {
				// 	this.newslist[this.tabIndex].loadtext = "没有更多数据了";
				// } else {
				// 	this.newslist[this.tabIndex].loadtext = "查看更多";
				// }
			},
			async getReviewsList() {
				let data = {
					"pageNum": this.reviewPageNum,
					"pageSize": this.reviewPageSize,
					"storeId": this.storeId
				}

				let res = await this.$http.post('/api/client/store/reviewsList', data)
				let reviewsList = res.data.data.rows
				this.reviewsList = reviewsList
				this.reviewsTotal = res.data.data.total
			},
			goDetail(url) {
				uni.navigateTo({
					url: url
				})
			},
			handleTabItem(item, index) {
				console.log("index", index)
				console.log("item", item)
				this.tabIndex = index
				this.activeGoodsType = this.goodsType[this.tabIndex].id
				this.getStoreGoodsList()
			},
			markPhone(data) {
				if (!data.personChargePhone) {
					uni.showToast({
						icon: "none",
						title: "暂无联系方式"
					})
					return
				}
				uni.makePhoneCall({
					phoneNumber: data.personChargePhone
				})
			},
			skipCityMap(data) {
				console.log(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)
					}
				})
			},
			jumpToEvaluationList() {
				if (!this.reviewsList.length) {
					uni.showToast({
						icon: "none",
						title: "暂无更多评价"
					})
					return
				}
				this.User.navigate({
					url: '/pages/evaluation-list/evaluation-list?storeId=' + this.storeId
				})
			},
			addCollection() {
				this.$http.post('/api/client/collectionRecord/addCollection', {
					targetId: this.storeId,
					storeId: this.storeId,
					type: 1
				}).then(res => {
					this.storeDetail.isCollect = !this.storeDetail.isCollect
					if (this.storeDetail.isCollect) {
						uni.showToast({
							icon: 'none',
							title: '收藏成功'
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: '取消收藏成功'
						})
					}
				})
			},
			//预览图片
			previewImage(urls, current) {
				console.log(urls)
				console.log(current)
				uni.previewImage({
					urls: urls,
					current
				})
			},
		}
	}
</script>
<style>
	page {
		background-color: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	.ellipsis {
		display: -webkit-box;
		/*弹性伸缩盒子模型显示*/
		-webkit-box-orient: vertical;
		/*排列方式*/
		-webkit-line-clamp: 2;
		/*显示文本行数(这里控制多少行隐藏)*/
		overflow: hidden;
		/*溢出隐藏*/
	}

	.shop-detail {
		.swiper-wrap {
			.swiper {
				.swiper-item {
					height: 260rpx;
					overflow: hidden;
					border-radius: 18rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.fix-left {
				width: 67rpx;
				height: 67rpx;
				position: absolute;
				right: 20rpx;
				top: 10rpx;
				background-color: #ffffff;
				border-radius: 50%;
			}
		}

		.shop-online-info {
			background: #FFFFFF;
			border-radius: 18rpx 18rpx 18rpx 18rpx;
			padding: 30rpx 20rpx 20rpx 38rpx;

			.shop-info {
				.shop-name {
					color: #333333;
				}

				.shop-month-sell {
					color: #999999;
				}
			}

			.time {
				.detail-time {
					flex: 3;
					color: #999999;
				}

				.call {
					flex: 1;

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

			.address {
				.detail-address {
					font-size: 28rpx;
					display: flex;
					align-items: center;
					flex: 5;

					.black {
						color: #333333;
					}

					.gray {
						color: #999999;
					}
				}

				.address-icon-wrap {
					flex: 1;

					.address-icon {
						width: 56rpx;
						height: 56rpx;
					}
				}
			}
		}

		.shop-server-type {
			// padding: 36rpx 20rpx 20rpx 22rpx;
			padding: 36rpx 20rpx 0 22rpx;
			background-color: #ffffff;
			// border-radius: 18rpx;
			border-top-left-radius: 20px;
			/* 设置左下角圆角 */
			border-top-right-radius: 20px;

			/* 设置右下角圆角 */
			.tab-list {
				margin-bottom: 0 !important;

				.tab-item {
					position: relative;
					flex: 25%;
					max-width: 25%;
					// margin-bottom: 30rpx;
				}
			}



			.check-more {
				.check-more-center {
					.margin-right-10 {
						color: #333333;
					}

					.more {
						width: 30rpx;
						height: 30rpx;
						// background: url(../.././static/common/gray_down_arrow.png) no-repeat center center;
						background-size: 50%;
					}
				}
			}
		}

		.user-evlution {
			background-color: #ffffff;
			padding: 20rpx;
			margin-bottom: 20rpx;

			.ue-title {
				.jump-location {
					width: 16rpx;
					height: 16rpx;
				}
			}

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

				.user-desc {
					.evaluate-wrap {
						height: 32rpx;
						align-items: center;

						.evaluate {
							height: 32rpx;
							align-items: center;

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

	.f-1 {
		flex: 1;
	}

	.f-3 {
		flex: 3;
	}

	.tab-content-list {
		background-color: #ffffff;
		// margin-top: 20rpx;
		padding: 20rpx;
		border-bottom-left-radius: 20px;
		/* 设置左下角圆角 */
		border-bottom-right-radius: 20px;

		/* 设置右下角圆角 */
		.tab-content {
			.car-info-item {
				.left {
					image {
						width: 130rpx;
						height: 130rpx;
					}

					.name {
						width: 400rpx;

						.car-name {
							color: #333333;
						}

						.price {
							color: #FF4502;
						}
					}
				}

				.right {
					width: 130rpx;
					justify-content: right;
					text-align: right;
					align-items: center;

					view {
						.bug {

							padding: 10rpx 24rpx;
							background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);
							border-radius: 26rpx 26rpx 26rpx 26rpx;
							color: #ffffff;
						}
					}

					.total-sell {
						margin-top: 20rpx;
						color: #999999;
					}
				}
			}
		}
	}

	.item-content :deep(.name) {
		font-weight: bold;
	}
</style>