<template>
	<view id="boxFixed">
		<view class="flex align-center" v-if="showTabBar"
			style="width: 100%;background-color: #FFFFFF; z-index: 9999; position: fixed;">
			<cu-custom isBack="true">
				<block slot="content">
					详情
				</block>
			</cu-custom>
		</view>
		<view style="position: relative;">
			<image v-if="!showTabBar" src="../../static/shop_details_back_icon.png" @click.stop="pageBack"
				style="position: absolute;left: 0;top: 62rpx; z-index: 999;width: 60rpx;height: 60rpx;left: 35rpx;">
			</image>
			<!-- <u-swiper :list="imageSwiper" height="600" mode="none" @click="imageSwiperClick"></u-swiper> -->
			<!-- 			<image style="height: 600rpx; z-index: 1;" mode="heightFix" :src="imageUrl" v-for="item in commentList">
			</image> -->

            <swiper class="swiper" style="height: 600rpx;" circular :autoplay="!isVodeoPlay" :indicator-dots="imageSwiper.length>1" indicator-active-color="#fff" @change="swiperChange" v-if="imageSwiper.length>0">
				<swiper-item v-for="(item,indexurl) in imageSwiper" :key="indexurl" @tap="swiperClick(item.url,indexurl,imageSwiper)">
					<view class="swiper-item">
						<image v-if="item.type=='001'" :src="item.url" mode="scaleToFill"></image>

						<view class="swiper-video" v-if="item.type=='002'" @tap.stop="videoPlayClick(item.url)">
							<view class="play-btn-img"><image src="../../static/video-black.png" v-if="item.type=='002'&&!isVodeoPlay" class="img"></image></view>
							<video id="myVideoBanner" v-show="item.type=='002'" :src="item.url"
							:show-center-play-btn="false" :poster="item.url+'?x-oss-process=video/snapshot,t_1000,f_jpg,w_0,h_0,m_fast,ar_auto'"
							:initial-time="initialTime"
							@ended="videoPause" @play="videoPlay" @pause="videoPause" :show-fullscreen-btn='false'
							:enable-progress-gesture='false' :controls="false" :key="swiperKey">
								<cover-view class="controls-title" @tap.stop="videoPlayClick(item.url)"></cover-view>
							</video>
						</view>

					</view>
				</swiper-item>
			</swiper>


		</view>
		<view
			style="background-color: #FFFFFF;border-top-left-radius: 20rpx; border-top-right-radius: 20rpx;z-index: 999;position: absolute;top: 560rpx;width: 100%;">
			<view class="title_text break-word">{{personDetail.name}}</view>

            <view class="margin-top spec_item_scroll">
                <scroll-view scroll-x="true" style="white-space: nowrap;" class="padding-lr-sm">
                    <view v-for="spec in specList" :key="spec.goodsSpecificationId"
					:class="[specId==spec.goodsSpecificationId?'active_spec_item':'',specList.length==1?'once-item':'more-item']"
                    class="spec_item margin-right-sm padding-left padding-right-sm padding-top-sm padding-bottom"
					@tap="specId=spec.goodsSpecificationId,payPrice=spec.currentPrice,usedPrice=spec.scribingPrice">
                        <view class="flex align-center" style="width:100%;" :class="specList.length==1?'':'justify-between'">
                            <view style="font-size:30rpx;color:#111;white-space:normal !important;" class="break-word wb_hide_2">{{spec.specificationDesc}}</view>
                            <view class="spec_times">{{spec.times}}次</view>
                        </view>
                        <view class="flex flex-wrap align-center margin-top-sm" style="color:#FF0000;font-weight: bold;">
                            <view style="font-size: 40rpx;" class="margin-right-sm">{{spec.currentPrice}} <span style="font-size: 24rpx;">元</span> </view>
                            <view style="text-decoration: line-through;color: #999999;font-size: 26rpx;font-weight: 500;">{{spec.scribingPrice}}元</view>
                        </view>
                        <image src="../../static/group_checked.png" style="position: absolute;width:45rpx;height:45rpx;right:0;bottom:0;" v-if="specId==spec.goodsSpecificationId"></image>
                    </view>

                </scroll-view>
            </view>

			<view style="background-color: #FAF6F1; border-radius: 15rpx;margin-top: 50rpx;margin-left: 20rpx;margin-right: 20rpx;padding-top:34rpx;"
                v-if="personDetail.goodsServerDimensionList&&personDetail.goodsServerDimensionList.length>0">
                <view class="flex align-center padding-left">
                    <view class="flex align-center" v-for="(item,index) in personDetail.goodsServerDimensionList.slice(0,3)" :key="item.id" >
                        <text style="color: #666666;font-size: 26rpx;" class="break-word">{{item.dimensionName}}</text>
                        <text style=" margin-left: 8rpx;color: #111;font-size: 26rpx;font-weight: bold;">{{item.score.toFixed(1)}}</text>
                        <view class="" style="background-color:#E4CEB3;width: 2rpx;height: 19rpx;margin:0 30rpx;" v-if="index<2"></view>
                    </view>
                </view>

				<view class="flex align-center justify-between padding-left" style="border-bottom-left-radius: 15rpx;border-bottom-right-radius: 15rpx;padding-top: 12rpx;padding-bottom: 12rpx;">
					<view class="flex align-center">
						<text style="font-size: 22rpx;color: #FC6035;" v-if="personDetail.score">综合评分：</text>
						<text v-if="personDetail.score" style="font-size: 24rpx; color: #FC6035;font-weight: bold;">{{personDetail.score.toFixed(1)}}</text>
						<u-rate :current="personDetail.score" :disabled="true" size="24" custom-prefix="custom-icon" active-icon="Star" inactive-color="#ccc" v-if="personDetail.score" style="margin-left: 10rpx;"></u-rate>
					</view>
					<view class="good_comment" style=" margin-right: 20rpx;" v-if="personDetail.rate>0">
						好评率{{personDetail.rate}}%
					</view>
				</view>
			</view>

			<view style="margin-left: 30rpx;margin-right: 45rpx;margin-top: 43rpx;padding-bottom: 38rpx;"
				:style="{'border-bottom': (personDetail.desc != null && personDetail.desc.length>0)? '1rpx solid #EEE': ''}">
				<view class="flex align-center">
					<view
						:class="personDetail.merchantType==0?'company_auth':personDetail.merchantType==1?'company_auth_active':''">
						{{personDetail.merchantType==0?'企业认证':personDetail.merchantType==1?'个人认证':''}}
					</view>
					<text v-if="personDetail.merchantType==0"
						style="font-size: 26rpx;font-weight: 400;color: #4B8DDF;margin-left: 14rpx;">{{personDetail.merchantName}}</text>
				</view>
                <view class="flex align-center justify-between">
                    <view class="flex-sub">
                        <view class="flex align-center" style="margin-top: 30rpx;" v-if="personDetail.merchantType==0">
                            <image src="../../static/shop_address_icon.png" style="width: 30rpx;height: 30rpx;"></image>
                            <view style="margin-left: 17rpx;font-size: 26rpx;color: #111111;margin-right:16rpx;" class="flex-sub break-word ">
                                {{personDetail.merchant.detail}}
                                <text v-if="personDetail.merchant.houseNumber" class="break-word ">{{personDetail.merchant.houseNumber}}</text>
                            </view>
                        </view>
                        <view class="flex align-center " style="margin-top: 24rpx;" @click="viewScope()">
                            <image src="../../static/shop_range_icon.png" style="width: 30rpx;height: 30rpx;" mode="aspectFill">
                            </image>
                            <view style="margin-left: 17rpx;font-size: 26rpx;color: #111111;">
                                <text>查看服务范围</text>
                                <u-icon name="arrow-right" size="12" style="margin-left: 10rpx;color: #666;"></u-icon>

                            </view>
                        </view>
                    </view>

                    <image style="width: 74rpx; height: 74rpx;" src="../../static/shop_phone_icon.png" @tap="call(personDetail.merchant.serverPhone)"></image>
                </view>


			</view>




			<view style="height: 15rpx;background-color: #F6F6F6;"></view>
			<view v-if="personDetail.serviceDesc != null && personDetail.serviceDesc.length>0">
				<u-tabs active-color="#FC6035" inactive-color="#111" height="110" font-size="34"
					style="position: sticky;top: 90rpx;z-index: 11;font-weight: bold;" :list="tabsList"
					:is-scroll="false" :style="{top:CustomBar+'px'}" :current="tabsCurrent" @change="tabsChange"
					:bar-style="barStyle">
				</u-tabs>

                <!-- 服务内容 -->
				<view id="serverContent" style=" background-color: #FFFFFF;">
					<u-parse :html="personDetail.serviceDesc" style="padding:20rpx 30rpx;word-break:break-all;color:#999;"></u-parse>
				</view>


				<!-- 费用说明 -->
				<view id="descriptionFees" style="background-color: #FFFFFF;margin-top: 34rpx;">
					<text style="font-size: 34rpx; font-weight: bold;margin-left: 33rpx;" class="color-06">费用说明</text>
					<view style="margin-top: 30rpx;">
                        <view class="align-center flex" style="color:#111;font-size:26rpx;padding: 0 30rpx 30rpx 30rpx;">
                            有效期：
                            <view v-if="personDetail.expirationDateValue!='-99'">{{personDetail.expirationDateValue}}天</view>
                            <view v-else>永久</view>
                        </view>
						<u-parse :html="personDetail.priceDesc" style="padding:0rpx 30rpx 30rpx 30rpx;word-break:break-all;color:#999;"></u-parse>
					</view>

				</view>

				<view style="height: 15rpx;background-color: #F6F6F6;"></view>
				<!-- 评论内容 -->
				<view id="serverComment" >
					<view class="flex align-center justify-between"
						style="margin-top: 34rpx;margin-left: 33rpx;margin-right: 33rpx;padding-bottom: 34rpx;border-bottom: #EEEEEE 1rpx solid;">
						<text style="font-size: 34rpx; font-weight: bold;" class="color-06">评价</text>
						<text style="font-size: 26rpx;color: #999;" v-if="commentList.length >0" @click="goMoreComment">更多评价 ></text>

						<text style="font-size: 26rpx;color: #999;" v-if="commentList.length ==0"  >暂无评价 </text>
					</view>

					<view class="flex"
						style="margin-left: 39rpx;margin-right: 43rpx; z-index: 10; padding-bottom: 40rpx;"
						v-for="(item,index) in commentList" :key="index">
						<image mode="aspectFill" :src="item.avatar" v-if="item.avatar && item.isAnonymous == 0"
							style="width: 60rpx;height: 60rpx; margin-top: 31rpx;border-radius: 50%;"></image>
						<image mode="aspectFill" src="../../static/avatar_icon.png" v-else
							style="width: 60rpx;height: 60rpx; margin-top: 31rpx;border-radius: 50%;"></image>

						<view style="margin-top: 40rpx;margin-left: 18rpx;flex: 1;">
							<view class="flex align-center justify-between">
								<text
									style="font-size: 30rpx;font-weight: bold;color: #111111;">{{item.isAnonymous ==1?"匿名评价":$formatPhone( item.phone)}}</text>
								<text
									style="font-size: 24rpx;color: #999;">{{item.createTime.substring(0,item.createTime.length-3)}}</text>
							</view>
							<view class="flex align-center" style="margin-top: 10rpx;" v-if="item.score != '' && item.score > 0">
								<text style="font-weight: 500;font-size: 24rpx;color: #FC6035;">评分</text>
								<text
									style="font-weight: bold;font-size: 24rpx;color: #FC6035;">{{item.score.toFixed(1)}}</text>
								<view class="flex align-center" style="margin-left: 10rpx;">
									<u-rate :current="item.score" :disabled="true" size="24" custom-prefix="custom-icon" active-icon="Star" inactive-color="#ccc"
										style="margin-left: 10rpx;"></u-rate>
								</view>

							</view>

							<view class="flex align-center" style="margin-top: 10rpx;">
								<view class="" v-for="ele in item.gradeList" :key="ele.id">
									<view class="flex align-center"
										style=" border: #EEEEEE 1rpx solid;padding:4rpx 14rpx 4rpx 14rpx;margin-top: 9rpx;margin-bottom: 9rpx;margin-right: 10rpx;border-radius: 8rpx;">

										<text style="font-size: 24rpx;font-weight: 500;color: #999;" class="break-word">{{ele.name}}</text>
										<text class="text-bold"
											style="margin-left: 18rpx;font-size: 24rpx;color: #111;">{{ele.score.toFixed(1)}}</text>
									</view>
								</view>
							</view>
							<view style="margin-top: 15rpx;font-size: 28rpx;color: #111;word-break: break-all;">
								{{item.content}}
							</view>
							<view class="flex  flex-wrap">
								<view class="bg-f8 flex align-center justify-center margin-bottom-xs"
									v-for="(ele,index) in item.resourceList" :key="index"
									style="border-radius: 6rpx;overflow: hidden;margin-right: 17rpx;margin-top: 20rpx;"
									@tap.stop="$videoList(index,item.resourceList,'resourceType')">
									<video :src="ele.url" v-if="ele.type=='002'"
									:poster="ele.faceImg"
										style="width: 180rpx;height: 180rpx;"></video>
									<image :src="ele.url" v-else-if="ele.type=='001'"
										style="width: 180rpx;height: 180rpx;">
									</image>
								</view>

							</view>

                            <view style="margin-top: 24rpx;padding-bottom: 26rpx;border-bottom: #EEEEEE 1rpx solid;" v-if="item.reContentTime&&$isBefore(item.reContentTime,item.replyTime)">
								<view class="flex align-center justify-between">
									<view class="flex align-center" @click="item.reContentFlag=!item.reContentFlag">
										<text style="color: #999;font-size: 28rpx;">追评：</text>
										<u-icon v-if="item.reContentFlag" name="arrow-up" color="#999" size="24">
										</u-icon>
										<u-icon v-else name="arrow-down" color="#999" size="24"></u-icon>
									</view>
									<text
										style="color: #999;font-size: 24rpx;">{{item.reContentTime.substring(0,item.reContentTime.length-3)}}</text>
								</view>

								<view v-if="item.reContentFlag&&item.reContent"
									style="margin-top: 12rpx;font-size: 28rpx;color: #111111;word-break: break-all;">
									{{item.reContent}}
								</view>
							</view>
							<view style="margin-top: 20rpx;"
								v-if="item.reply">
								<view class="flex align-center justify-between">
									<view class="flex align-center" @click="item.replyFlag=!item.replyFlag">
										<text style="color: #999;font-size: 28rpx;">商家回复：</text>
										<u-icon v-if="item.replyFlag" name="arrow-up" color="#999" size="24"></u-icon>
										<u-icon v-else name="arrow-down" color="#999" size="24">
										</u-icon>
									</view>
									<text
										style="color: #999;font-size: 24rpx;">{{item.replyTime.substring(0,item.replyTime.length-3)}}</text>
								</view>
								<view v-if="item.replyFlag&&item.reply"
									style="margin-top: 10rpx;font-size: 28rpx;color: #111111;word-break: break-all;">
									{{item.reply}}
								</view>
							</view>
							<view style="margin-top: 24rpx;padding-top: 26rpx;border-top: #EEEEEE 1rpx solid;" v-if="item.reContentTime&&!$isBefore(item.reContentTime,item.replyTime)">
								<view class="flex align-center justify-between">
									<view class="flex align-center" @click="item.reContentFlag=!item.reContentFlag">
										<text style="color: #999;font-size: 28rpx;">追评：</text>
										<u-icon v-if="item.reContentFlag" name="arrow-up" color="#999" size="24">
										</u-icon>
										<u-icon v-else name="arrow-down" color="#999" size="24"></u-icon>
									</view>
									<text
										style="color: #999;font-size: 24rpx;">{{item.reContentTime.substring(0,item.reContentTime.length-3)}}</text>
								</view>

								<view v-if="item.reContentFlag&&item.reContent"
									style="margin-top: 12rpx;font-size: 28rpx;color: #111111;word-break: break-all;">
									{{item.reContent}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="height: 15rpx;background-color: #F6F6F6;"></view>
                <!-- 更多服务 -->
				<view id="serverMore" style="padding-bottom: 140rpx;width: 100vw;background-color: #f6f6f6;">
					<view id="descriptionFees" style="background-color: #f6f6f6;padding-top: 22rpx;">

                        <view class="flex align-center justify-center padding-bottom-sm color-06">
                            <image style="width: 46rpx; height: 46rpx;" src="../../static/more-left.png"></image>
                            <text style="font-size: 34rpx; font-weight: bold;margin:0 24rpx;">更多服务</text>
                            <image style="width: 46rpx; height: 46rpx;" src="../../static/more-right.png"></image>
                        </view>
						<u-waterfall  v-model="flowList"  ref="uWaterfall" style="padding-left:18rpx;">
                            <template v-slot:left="{leftList}">
                                <view @click="gotoDetails(item)" class="demo-warter" v-for="(item, index) in leftList" :key="index">
                                    <!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
                                    <view style="position: relative;">
                                        <u-lazy-load threshold="-450" borderRadiusLRTB="20rpx 20rpx 0 0" :height="260" img-mode="aspectFill" v-if="item.goodsImageList[0].type=='001'" loading-img="../../static/lazy-loading.png"
                                        :image="item.goodsImageList[0].url" :index="index"></u-lazy-load>

                                        <u-lazy-load threshold="-450" borderRadiusLRTB="20rpx 20rpx 0 0" :height="260" img-mode="aspectFill" v-if="item.goodsImageList[0].type=='002'" loading-img="../../static/lazy-loading.png"
                                        :image="item.goodsImageList[0].url+'?x-oss-process=video/snapshot,t_1000,f_jpg,w_0,h_0,m_fast,ar_auto'" :index="index"></u-lazy-load>
                                        <image src='../../static/video.png' class="video-play-position" v-if="item.goodsImageList[0].type=='002'"></image>
                                    </view>
                                    <view class="padding-lr-sm padding-bottom">
                                        <view class="demo-title break-word wb_hide_2 font-weight6">
                                            {{item.name}}
                                        </view>
                                        <view v-if="item.rate>0" style="margin-top: 20rpx;color:#FF0000; font-size: 22rpx;" class="flex align-center justify-center rate-box">
                                            <view style=" text-align: left;">好评率</view>
                                            <view style="margin-left:6rpx;margin-top:4rpx;">{{item.rate}}%</view>
                                        </view>
                                        <view style="margin-top: 20rpx;" class="flex align-center flex-wrap">
                                            <view class="color-ff0 text-lg font-weight5 flex align-center">
                                                <span class="text-sm">￥</span>
                                                <span>{{item.currentPrice}}</span>
                                            </view>
                                            <view style="margin-left: 16rpx; text-decoration:line-through;color: #999;font-size: 26rpx; text-align: left;">
                                                <span>￥</span>{{item.scribingPrice}}
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </template>

                            <template v-slot:right="{rightList}">
                                <view @click="gotoDetails(item)" class="demo-warter" v-for="(item, index) in rightList" :key="index">
                                    <view style="position: relative;">
                                        <u-lazy-load threshold="-450" borderRadiusLRTB="20rpx 20rpx 0 0" :height="260" img-mode="aspectFill" v-if="item.goodsImageList[0].type=='001'" loading-img="../../static/lazy-loading.png"
                                        :image="item.goodsImageList[0].url" :index="index"></u-lazy-load>

                                        <u-lazy-load threshold="-450" borderRadiusLRTB="20rpx 20rpx 0 0" :height="260" img-mode="aspectFill" v-if="item.goodsImageList[0].type=='002'" loading-img="../../static/lazy-loading.png"
                                        :image="item.goodsImageList[0].url+'?x-oss-process=video/snapshot,t_1000,f_jpg,w_0,h_0,m_fast,ar_auto'" :index="index"></u-lazy-load>
                                        <image src='../../static/video.png' class="video-play-position" v-if="item.goodsImageList[0].type=='002'"></image>
                                    </view>
                                    <view class="padding-lr-sm padding-bottom">
                                        <view class="demo-title break-word wb_hide_2 font-weight6">
                                            {{item.name}}
                                        </view>
                                        <view v-if="item.rate>0" style="margin-top: 20rpx;color:#FF0000; font-size: 22rpx;" class="flex align-center justify-center rate-box">
                                            <view style=" text-align: left;">好评率</view>
                                            <view style="margin-left:6rpx;margin-top:4rpx;">{{item.rate}}%</view>
                                        </view>
                                        <view style="margin-top: 20rpx;" class="flex align-center flex-wrap">
                                            <view class="color-ff0 text-lg font-weight5 flex align-center">
                                                <span class="text-sm">￥</span>
                                                <span>{{item.currentPrice}}</span>
                                            </view>
                                            <view style="margin-left: 16rpx; text-decoration:line-through;color: #999;font-size: 26rpx; text-align: left;">
                                                <span>￥</span>{{item.scribingPrice}}
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </template>
                        </u-waterfall>

                        <view class=" flex align-center" v-if="flowList.length==0" style="width: 100vw;">
                            <image src="../../static/nomore_icon.png" mode="" v-if="!emptyLoading"
                                style="width: 370rpx;height: 370rpx;margin-top:80rpx ;margin-left:calc(50% - 185rpx);">
                            </image>
                            <view class="flex flex-direction align-center justify-center" style="width:100%" v-if="emptyLoading">
                                <image src="../../static/empty-loading.png" mode="" style="width: 256rpx;height: 158rpx;margin-top:80rpx ;"></image>
                                <view style="color:#3A3A3A;font-size;34rpx;margin-top:46rpx;">加载中...</view>
                            </view>
                        </view>
					</view>
                    <u-loadmore bg-color="#f6f6f6" color="#CCC" v-if="flowList.length!=0" style="padding-top:20rpx;" :status="loadStatus" @loadmore="getMerchantServeList()"></u-loadmore>
				</view>

			</view>
		</view>
		<view class="bar-bottom"
			style="position: fixed;bottom: 0;background-color: #F6F6F6;width: 100vw;z-index: 99999; border: solid 1rpx  #E3E3E3;">
			<view class="flex align-center justify-between" style="padding: 14rpx 22rpx;">
				<view class="flex align-center " style="justify-content: center;margin-right: 20rpx;">
					<view class="" style="width: 20rpx;">

					</view>
					<text
						style="font-size: 36rpx;font-weight: bold;color: #FF1414 ;">￥{{payPrice}}</text>
					<text  style="margin-left: 24rpx; text-decoration:line-through;color: #555555;line-height: normal;font-size: 14px; text-align: left;">
						￥{{usedPrice}}
					</text>
				</view>
				<view @click="goSure()"
					style="background: linear-gradient(286deg, #FF1414 0%, #FF1414 0%, #FF614A 99%, #FF614A 100%);
					color: #FFFFFF;font-size: 32rpx;border-radius: 8rpx;padding: 25rpx 87rpx;"
					>
					立即抢购</view>
			</view>
		</view>

        

	</view>
</template>

<script>
	export default {
		data() {
			return {
				barStyle: {
					'bottom': '14rpx'
				},
				commentParam: {
					goodsId: '',
					pageNum: 1,
					pageSize: 1
				},
				merchantServeParam: {
					pageNum: 1,
					pageSize: 10,
                    bizType: this.$bizType,
                    isGroupGoods: 1,
                    merchantId: "",
				},
				personDetail: {
				},
				showTabBar: false,
				tabsCurrent: 0,
				showShopReply: true,
				showAddReply: true,
				tabsList: [{
						name: '服务内容'
					},
					{
						name: '费用说明'
					},
					{
						name: '评价'
					},
					{
						name: '更多服务'
					}
				],
				commentList: [],
				moreServerList: [],
				//轮播图
				imageSwiper: [],

				loadStatus: 'loadmore',
				flowList: [],
                specId: "",
                lastPage: false,
                payPrice: 0,
                usedPrice: 0,
                specList: [],

                videoplay: {},
				initialTime: 0,
				isVodeoPlay: false,
				swiperKey: 1,
                emptyLoading: true,


			}
		},
		mounted() {
			window.addEventListener('scroll', this.handleScroll) // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
		},
		onLoad() {
			const options = uni.getStorageSync('indexDetails')
			// console.log("-----------")
			// console.log(options)
            this.commentParam.goodsId = options.goodsId
            this.merchantServeParam.merchantId = options.merchantId
            this.specId = options.goodsSpecificationId
            this.payPrice = options.currentPrice
            this.usedPrice = options.scribingPrice

            this.getGroupGoods(options.goodsId, options.bizType)
            this.getMerchantServeList()

		},
		onReachBottom() {
			this.getMerchantServeList()
		},
		computed: {

		},
		methods: {


			// 查看更多评论
			goMoreComment() {
				uni.navigateTo({
					url: 'moreComment?goodsId=' + this.commentParam.goodsId
				})
			},
			// 查看范围
			viewScope() {
				// console.log(this.personDetail)
                let name = this.personDetail.merchantName
                if(this.personDetail.merchantType==1) {
                    name = this.$formatNameAll(this.personDetail.merchantName)
                }
				uni.navigateTo({
					url: '../map-range/map-range?longitude=' + this.personDetail.merchant.longitude +
						'&latitude=' + this
						.personDetail.merchant.latitude + '&radius=' + this.personDetail.merchant.serviceDistance+'&name='+name
				})
			},
			// 查看更多服务
			getMerchantServeList() {
                if(this.lastPage) return
				// console.log("-------------更多服务接口----------------------")
				// console.log(this.merchantServeParam, '这是更多评论的的参数')
                let that = this
				that.$u.api.seekGroupList(that.merchantServeParam).then(res => {
                    if (res.code == 200) {
                        if (res.rows.length == 0) {
                            that.loadStatus = 'nomore'
                            that.lastPage = true
                        } else {
                            that.flowList = this.flowList.concat(res.rows)
                            that.lastPage = false
                            that.merchantServeParam.pageNum++
                        }
                        that.$forceUpdate()
                    }
                }).finally(()=>{
                    that.emptyLoading = false
                });
			},
			pageBack() {
				// console.log(123123123)
				uni.navigateBack({
					delta: 1
				})
			},
			// 立刻抢购
			goSure() {
                // memberId=30&goodsId=143
				if (!uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '../codelogin/codelogin'
					})
				} else {
					this.$u.api.getCountOrder({
						memberId: uni.getStorageSync("userInfo").memberId,
						goodsId: this.commentParam.goodsId
					}).then(res=>{
						if(res.code==200) {
							if(res.data) {
								// console.log(this.personDetail.stopOrder)
								if (!uni.getStorageSync('token')) {
									uni.navigateTo({
										url: '../codelogin/codelogin'
									})
								} else {
									uni.setStorageSync('personDetail', this.personDetail)
									uni.navigateTo({
										url: `./sureOrderGroup?goodsSpecificationId=${this.specId}`
									})
								}
							} else {
								this.$api.msg('限购商品超出限购数量，不可下单')
							}
						}
					})

				}
			},
			// 点击评论图片预览
			commentImageClick(index) {
				let _this = this;
				let imgArray = [];
				// 多张
				for (let i = 0; i < this.imageSwiper.length; i++) {
					imgArray.push(this.imageSwiper[i].image);
				}
				uni.previewImage({
					current: index,
					urls: imgArray,
					indicator: 'number',
				});
			},
			// 点击轮播图预览
			imageSwiperClick(index) {
				let _this = this;
				let imgArray = [];
				// 多张
				for (let i = 0; i < this.imageSwiper.length; i++) {
					imgArray.push(this.imageSwiper[i].image);
				}
				uni.previewImage({
					current: index,
					urls: imgArray,
					indicator: 'number',
				});
			},
			// 获取评论
			getGoodsCommentList() {
				this.$u.api.groupGoodsCommentList(this.commentParam).then(res => {
					// console.log(res.rows, '更多评价的')
					if (res.code == 200) {
						if (res.rows.length > 0) {
							res.rows.forEach(item => {
								item['replyFlag'] = true
								item['reContentFlag'] = true
							})
							this.commentList = res.rows
						}

					}
				}).catch(error => {
					console.log(error)
				})

				// this.commentList =[]
			},
            //详情
			getGroupGoods(goodsId, bizType) {
				this.$u.api.groupGoodsDetail({
					goodsId: goodsId, //服务商品id
					bizType: bizType
				}).then(res => {
					// console.log(res)
					if (res.code == 200) {
						this.personDetail = res.data
                        if(this.personDetail.goodsSpecificationList.length>0) {
                            let arr = JSON.parse(JSON.stringify(this.personDetail.goodsSpecificationList))
                            let first = []
							let countInt =0
                            for (let index = 0; index < arr.length; index++) {
                                if(arr[index].goodsSpecificationId==this.specId) {
									countInt = 1;
                                    first.push(arr[index])
                                    arr.splice(index,1)
                                }
                            }
							if(countInt<1){
								this.specId=arr[0].goodsSpecificationId
							}

                            this.specList = first.concat(arr)
                        }
						let videoObj = {}
                        let has = false
                        for (let i = 0; i < res.data.goodsImageList.length; i++) {
                            const element = res.data.goodsImageList[i];
                            if(element.type=='002') {
                                videoObj = res.data.goodsImageList.splice(i,1)[0]
                                has = true
                            }
                        }
                        this.imageSwiper = res.data.goodsImageList
                        if(has) {
                            this.imageSwiper.unshift(videoObj)
                        }
                       
						this.personDetail.bizType = bizType
						this.getGoodsCommentList()
					}
				}).catch(error => {
					console.log(error)
				})
			},
			handleScroll() {
				let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body
					.scrollTop // 滚动条偏移量
				// let offsetTop = document.querySelector('#boxFixed').offsetTop;  // 要滚动到顶部吸附的元素的偏移量
				scrollTop > 50 ? this.showTabBar = true : this.showTabBar = false
                if(!this.$el.querySelector('#serverContent')) {
                    return
                }
                if(!this.$el.querySelector('#descriptionFees')) {
                    return
                }
                if(!this.$el.querySelector('#serverComment')) {
                    return
                }
                if(!this.$el.querySelector('#serverMore')) {
                    return
                }
				var serverContent = this.$el.querySelector('#serverContent').offsetTop + 180

				var descriptionFees = this.$el.querySelector('#descriptionFees').offsetTop + 180
				if (this.commentList.length > 0) {
					var serverComment = this.$el.querySelector('#serverComment').offsetTop + 180
				}
				var serverMore = this.$el.querySelector('#serverMore').offsetTop + 180
				// console.log(this.tabsCurrent)
				if (scrollTop >= serverContent && scrollTop < descriptionFees) {
					this.tabsCurrent = 0
				} else if (scrollTop >= descriptionFees && scrollTop < serverComment) {
					this.tabsCurrent = 1
				} else if (scrollTop >= serverComment && scrollTop < serverMore) {
					this.tabsCurrent = 2
				} else if (scrollTop > serverMore) {
					this.tabsCurrent = 3
				}
			},
			tabsChange(index) {
				this.tabsCurrent = index;
				let top = ''
				// console.log(index)
				if (index == 0) {
					top = this.$el.querySelector('#serverContent').offsetTop + 180
				} else if (index == 1) {
					top = this.$el.querySelector('#descriptionFees').offsetTop + 180
				} else if (index == 2) {
					top = this.$el.querySelector('#serverComment').offsetTop + 180
				} else if (index == 3) {
					top = this.$el.querySelector('#serverMore').offsetTop + 180
				}
				window.removeEventListener('scroll', this.handleScroll) // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
				uni.pageScrollTo({
					duration: 200, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
					scrollTop: top, //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
				})
				setTimeout(() => {
					window.addEventListener('scroll', this.handleScroll) // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
				}, 500)
			},
			scrolltolower() {
				// console.log('scrolltolower')
 				this.getMerchantServeList()
			},
			//跳转详情页面
			gotoDetails(obj){
				// console.log("跳转页面详情")
				obj.bizType = this.$bizType
				uni.setStorageSync('indexDetails', obj)
				uni.redirectTo({
					url: './groupDetails'
				})
			},

            //电话联系
            call(phone) {
                uni.makePhoneCall({
                    phoneNumber: phone //仅为示例
                });
            },


            swiperChange(e) {
				// console.log(e)
				let index = e.detail.current;
				let url = this.imageSwiper[index].url;
				// console.log(url)
				if(url.toUpperCase().indexOf('MP4')!=-1) {
					setTimeout(() => {
						this.isVodeoPlay = false;
						this.swiperKey++;
						this.videoplay = uni.createVideoContext('myVideoBanner');
						this.videoplay.pause();
						
					}, 20)
				}
			},
			videoPause() {
				this.showPlayBtn =  true;
				this.isVodeoPlay = false;
			},
			videoPlay() {
				this.isVodeoPlay = true;
			},
			videoPlayClick(url) {
				if(url.toUpperCase().indexOf('MP4')!=-1) {
					if (!this.isVodeoPlay) {
						this.isVodeoPlay = true;
						
						setTimeout(() => {
							this.videoplay = uni.createVideoContext('myVideoBanner');
							this.videoplay.play();
						}, 200)
					} else {
						setTimeout(() => {
							// this.isVodeoPlay = false;
							// this.swiperKey++;
							this.videoplay = uni.createVideoContext('myVideoBanner');
							this.videoplay.pause();
							
						}, 200)
					}
				}
				// console.log(url)
				// console.log(this.isVodeoPlay)
			},
			swiperClick(url,index,list) {
				let imgArr = JSON.parse(JSON.stringify(list));
				// console.log(imgArr)
				if(url.toUpperCase().indexOf('MP4')!=-1) {
					let arr = [];
					let current = index;
					imgArr.map(item=>{
						if(item.type=='002') {
							arr.push(item)
						}
					})
					for(let i=0;i<index+1;i++) {
						if(imgArr[i].type=='001') {
							current--
						}
					}
					// this.showSwiper(arr,current);
				} else {
					let arr = [];
					let current = index;
					imgArr.map(item=>{
						if(item.type=='001') {
							arr.push(item.url)
						}
					})
					for(let i=0;i<index+1;i++) {
						if(imgArr[i].type=='002') {
							current--
						}
					}
					uni.previewImage({
						current: current,
						urls:arr
					});
				}
			},

		}
	}
</script>
<style>

</style>
<style lang="scss" scoped>
    /deep/ .uni-swiper-dots-horizontal {
        bottom: 60rpx !important;
    }
    .controls-title {
        width: 100%;
        height: 100%;
    }
    .swiper-item {
        height: 100%;
        img {
            object-fit: cover;
        }
        .swiper-video {
            width: 100%;
            height: 100%;
            position: relative;
        }
        .play-btn-img {
            position: absolute;
            top: calc(50% - 60rpx);
            left: calc(50% - 60rpx);
            width: 120rpx;
            height: 120rpx;
            z-index: 99;
            .img {
                width: 80rpx;
                height: 80rpx;
            }
        }
        .poster-img {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 20;
            width: 100%;
            height: 550rpx;
        }
    }

	.bar-bottom {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.title_text {
		padding: 41rpx 36rpx 0rpx 36rpx;
		font-size: 34rpx;
		font-weight: bold;
		color: #111111;
	}

	.age_tag {
		// width: 98rpx;
		padding: 1rpx 10rpx;
		// height: 32rpx;
		background: linear-gradient(269deg, #E7C2A1 0%, #E7C2A1 0%, #F4EBE1 100%, #F4EBE1 100%);
		border-radius: 8rpx;
		opacity: 1;
		color: #885c4b;
		text-align: center;
		font-size: 22rpx;
	}

	.good_comment {
		font-size: 22rpx;
		color: #FF1414;
		padding-left: 14rpx;
		padding-right: 14rpx;
		padding-top: 6rpx;
		padding-bottom: 6rpx;
		border: 1px solid #FF9999;
		border-radius: 8rpx;
	}

	.company_auth_active {
		padding: 4rpx 10rpx;
		border-radius: 10rpx 0rpx 10rpx 0rpx;
		opacity: 1;
		color: #FFFFFF;
		text-align: center;
		font-size: 21rpx;
		background: linear-gradient(270deg, #FF6B00 0%, #FF6B00 0%, #FFB700 100%, #FFB700 100%);
	}


	.company_auth {
		// width: 98rpx;
		// height: 32rpx;
		padding: 4rpx 10rpx;
		background: linear-gradient(270deg, #009BF8 0%, #009BF8 0%, #97D5FF 100%, #97D5FF 100%);
		border-radius: 10rpx 0rpx 10rpx 0rpx;
		opacity: 1;
		color: #FFFFFF;
		text-align: center;
		font-size: 21rpx;
		// font-weight: bold;
	}

	.presonal_auth {
		// width: 98rpx;
		// height: 32rpx;
			padding: 4rpx 10rpx;
		background: linear-gradient(270deg, #FF6B00 0%, #FF6B00 0%, #FFB700 100%, #FFB700 100%);
		border-radius: 10rpx 0rpx 10rpx 0rpx;
		opacity: 1;
		color: #FFFFFF;
		text-align: center;
		font-size: 21rpx;
		// font-weight: bold;
	}

	.content_comment {
		border-radius: 8rpx;
		border: 1rpx solid #FF9999;
		color: #FF1414;
		font-size: 22rpx;
		padding-left: 5rpx;
		padding-right: 5rpx;
		margin-left: 17rpx;
	}
	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-warter {
        border-radius: 20rpx;
        overflow: hidden;
        margin: 18rpx 18rpx 0 0;
        background-color: #ffffff;
        position: relative;
    }

    .u-close {
        position: absolute;
        top: 32rpx;
        right: 32rpx;
    }

    .demo-image {
        width: 100%;
        border-radius: 4px;
    }

    .demo-title {
        font-size: 30rpx;
        margin-top: 5px;
        color: #111;
        word-wrap: break-word;
    }

    .rate-box {
        border: 2rpx solid #ff8f96;
        border-radius: 8rpx;
        width: 150rpx;
        height: 36rpx;
    }
    .spec_item {
        position: relative;
        display: inline-block;
        
        min-height: 140rpx;
        background: #FAFAFA;
        border: 2rpx solid #EEEEEE;
        border-radius: 16rpx;

    }
	.once-item {
		min-width: 710rpx;
		max-width: 710rpx;
	}
	.more-item {
		// width: 330rpx;
        min-width: 344rpx;
        max-width: 344rpx;
	}
    .active_spec_item {
        background: #FFF5F5;
        border: 2rpx solid #FF5252;
    }
    .spec_item:last-of-type {
        margin: 0;
    }
    .spec_times {
        // min-width: 80rpx;
		padding: 0 12rpx;
        height: 38rpx;
        line-height: 38rpx;
        background: linear-gradient(267deg, #FD506B 0%, #FA856D 100%);
        border-radius: 6rpx;
        font-size: 26rpx;
        color: #fff;
        text-align: center;
        margin-left: 18rpx;
    }
    .spec_item_scroll {
        /deep/ .uni-scroll-view-content {
            display:flex;
            white-space: nowrap;
            align-items: center;
        }
    }

</style>
