<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 in storeDetail?.pictureList">
					<view class="swiper-item mg-right-20">
						<image :src="item"></image>
					</view>
				</swiper-item>
			</swiper>
		</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 fw700">{{storeDetail.storeName}}</view>
				<view class="shop-month-sell fs24 fw400">月销{{storeDetail.monthlySales}}</view>
			</view>
			<view class="deep-gray fs28 fw400 mg-bot-40">
				服务范围：{{storeDetail.businessScope}}
			</view>
			<view class="time u-f u-f-jcsb mg-bot-22">
				<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 fs28 u-f u-f-jcfs u-f-aic one-line-ellipsis">
					<text class="black">{{storeDetail.distance}}km</text>
					<text class="gray">| {{storeDetail.address}}</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="shop-server-type">
			<view class="tab-list u-f u-f-jcfs u-f-fww mg-bot-38">
				<view class="tab-item" v-for="(item, index) in goodsType" :key="index">
					<common-tab style="wdith: 100%" :acitve-tab="activeGoodsType" :item="item"
						@tab-item="handleTabItem"></common-tab>
				</view>
			</view>
			<view class="tab-content-list">
				<view class="tab-content mg-bot-24" v-for="item in storeGoodsList" :key="item.goodsId"
					@click="goDetail('/pages/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"></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">{{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">{{loadMoreText}}</text>
						<text class="more" v-show="loadMoreText !== '没有更多数据了'"></text>
					</view>
				</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%" :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="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">
									<image src="../.././static/common/star.png" style="width: 100%;height: 100%;"></image>
								</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 :mode="'widthFix'" :src="innerItm"></image>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="fs24 light-gray mg-top-30">暂无评论</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: {},
				pageNum: 1,
				pageSize: 3,
				reviewPageNum: 1,
				reviewPageSize: 1,
				typeId: '',
				activeGoodsType: 0,
				goodsType: [],
				storeGoodsList: [],
				reviewsList: [],
				loadMoreText: '查看更多'
			}
		},
		onLoad(option) {
			this.storeId = option.id
			this.getStoreDetail()
			this.getGoodsType()

			console.log("storeId", this.storeId)
		},
		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 goodsType = res.data.data
				this.goodsType = goodsType.map(item => {
					return {
						name: item.label,
						id: item.value
					}
				})
				this.activeGoodsType = this.goodsType[0].id
				this.getStoreGoodsList()
				this.getReviewsList()
			},
			loadMore() {
				if (this.loadMoreText !== "没有更多数据了") {
					this.pageNum++
					this.getStoreGoodsList()
				}
			},
			async getStoreGoodsList() {
				if (this.loadMoreText === "没有更多数据了") {
					return
				}

				let data = {
					"pageNum": this.pageNum,
					"pageSize": this.pageSize,
					"storeId": this.storeId,
					"typeId": this.activeGoodsType
				}

				let res = await this.$http.post('/api/client/store/storeGoodsList', data)
				let storeGoodsList = res.data.data.rows

				if (storeGoodsList.length > 0) {
					this.storeGoodsList = [...this.storeGoodsList, ...storeGoodsList]
					this.loadMoreText = "查看更多"
				} else {
					this.loadMoreText = "没有更多数据了"
				}
			},
			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
			},
			goDetail(url) {
				uni.navigateTo({
					url: url
				})
			},
			handleTabItem(item) {
				this.activeGoodsType = item.id
				this.pageNum = 1
				this.getStoreGoodsList()
			},
			markPhone(data){
				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() {
				this.User.navigate({url: '/pages/evaluation-list/evaluation-list?storeId='+this.storeId})
			}
		}
	}
</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%;
					}
				}
			}
		}

		.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 {
				border-bottom: 1rpx solid #F0F0F0;
				.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 {
				border-bottom: 1rpx solid #F0F0F0;
				.detail-address {
					flex: 3;
					.black {
						color: #333333;
					}

					.gray {
						color: #999999;
					}
				}

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

		.shop-server-type {
			padding: 36rpx 20rpx 20rpx 22rpx;
			background-color: #ffffff;
			border-radius: 18rpx;

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

			.tab-content-list {
				.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;
							}
						}
					}
				}
			}

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

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

			.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%;
						}
					}
				}
			}
		}
	}
	.f-1 {
		flex: 1;
	}
	.f-3 {
		flex: 3;
	}
</style>