<template>
	<view class="app">
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" indicator-color='#fff' indicator-active-color='#0086d6' :autoplay="autoplay"
			:interval="3000" :duration="1500" class="swiper-box" :circular='true' @change="swiperChange">
			<swiper-item v-for="(item ,index) in lbinfo" :key="index">
				<view class="swiper-item" v-show="!splits(item)" wx-if="{item}" @tap='goswiper(item)'>
					<image v-if="item" :src="item" mode="widthFix"></image>
				</view>
				<view class="swiper-item" v-show="splits(item)" v-if="item">
					<video :id="'myVideo'+index" :autoplay="false" :src="item" controls show-fullscreen-btn
						object-fit="fill" @play="play" @pause="pause" @ended="ended" auto-pause-if-navigate
						show-play-btn :enable-progress-gesture='true' :show-center-play-btn='true' enable-play-gesture
						auto-pause-if-open-native show-mute-btn></video>
				</view>
			</swiper-item>
		</swiper>
		<!-- <u-swiper v-if="lbinfo" :list="lbinfo" height="350" style='background-size: 100%;' mode='none'></u-swiper> -->
		<view class="item">
			<view class="text" v-if='list.nurseItemName'>
				{{list.nurseItemName||'暂无'}}
			</view>
			<!-- <view class="pingfen">
			<u-rate :count="5" value="2"></u-rate>
		</view> -->
		</view>
		<!-- 		<view class="Consumablespackage" v-if='list.itemConsumableList'>耗材包详情:
			<span>￥{{list.consumableTotalPrice==null?'0':list.consumableTotalPrice}}</span>
			<view class="detail" v-for='(item,index) in list.itemConsumableList' :key="index">
				·{{item.consumableDetail}}
				<span>{{item.consumableCount}}{{item.consumableUnit}}/￥{{item.consumablePrice}}</span>
			</view>
		</view> -->
		<view class="detailtitle">
			<view class="Introduction">服务详情:</view>
			<!-- <u-parse :html="list.nurseItemContent"></u-parse> -->
			<u-parse :html="list.nurseItemContent"></u-parse>
			<!-- <view class="textInfo" v-if="list.nurseItemContent" v-html="list.nurseItemContent">
			</view> -->
		</view>
		<view class="bottomcontent">
			<view class="appoinprice" v-if="list.nurseItemPrice">
				￥{{list.nurseItemPrice}}
			</view>
			<view class="appointment" @tap.stop='goappointments(item)'>立即预约</view>
		</view>
		<u-toast ref="uToast" />
		<u-mask :show="usershow" class='mask'>
			<view class="information">
				<image src="@/static/pagesB/information.png" mode=""></image>
				<view class="title">
					请完善个人信息
				</view>
				<view class="cancel" @tap='usershow=false'>
					取消
				</view>
				<view class="determine" @tap='goinformation'>
					去完善
				</view>
			</view>
		</u-mask>
	</view>
</template>
<script>
	import {
		AppIdentification
	} from '@/api/pagesB/AppIdentification/index.js'
	import baseurl from '@/api/baseurl.js'
	import {
		getAppStationItemInfo
	} from '@/api/pagesB/ProjectDetails/index.js'
	export default {
		data() {
			return {
				swiperImglink: [], //sweiper跳转link
				lbinfo: [], //轮播
				autoplay: true, //自动切换轮播图
				videoContext: '',
				baseurl: '',
				orderNo: '',
				usershow: false, //完善信息开关
				list: {}, //护理站list
				timer: null,
				stationId: null,
				stationItemId: null,
				stationItemPriceId: null,
				nurseStationId: null,
			}
		},
		onLoad(options) {
			this.stationId = options.stationId
			this.stationItemId = options.stationItemId
			this.stationItemPriceId = options.stationItemPriceId
			this.nurseStationId = options.nurseStationId
		},
		onShow() {
			this.baseurl = baseurl
			this.usershow = false
			// 耗材包详情方法调用
			this.getlist(this.stationId, this.stationItemId, this.stationItemPriceId)
		},
		methods: {
			//跳转swiper
			goswiper(item) {
				this.swiperImglink.forEach(e => {
					e.image = baseurl + e.posterPictureUrl
					if (e.image == item) {
						if (e.jumpLink == '/pages/medicalservice/medicalservice' || e.jumpLink ==
							'/pages/myinformation/myinformation') {
							uni.switchTab({
								url: e.jumpLink
							})
						} else {
							uni.navigateTo({
								url: e.jumpLink
							})
						}
					}
				})
			},
			swiperChange(e) {
				let {
					current,
					source
				} = e.detail
				this.videoContext = uni.createVideoContext('myVideo' + (current - 1));
				//只有手动切换时开始轮播，并且上一页视频暂停
				if (source === 'touch') {
					this.videoContext.pause(); //暂停
					this.autoplay = true
				}
			},
			// 获取数据
			GetBanner() {},
			// 处理banner返回的是是视频还是图片
			splits(url) {
				if (url.indexOf('.') != -1) {
					var ext = url.substring(url.lastIndexOf('.') + 1);
					return ['mp4', 'webm', 'mpeg4', 'ogg'].indexOf(ext) != -1
				}
			},
			// 点击开始/继续播放
			play() {
				this.autoplay = false
				// this.videoContext.requestFullScreen()
			},
			// 视频暂停
			pause() {
				this.autoplay = true
			},
			// 视频结束
			ended() {
				this.autoplay = true
			},
			//预约
			goappointments() {
				let that = this
				const value = uni.getStorageSync('openid');
				const value2 = uni.getStorageSync('userinfo');
				if (value && value2) {
					const patientid = value2.id
					AppIdentification(patientid).then(res => {
						if (res.code == 200) {
							if (res.data.loginFlag) {
								that.usershow = false
								// const scenenurseStationId = uni.getStorageSync('scenenurseStationId');
								// if (that.nurseStationId == scenenurseStationId) {
								// 	uni.navigateTo({
								// 		url: `/pagesB/hospitalcare/hospitalcare?stationId=${this.stationId}&stationItemId=${this.stationItemId}&stationItemPriceId=${this.stationItemPriceId}`,
								// 	})
								// } else {
									uni.navigateTo({
										url: `/pagesB/appointmenttime/appointmenttime?stationId=${this.stationId}&stationItemId=${this.stationItemId}&stationItemPriceId=${this.stationItemPriceId}`,
									})
								// }
							} else {
								that.usershow = true
							}
						} else if (res.code == 9999) {} else {
							that.$refs.uToast.show({
								title: res.msg,
								type: 'error',
								url: '/pagesB/login/login'
							})
						}
					})
				} else {
					that.$refs.uToast.show({
						title: '未登录,请先登录',
						type: 'error',
						url: '/pagesB/login/login'
					})
				}
			},
			//跳转完善页面
			goinformation() {
				this.usershow = false
				uni.navigateTo({
					url: '/pagesB/information/information'
				})
			},
			// 信息
			getlist(stationId, stationItemId, stationItemPriceId) {
				this.lbinfo = []
				getAppStationItemInfo(stationId, stationItemId, stationItemPriceId).then(res => {
					if (res.data.nurseItemContent) {
						res.data.nurseItemContent = res.data.nurseItemContent.replace(/\<img/gi,
							"<br/> <img class='richPic'")
					}
					if (res.data.poserInfoList.length >= 1) {
						this.swiperImglink = res.data.poserInfoList
						res.data.poserInfoList.forEach(e => {
							e.image = baseurl + e.posterPictureUrl
							this.lbinfo.push(e.image)
						})
						if (res.data.poserInfoList[0].posterVideoUrl) {
							res.data.poserInfoList[0].video = baseurl + res.data.poserInfoList[0].posterVideoUrl
							this.lbinfo.push(res.data.poserInfoList[0].video)
						}
					} else {
						this.lbinfo.push(this.baseurl + res.data.itemPictureUrl)
					}
					this.list = res.data
				})
			},
		},
		//1.分享给朋友
		onShareAppMessage(res) {
			let pages = getCurrentPages();
			let url = pages[pages.length - 1].$page.fullPath
			return {
				title: '新医路健康服务平台',
				path: url,
			}
		},
		//2.分享到朋友圈
		onShareTimeline(res) {
			let pages = getCurrentPages();
			let url = pages[pages.length - 1].$page.fullPath
			return {
				title: '新医路健康服务平台',
				path: url,
			}
		},
	}
</script>

<style lang="scss">
	@import './ProjectDetails.scss';
</style>