<template>
	<view>
		<view class="service-show">
			<video v-if="showFlag === 0" :src="detail.video_file" play-btn-position="center"></video>
			<swiper class="service-show-swiper" :indicator-dots="true" v-if="showFlag === 1">
				<swiper-item v-for="(img,index) in detail.confinement_picture" :key="index">
					<u-image height="100%" width="100%" :src="img.picture" mode="aspectFit" @load="$u.throttle(init)">
					</u-image>
				</swiper-item>
			</swiper>

			<view class="service-show-btn">
				<view class="service-show-btn-img" @click="showFlag = 1">
					<image src="../../static/pic.png">
					</image>
					<view class="service-show-btn-img__num">{{detail.confinement_picture.length}}</view>
				</view>
				<view class="service-show-btn-video" @click="showFlag = 0">
					<image src="../../static/video.png">
					</image>
					<view class="service-show-btn-img__num">1</view>
				</view>
			</view>
		</view>

		<view class="service-baseinfo">
			<view class="service-baseinfo-top">
				<view class="service-baseinfo-top-left">
					<u-image :src="detail.cover_picture" height="122rpx" width="122rpx" shape="circle"
						@load="$u.throttle(init)">
					</u-image>
				</view>
				<view class="service-baseinfo-top-right">
					<view class="service-baseinfo-top-right__name">{{detail.name}}</view>
					<view class="service-baseinfo-top-right__sub">
						{{detail.subheading}}
					</view>
				</view>
			</view>

			<view class="service-baseinfo-center">
				<view class="service-baseinfo-center-label">
					<view class="service-baseinfo-center-label__item"
						v-for="(item1,index) in featuredLabelSplit(detail.featured_label)" :key="index">
						{{item1}}
					</view>
				</view>

				<view class="service-baseinfo-center-address">
					<view class="service-baseinfo-center-address__pic">
						<u-image mode="asseptFit" src="/packages/packageCarecenter/static/position.png" height="26rpx"
							width="26rpx">
						</u-image>
					</view>
					<view class="service-baseinfo-center-address__text">
						{{detail.address}}
					</view>
					<view class="service-baseinfo-center-address__icon" @click="toMap">
						<u-icon name="arrow-right" size="26" color="#9C9C9C"></u-icon>
					</view>
				</view>

				<view class="service-baseinfo-center-time">
					<view class="service-baseinfo-center-time__pic">
						<u-image src="/packages/packageCarecenter/static/clock.png" height="26rpx" width="26rpx">
						</u-image>
					</view>
					<view class="service-baseinfo-center-time__text">
						{{detail.work_time}}
					</view>
				</view>

				<view class="service-baseinfo-center-service">
					<view class="service-baseinfo-center-service__pic">
						<u-image src="/packages/packageCarecenter/static/wechat.png" height="43rpx" width="50rpx">
						</u-image>
					</view>
					<view class="service-baseinfo-center-service__text">
						人工客服
					</view>
					<view class="service-baseinfo-center-service__icon">
						<u-icon name="arrow-right" size="26" color="#fff" label="联系客服" label-pos="left"
							label-color="#fff"></u-icon>
					</view>
				</view>

				<view class="service-baseinfo-center-store">
					<u-image :src="detail.cover_picture" mode="aspectFill" height="397" width="100%" border-radius="30"
						@load="$u.throttle(init)">
					</u-image>

					<view class="service-baseinfo-center-store-tag">
						<image src="/packages/packageCarecenter/static/huangguan.png"></image>
						<view class="service-baseinfo-center-store-tag-text">
							孕育帮探店
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="service-bar" v-if="!barFixed">
			<view v-for="(item,index) in bar" :key="index" class="service-bar-item"
				:class="{'service-bar-item-active':index === barIndex}" @click="barClick(item,index)">
				{{item.label}}
				<u-image class="service-bar-item-icon" src="/packages/packageCarecenter/static/img_qiehuan.png"
					width="68" height="24" v-show="index === barIndex"></u-image>
			</view>
		</view>
		<view class="service-bar service-bar-fixed" v-else>
			<view v-for="(item,index) in bar" :key="index" class="service-bar-item"
				:class="{'service-bar-item-active':index === barIndex}" @click="barClick(item,index)">
				{{item.label}}
				<u-image class="service-bar-item-icon" src="/packages/packageCarecenter/static/img_qiehuan.png"
					width="68" height="24" v-show="index === barIndex"></u-image>
			</view>
		</view>

		<view class="service-product">
			<view class="service-product-title">
				<text>本店商品</text>
				<view class="service-product-title-more">
					<text>更多</text>
					<u-icon name="arrow-right" size="25" color="#333333"></u-icon>
				</view>
			</view>

			<view class="service-product-detail">
				<view v-for="(item,index) in detail.confinement_product" :key="index"
					class="service-product-detail-item" @click="toProduct(item.id)">
					<u-image :src="item.cover_picture" width="330" height="360" border-radius="20rpx 20rpx 0 0 "
						@load="$u.throttle(init)">
					</u-image>

					<view class="service-product-detail-item-name">
						{{item.name}}
					</view>

					<view class="service-product-detail-item-label">
						<view class="service-product-detail-item-label-item"
							v-for="(label,index1) in featuredLabelSplit(item.featured_label)" :key="index1">{{label}}
						</view>
					</view>

					<view class="service-product-detail-item-price">
						<span>￥</span>
						<span>{{item.price}}</span>
					</view>
				</view>
			</view>
		</view>

		<view class="service-activity">
			<view class="service-activity-title">
				<text>本店活动</text>
				<view class="service-activity-title-more">
					<text>更多</text>
					<u-icon name="arrow-right" size="25" color="#333333"></u-icon>
				</view>
			</view>
			<view style="display: flex;justify-content: center;">
				<u-image src="/packages/packageCarecenter/static/banner.png" width="660" height="300"
					border-radius="30"></u-image>
			</view>
		</view>

		<view class="service-info">
			<view class="service-info-title">
				<text>商户简介</text>
				<view class="service-info-title-more">
					<u-icon name="arrow-right" size="25" color="#333333"></u-icon>
				</view>
			</view>

			<view class="service-info-content">
				<view v-for="(item,index) in detail.confinement_services_merchant_item" :key="index"
					class="service-info-content-item">
					<view class="service-info-content-item-name">{{item.name}}</view>
					<view class="service-info-content-item-content">{{item.content}}</view>
				</view>
			</view>
		</view>

		<view class="service-imageinfo" v-html="detail.content">
		</view>

		<view class="bottom-btn">
			<u-button :custom-style="btnStyle" shape="circle">预约探店</u-button>
		</view>
	</view>
</template>

<script>
	import {
		weixin
	} from '@/utils/weixin.js'
	export default {
		data() {
			return {
				showFlag: 1,
				barIndex: 0,
				barTop: 667,
				barFixed: false,
				bar: [{
					label: '本店商品',
					height: 0,
					class: '.service-product'
				}, {
					label: '本店活动',
					height: 0,
					class: '.service-activity'
				}, {
					label: '商户简介',
					height: 0,
					class: '.service-info'
				}, {
					label: '图文详情',
					height: 0,
					class: '.service-imageinfo'
				}],
				barHeight: 0,
				detail: {},
				btnStyle: {
					marginRight: '46rpx',
					height: '60rpx',
					width: '180rpx',
					color: '#fff',
					background: '#FF578A',
				}
			}
		},
		methods: {
			init() {
				const query = uni.createSelectorQuery().in(this);
				query.select(".service-bar").boundingClientRect(res => {
					this.barTop = res.top
				}).exec();
				for (let i = 0; i < this.bar.length; i++) {
					query.select(this.bar[i].class).boundingClientRect(res => {
						this.bar[i].height = res.top
					}).exec();
				}
			},
			toMap() {
				this.$u.throttle(() => {
					uni.openLocation({
						latitude: Number(this.detail.latitude),
						longitude: Number(this.detail.longitude),
						name: this.detail.name
					})
				})
			},
			toProduct(id) {
				this.$u.throttle(() => {
					uni.navigateTo({
						url: `/packages/packageCarecenter/pages/careCenter/productDetail?id=${id}`
					})
				})
			},
			barClick(item, index) {
				this.barIndex = index

				uni.pageScrollTo({
					scrollTop: item.height
				})
			},

			featuredLabelSplit(res) {
				if (res) {
					return res.split(",")
				}
				return []
			},

			getServiceDetail(id) {
				weixin.request({
					newUrl: true,
					api: '/api/member/get-confinement-service-item',
					data: {
						id
					},
					utilSuccess: (res) => {
						this.detail = res
					}
				})
			}
		},
		computed: {

		},
		onLoad(option) {
			this.getServiceDetail(option.id)
		},
		mounted() {
			this.$nextTick(() => {
				this.init()
			})
		},
		onPageScroll(e) {
			this.$u.throttle(() => {
				if (e.scrollTop > this.barTop) {
					this.barFixed = true
				} else {
					this.barFixed = false
				}
			}, 100)
		}
	}
</script>

<style scoped lang="scss">
	.service-show {
		width: 100%;
		height: 360rpx;

		position: relative;

		&>video {
			width: 100%;
			height: 100%;
		}

		&-swiper {
			width: 100%;
			height: 100%;
		}

		&-btn {
			display: flex;

			z-index: 3;
			position: absolute;
			bottom: 30rpx;
			right: 33rpx;

			&-img {
				color: #fff;
				height: 47rpx;
				background: #252526;
				border-radius: 16rpx;
				opacity: 0.3;
				display: flex;
				align-items: center;

				margin-right: 14rpx;

				&>image {
					width: 24rpx;
					height: 21rpx;

					padding-left: 20rpx;
					padding-right: 10rpx;
				}

				&__num {
					font-size: 24rpx;
					color: #FFFFF0;
					font-weight: 400;

					padding-right: 20rpx;
				}
			}

			&-video {
				color: #fff;
				height: 47rpx;
				background: #252526;
				border-radius: 16rpx;
				opacity: 0.3;
				display: flex;
				align-items: center;

				&>image {
					width: 24rpx;
					height: 21rpx;

					padding-left: 20rpx;
					padding-right: 10rpx;
				}

				&__num {
					font-size: 24rpx;
					color: #FFFFF0;
					font-weight: 400;

					padding-right: 20rpx;
				}
			}
		}
	}

	.service-baseinfo {
		width: 100%;
		background: linear-gradient(90deg, #555455 0%, #1F1D1D 100%);

		padding-bottom: 38rpx;

		&-top {
			display: flex;

			padding-top: 38rpx;

			&-left {
				width: 122rpx;
				height: 122rpx;
				border-radius: 100%;

				margin-left: 31rpx;
			}

			&-right {

				margin-left: 21rpx;

				&__name {
					font-size: 30rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}

				&__sub {
					background: #FF578A;
					border-radius: 12rpx;
					color: #fff;

					padding: 6rpx 11rpx;
					margin-left: 10rpx;
					margin-top: 9rpx;
				}
			}
		}

		&-center {

			margin-top: 28rpx;

			&-label {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				align-content: center;

				margin-left: 22rpx;

				&__item {
					color: #fff;
					counter-reset: #fff;
					border-radius: 12rpx;
					border: 2rpx solid #FF578A;

					padding: 10rpx 20rpx;
					margin-left: 10rpx;
				}
			}

			&-address {
				display: flex;

				margin-top: 34rpx;
				padding: 0 36rpx;

				&__img {}

				&__text {
					flex: 1;
					color: #fff;

					margin: 0 16rpx;
				}
			}


			&-time {
				display: flex;

				margin-top: 15rpx;
				padding: 0 36rpx;

				&__img {}

				&__text {
					flex: 1;
					color: #fff;

					margin: 0 16rpx;
				}
			}

			&-service {
				background: #FF578A;
				border-radius: 23rpx;
				display: flex;

				padding: 26rpx 15rpx 26rpx 30rpx;
				margin: 24rpx 33rpx 0 33rpx;

				&__text {
					font-weight: 400;
					color: #FFFFFF;
					flex: 1;

					margin-left: 10rpx;
				}

				&__icon {}
			}

			&-store {

				position: relative;
				margin-top: 30rpx;
				padding: 0 33rpx;

				&-tag {
					display: flex;
					align-items: center;
					background: linear-gradient(90deg, #FFFFFF 0%, #FFF0F0 100%);
					border-bottom-left-radius: 20rpx;
					border-bottom-right-radius: 20rpx;

					padding: 9rpx 18rpx;
					position: absolute;
					top: 0;
					left: 76rpx;

					&>image {
						width: 25rpx;
						height: 25rpx;
					}

					&-text {
						font-size: 24rpx;
						font-weight: 400;
						color: #FF578A;

						padding-left: 11rpx;
					}
				}
			}
		}
	}

	.service-bar {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		background: #fff;

		margin-top: -20rpx;

		&-fixed {
			z-index: 4;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
		}

		&-item {
			font-size: 30rpx;
			font-weight: 400;
			color: #999999;

			padding: 40rpx 0 23rpx 0;
			position: relative;

			&-active {

				color: #333333;
			}

			&-icon {

				transform: translateX(-50%);
				position: absolute;
				top: 72rpx;
				left: 50%;
			}
		}
	}

	.service-product {

		&-title {
			display: flex;
			justify-content: space-between;
			align-items: center;

			padding-top: 37rpx;

			&>text {
				color: #333333;
				font-size: 34rpx;

				padding-left: 32rpx;
			}

			&-more {

				font-size: 24rpx;
				color: #333333;

				padding-right: 47rpx;
			}
		}

		&-detail {
			flex-shrink: 0;
			flex-basis: 330rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			margin-top: 36rpx;
			padding: 0 32rpx;

			&-item {
				border-radius: 20rpx;
				background: #FFFFFF;

				padding-bottom: 21rpx;

				&-name {
					color: #333333;
					font-weight: 400;
					font-size: 24rpx;

					padding: 0 24rpx;
					padding-top: 21rpx;

				}

				&-label {
					display: flex;
					flex-wrap: wrap;

					padding: 0 24rpx;
					margin-top: 13rpx;

					&-item {
						background: rgba(255, 87, 138, 0.1);
						border-radius: 12rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #FF578A;

						margin-right: 10rpx;
						padding: 6rpx 15rpx;
					}
				}

				&-price {
					font-weight: 400;
					color: #FF578A;
					font-size: 24rpx;

					padding: 0 24rpx;
					padding-top: 13rpx;
				}
			}
		}
	}

	.service-activity {
		background: #fff;

		margin-top: 34rpx;
		padding-bottom: 83rpx;

		&-title {
			@extend .service-product-title;
			padding-bottom: 33rpx;

			&-more {
				@extend .service-product-title-more;
			}
		}
	}

	.service-info {
		background-color: #fff;

		margin-top: 30rpx;

		&-title {
			@extend .service-product-title;
			padding-bottom: 29rpx;

			&-more {
				@extend .service-product-title-more;
			}
		}

		&-content {

			padding: 0 34rpx 20rpx 40rpx;

			&-item {
				display: flex;

				margin-bottom: 20rpx;

				&-name {
					font-size: 24rpx;
					font-weight: 400;
					color: #999999;
					flex-basis: 120rpx;
				}

				&-content {
					flex: 1;
					font-weight: 400;
					color: #333333;
					font-size: 24rpx;

					margin-left: 18rpx;
				}
			}
		}
	}

	.service-imageinfo {

		padding-bottom: 100rpx;
	}

	.bottom-btn {
		height: 100rpx;
		background: #fff;
		border-top: 1rpx solid rgba(180, 180, 180, 0.4);
		display: flex;
		align-items: center;
		justify-content: flex-end;

		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	::v-deep .u-image__image {
		display: block !important;
	}
</style>
