<template>
	<view class="explain index">
		<Header ref="headerref"></Header>
		<view class="content">
			<view class="nav-bar">
				<view :class="'nav-item'+(navtype==2?' active PfScMedium':'')" @click="changeType(2)">
					患者用法
					<view class="nav-item-bt-border" v-if="navtype==2"></view>
				</view>
				<view :class="'nav-item'+(navtype==1?' active PfScMedium':'')" @click="changeType(1)">
					医生指南
					<view class="nav-item-bt-border" v-if="navtype==1"></view>
				</view>
			</view>

			<view class="nav-type1-content" v-if="navtype == 1">
				<view class="type1-item" v-for="(item, key) in doctorDescList" :key="key">
					<img :src="cssUrl+'explain_'+(key+1)+'.svg'">
					<view class="type1-txt1 PfScSemibold">{{item.txt1}}</view>
					<view class="type1-txt2">{{item.txt2}}</view>
				</view>
			</view>

			<view class="nav-type2-content" v-if="navtype == 2">
				<view class="step-header PfScSemibold">使用步骤</view>

				<view class="step-item" v-for="(item, key) in patientStepDescList" :key="key">
					<view class="step-left PfScMedium">
						{{key+1}}
					</view>
					<view class="step-right">
						<view class="type1-txt1 PfScSemibold">{{item.txt1}}</view>
						<view class="type1-txt2">{{item.txt2}}</view>
					</view>
				</view>
			</view>

			<view class="step-bottom" v-if="navtype == 2">
				<view class="step-bottom-desc">
					<img :src="cssUrl+'explain_line_left.png'">
					<text class="PfScSemibold">扫码约名医，疗程随时查</text>
					<img :src="cssUrl+'explain_line_right.png'">
				</view>

				<view class="step-bottom-list">
					<view class="step-bottom-item" v-for="(item, key) in stepBottomList" :key="key">
						<img :src="cssUrl+item.img">
						<text class="PfScMedium">{{item.txt}}</text>
					</view>
				</view>
			</view>

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

<script>
	import Header from '@/components/explainPageHeader.vue';

	export default {
		name:"index",
		data() {
			return {
				pageLoad:false,
				navtype:2,
				cssUrl:this.cssUrl,
				doctorDescList:[
					{txt1:'医生个人品牌',txt2:'打造专属中医名片'},
					{txt1:'处方余量管理',txt2:'自动扣除就诊次数'},
					{txt1:'治疗时长闹钟',txt2:'智能计时免记录'},
					{txt1:'床位标注',txt2:'医患实时同步位置'}
				],
				patientStepDescList:[
					{txt1:'扫码或点击链接',txt2:'进入该医生的专属主页'},
					{txt1:'预约就诊时间',txt2:'选择您方便的就诊时间段'},
					{txt1:'就诊当天扫码报到',txt2:'扫描现场二维码，快速报到'},
					{txt1:'查看疗程进度',txt2:'随时看治疗详情、剩余次数'},
				],
				stepBottomList:[
					{txt:'名医直约',img:'explain_5.svg'},
					{txt:'扫码即诊',img:'explain_6.svg'},
					{txt:'疗程可查',img:'explain_7.svg'},
				]
			}
		},
		components:{
			Header:Header
		},
		onLoad(e) {
			console.log(e)
		},
		async onShow() {
			this.pageLoad = true;
		},
		methods: {
			changeType(type) {
				this.navtype = type;
			}
		}
	}
</script>

<style scoped lang="scss">
	.explain{
		height: 100vh;
		box-sizing: border-box;
		background: #FFFFFF;
		width: 100vw;
		overflow-x: hidden;
		overflow-y: auto;
		.content{
			top: 356rpx;
			position: absolute;
			z-index: 198;
			width: 100%;
			height: auto;
			overflow: hidden;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 0 0;
			.nav-bar{
				display: flex;
				border-radius: 24rpx 24rpx 0rpx 0rpx;
				border-radius: 24rpx 24rpx 0rpx 0rpx;
				box-shadow: 0rpx 1rpx 0rpx 0rpx rgba(0, 0, 0, 0.15);
				padding: 0 62rpx;
				box-sizing: border-box;
				width: 100%;
				height: 120rpx;
				.nav-item{
					width: 269px;
					height: 120rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					color: #666666;
					position: relative;
					.nav-item-bt-border{
						position: absolute;
						width:100%;
						z-index: 9;
						height: 4rpx;
						bottom: 0rpx;
						left: 0;
						background: #4DC56D;
					}
					&.active{
						color: #4DC56D;
					}
				}
			}
			.nav-type1-content{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 48rpx 42rpx;
				column-gap: 48rpx;
				row-gap: 48rpx;
				margin: 14rpx 42rpx 0 42rpx;
				box-sizing: border-box;
				height: auto;
				.type1-item{
					flex-shrink: 0;
					flex-grow: 1;
					img{
						width: 80rpx;
						height: 80rpx;
						display: block;
						margin: auto;
					}
					.type1-txt1,.type1-txt2{
						text-align: center;
						font-size: 28rpx;
					}
					.type1-txt1{
						line-height: 38rpx;
						color: #000000;
						margin-top: 24rpx;
					}
					.type1-txt2{
						color: #6B7280;
						margin-top: 6rpx;
					}
				}
			}
			.nav-type2-content{
				padding: 48rpx 42rpx 0 42rpx;
				margin: 24rpx 42rpx 46rpx 42rpx;
				box-sizing: border-box;
				height: auto;
				overflow: hidden;
				.step-header{
					font-size: 36rpx;
					color: #000000;
					margin-bottom: 48rpx;
				}
				.step-item{
					display: flex;
					column-gap: 32rpx;
					margin-bottom: 48rpx;
					height: 84rpx;
					.step-left{
						width: 64rpx;
						height: 64rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						color: #FFFFFF;
						border-radius: 100%;
						background: #39D067;
					}
					.step-right{
						.type1-txt1{
							font-size: 28rpx;
							color: #000000;
						}
						.type1-txt2{
							font-size: 28rpx;
							color: #6B7280;
							margin-top: 6rpx
						}
					}
				}
			}
			.step-bottom{
				width: 618rpx;
				height: auto;
				margin: 46rpx auto 0;
				.step-bottom-desc{
					display: flex;
					align-items: center;
					justify-content: space-between;
					img{
						width: 98rpx;
						height: 6rpx;
					}
					text{
						font-size: 34rpx;
						color: #82C989;
					}
				}
				.step-bottom-list{
					display: flex;
					justify-content: space-between;
					margin-top: 30rpx;
					padding:0 38rpx;
					.step-bottom-item{
						display: flex;
						align-items: center;
						column-gap: 8rpx;
						img{
							width: 28rpx;
							height: 28rpx;
						}
						text{
							font-size: 28rpx;
							color: #82C989;
						}
					}
				}
			}
		}
	}
</style>
