<template>
	<view class="page safe-area-inset-bottom">
		<!-- <image class="bkg" src="~@/package_sub/static/ServiceDetail/bkg.png" mode="aspectFill"></image> -->
		<view class="bkg">
			<u-swiper :height="316" img-mode="scaleToFill" mode="none" border-radius="0" :list="info.images" name="url"></u-swiper>

		</view>
		<view class="container">
			<view class="card detail">
				<view class="detail__text">
					{{info.introduce || ' '}}
				</view>
				<view class="detail__price">
					<text class="detail__price--number">{{info.price}}</text>
					<text class="detail__price--text">元/次</text>
				</view>
			</view>

			<view class="tab">
				<view v-for="(item, index) in ['服务内容','预约须知']" :key="index" class="tab-item"
					:class="{ 'is-active': index === currentTab }" @click="$u.throttle(() => currentTab = index)">
					{{ item }}
				</view>
			</view>

			<view v-show="currentTab === 0">
				<view class="card for-people">
					<view class="card__title">
						适用人群
					</view>

					<view class="for-people__content block">
						<view class="block-item">
							<!-- <image class="block-item__img" src="~@/static/index/honor-title.png" mode="aspectFit">
							</image> -->

							<view class="block-item__text">
								<u-parse :html="info.content"></u-parse>
							</view>
						</view>
					</view>
				</view>

				<view class="service-flow card">
					<view class="card__title">
						服务流程
					</view>

					<view class="service-flow__content">
						<u-parse :html="info.flow_content"></u-parse>
						<!-- <view class="dot-line" />
            <view class="content-panel">
              <image class="db-arrow-down" src="~@/package_sub/static/ServiceDetail/db-arrow-down.png" mode="aspectFit"></image>
              <view class="content-panel__section">
                请至少提前2小时预约，以便平台安排合适的陪诊师;
              </view>
              <view class="content-panel__section">
                提交预约申请后，请添加客服专员，以便及时与您沟通服务进展;
              </view>
            </view> -->
					</view>
				</view>

				<view class="cost-description card">
					<view class="card__title">
						费用说明
					</view>

					<ul class="cost-description__content">
						<u-parse :html="info.price_content"></u-parse>
						<!-- <li v-for="i in 7" :key="i">
              本服务含医院内半天(不超过4小时)陪诊服务，仅限单个医院不含治疗检查、饮食、交通等费用;
            </li> -->
					</ul>
				</view>
			</view>

			<view v-show="currentTab === 1">
				<view class="card for-people">
					<view class="for-people__content block">
						<view class="block-item">
							<!-- <image class="block-item__img" src="~@/static/index/honor-title.png" mode="aspectFit">
							</image> -->

							<view class="block-item__text">
								<u-parse :html="info.appoint_content"></u-parse>
							</view>
						</view>
					</view>
				</view>
			</view>


			<u-button class="btn" shape="circle" ripple  @click="toOrder(info)" :custom-style="orderBtnStyle">立即预约</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				currentTab: 0,
				info: {},
				orderBtnStyle: {
					'background-image': 'linear-gradient(-90deg, #e26165 0%, #c10d12 94%, #c10d12 100%)',
					'font-weight': '500',
					'font-size': '28rpx',
					'color': '#fff',
					'width': '436rpx',
					'margin-top': '32rpx'
				}
			};
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
				title: option.title ?? "服务项目"
			});
			this.id = option.id ? option.id : ''
			this.getDetail(this.id)
		},
		mounted() {

		},
		methods: {
			async getDetail(id) {
				await this.$u.api.accompanyProductDetail({
					id: id
				}).then(res=>{
					console.log("res", res)
					this.info = res
				})

			},
			toOrder(info) {
			  this.$u.route({
			    url: '/package_sub/pages/AddOrder/AddOrder?id='+info.id+'&site_id='+info.site_id+'&type='+info.type
			  })
			},
		}
	}
</script>

<style>
	page {
		background: #f4efee;
	}
</style>
<style lang="scss" scoped>
	.page {

		.bkg {
			height: 316rpx;
			width: 100vw;
			z-index: 0;
			position: absolute;
			top: 0;
			left: 0;
		}

		.container {
			z-index: 1;
			position: relative;
			padding-top: 250rpx;

			.card {
				border-radius: 10rpx;
				filter: drop-shadow(2.192px 4.494px 5px rgba(33, 32, 32, 0.15));
				background-color: #ffffff;

				&__title {
					display: inline-block;
					font-size: 28rpx;
					color: #ca2328;
					font-weight: bold;
					position: relative;
					left: 50%;
					transform: translateX(-50%);

					&::before {
						content: '';
						position: absolute;
						width: 139rpx;
						height: 5rpx;
						border-radius: 3px;
						left: -28rpx;
						top: 50%;
						transform: translate(-100%, -50%);
						background: linear-gradient(to left, #ca2328, #ffffff00);
					}

					&::after {
						content: '';
						position: absolute;
						width: 139rpx;
						height: 5rpx;
						border-radius: 3px;
						right: -28rpx;
						top: 50%;
						transform: translate(100%, -50%);
						background: linear-gradient(to right, #ca2328, #ffffff00);
					}
				}
			}

			.detail {
				margin: 0 24rpx;
				padding: 26rpx 22rpx;

				&__text {
					text-indent: 48rpx;
					font-size: 24rpx;
					line-height: 1.5;
					color: #929196;
					font-weight: 500;
				}

				&__price {
					margin-top: 24rpx;
					color: #c20d12;
					padding-left: 16rpx;

					&--number {
						font-weight: 500;
						font-size: 40rpx;
					}

					&--text {
						font-size: 24rpx;
					}
				}
			}

			.tab {
				display: flex;
				align-items: center;
				padding: 0 60rpx;
				margin-top: 38rpx;

				&-item {
					font-size: 28rpx;
					color: #666;
					transition: all .1s;
				}

				.tab-item+.tab-item {
					margin-left: 60rpx;
				}

				.is-active {
					color: #000;
					font-weight: 600;
					font-size: 32rpx;
					position: relative;

					&::after {
						content: '';
						position: absolute;
						bottom: -20rpx;
						left: 50%;
						transform: translateX(-50%);
						width: 58rpx;
						height: 4rpx;
						border-radius: 2rpx;
						background-color: #ca2328;
					}
				}
			}

			.for-people {
				margin: 54rpx 24rpx 0;
				padding: 46rpx 30rpx;


				&__content {
					margin-top: 46rpx;
				}

				.block {
					display: flex;
					flex-wrap: wrap;

					&-item {
						display: flex;
						align-items: center;
						margin-bottom: 60rpx;
						flex-basis: calc((100% - 64rpx) / 2);

						&__img {
							width: 62rpx;
							height: 70rpx;
						}

						&__text {
							font-size: 24rpx;
							color: #666666;
							font-weight: 500;
							margin-left: 16rpx;
							text-align: left;
						}
					}

					.block-item:nth-child(2n) {
						margin-left: 64rpx;
					}

					.block-item:nth-last-child(1) {
						margin-bottom: 0;
					}

					.block-item:nth-last-child(2) {
						margin-bottom: 0;
					}
				}
			}

			.service-flow {
				margin: 34rpx 24rpx 0;
				padding: 45rpx 20rpx 34rpx 28rpx;

				&__content {
					margin-top: 18rpx;

					$dot-bkgs: linear-gradient(0deg, #ebb6b6 0%, #f7d8ba 99%, #f7d8ba 100%),
					linear-gradient(0deg, #edbd97 0%, #e4de9f 100%, #e4de9f 100%),
					linear-gradient(0deg, #8fa9e3 0%, #a3d9fb 100%),
					linear-gradient(0deg, #e3c2f7 0%, #e3c2f7 1%, #c7ccfb 100%),
					linear-gradient(0deg, #f99ea2 0%, #f4d4fa 100%);
					$dot-border: #f7d8ba,
					#e4de9f,
					#a3d9fb,
					#c7ccfb,
					#f4d4fa;
					$panel-bkgs: linear-gradient(0deg, #fde5e5b3 0%, #fdf7f1b3 100%),
					linear-gradient(0deg, #fdede1b3 0%, #fbfbefb3 100%),
					linear-gradient(0deg, #e5e7f7b3 0%, #f3fbfdb3 100%),
					linear-gradient(0deg, #f5e7fdb3 0%, #f0f1fcb3 100%),
					linear-gradient(0deg, #fde5e5b3 0%, #f9f4fcb3 100%);

					.dot-line {
						float: left;
						width: 16rpx;
						height: 16rpx;
						border-radius: 100%;
						z-index: 2;
						position: relative;
						top: 8rpx;
						left: 8rpx;

						&::after {
							content: '';
							width: 22rpx;
							height: 22rpx;
							box-sizing: border-box;
							border-radius: 100%;
							border: 2rpx solid;
							z-index: 2;
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
						}
					}

					@for $index from 1 through length($dot-bkgs) {
						&:nth-child(#{$index+1}n) .dot-line {
							background: nth($dot-bkgs, $index);

							&::after {
								border-color: nth($dot-border, $index);
							}
						}

						&:nth-child(#{$index+1}n) .content-panel {
							background: nth($panel-bkgs, $index);
						}
					}

					&:nth-child(2) .content-panel:before {
						top: 10rpx !important;
					}

					.content-panel {
						border-radius: 5px;
						margin-left: 40rpx;
						padding: 24rpx 8rpx 24rpx 32rpx;
						color: #666666;
						font-weight: 500;
						position: relative;

						&::before {
							content: '';
							width: 2rpx;
							opacity: .2;
							background-color: #666666;

							z-index: 1;
							position: absolute;
							top: -18rpx;
							left: calc(-40rpx + 15rpx);
							bottom: 0;
						}

						.db-arrow-down {
							width: 98rpx;
							height: 103rpx;
							position: absolute;
							right: 20rpx;
							bottom: 24rpx;
						}

						&__section {
							font-size: 24rpx;
							line-height: 40rpx;
							position: relative;

							&::before {
								content: '';
								position: absolute;
								width: 8rpx;
								height: 8rpx;
								border-radius: 100%;
								background-color: #7a7a7a;
								top: 16rpx;
								left: -16rpx;
							}
						}
					}
				}
			}

			.cost-description {
				margin: 22rpx 24rpx 0;
				padding: 45rpx 20rpx 34rpx 28rpx;

				&__content {
					margin-top: 50rpx;
					font-size: 24rpx;
					line-height: 40rpx;
					color: #666666;
					font-weight: 500;
					position: relative;

					&>li {
						margin-left: 36rpx;
						position: relative;

						&::before {
							content: '';
							width: 8rpx;
							height: 8rpx;
							border-radius: 100%;
							background-color: #7a7a7a;
							position: absolute;
							left: -26rpx;
							top: calc(20rpx - 4rpx);
						}
					}

					&>li+li {
						margin-top: 10rpx;
					}
				}
			}

			.btn {
				margin: 32rpx auto 0;
			}
		}
	}
</style>
