<template>
	<view class="app">
		<!-- <u-swiper :list="swiperImgUrls" effect3d='true' height='400' interval='5000' duration='2000'></u-swiper> -->
		<!-- <swiper class="swiper-block" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
			:circular='true' previous-margin='90rpx' next-margin='90rpx' current='0' @change="swiperChange">
			<swiper-item class="swiper-item" v-for="(item,index) in swiperImgUrls">
				<image :src="item" :class="['slide-image', currentIndex === index?'active':'']" mode="aspectFill">
				</image>
			</swiper-item>
		</swiper> -->
		<view class="container" v-if="swiperImgUrls">
			<swiper :indicator-dots="true" :current="currentIndex" previous-margin="55rpx" next-margin="55rpx"
				:autoplay="autoplay" :interval="3000" :duration="1000" class="swiper-block" :circular='true'
				@change="swiperChange">
				<swiper-item v-for="(item ,index) in swiperImgUrls" :key="index" class="swiper-item">
					<view v-show="!splits(item)" wx-if="{item}" @tap='goswiper(item)'>
						<image v-if="item" :src="item" :class="['slide-image', currentIndex === index?'active':'']"
							mode="aspectFill">
						</image>
					</view>
					<view 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 :poster='poster'
							:class="['slide-image', currentIndex === index?'active':'']"></video>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="items">
			<view class="item" @tap="gosite">
				<image src="../../static/hlz.png" mode=""></image>
				<view class="title">
					护理机构
				</view>
			</view>
			<view class="item" @tap="gomedicine">
				<image src="../../static/jkzx.png" mode=""></image>
				<view class="title">
					齐鲁名医
				</view>
			</view>
			<view class="item" @tap='godiseasemanagement'>
				<image src="../../static/zbgl.png" mode=""></image>
				<view class="title">
					专病管理
				</view>
			</view>
			<view class="item" @tap='goycjc'>
				<image src="../../static/jiance.png" mode=""></image>
				<view class="title">
					远程监测
				</view>
			</view>
		</view>
		<view class="Welfarecustomerservice">
			<view class="topimgs">
				<image src="../../static/ynph.png" mode="" @tap='gopzyh'></image>
				<image src="../../static/jypz.png" mode="" @tap='goseekmedicaladvice'></image>
				<image src="../../static/qyzq.png" mode="" @tap='gosuyu'></image>
			</view>
			<image class="night" src="../../static/96558.png" mode="" @tap='gonight'></image>
			<view class="rightimg">
				<image src="../../static/fuli.png" mode="" @tap='gomaterialbenefits'></image>
				<image src="../../static/kefu.png" mode="" @tap='gocustomerservice'></image>
			</view>
			<image class="shopping" src="../../static/shoping.png" mode="" @tap='goshopping'></image>
		</view>
		<view class="Healthknowledge">
			<view class="title">
				健康常识
			</view>
			<view class="more" @tap='gohealth'>
				<view class="title">
					查看更多
				</view>
				<image src="../../static/huijiantou.png" mode=""></image>
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in informationCategoryVOList" :key="index"
					@tap='gohealthitem(item)'>
					<view class="text">
						{{item.informationTitle}}
					</view>
					<view class="author"></view>
					<image :src="item.leadThumbnailUrl" mode=""></image>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from "vuex";
	import {
		getPoserInfoListByType
	} from '@/api/homepage/index.js'
	import {
		getHeathHousingList
	} from '@/api/Healthknowledge/index.js'
	import baseurl from '../../api/baseurl';
	export default {
		data() {
			return {
				swiperImglink: [], //sweiper跳转link
				swiperImgUrls: [],
				autoplay: true, //自动切换轮播图
				videoContext: '',
				currentIndex: 0,
				informationCategoryVOList: [], //咨询信息
				informationCategorytotal: 0,
				pageNum: 1,
				pageSize: 5,
				poster: '', //视频封面
			};
		},
		computed: {
			//1.获取state数据的第一种方法
			// getcount(){
			//     return this.$store.state.count;
			// },
			//2.获取State的第二种方法---映射
			// ...mapState(["name"])
		},
		onShow() {
			this.pageNum = 1
			this.swiperImgUrls = []
			this.getPoserInfo();
		},
		methods: {
			//点击海报跳转
			goswiper(item) {
				this.swiperImglink.forEach(e => {
					e.image = baseurl + e.posterPictureUrl
					if (e.image == item) {
						if (e.dictLabel == '专病管理') {
							const phone = uni.getStorageSync('phone');
							if (phone) {
								uni.navigateToMiniProgram({
									appId: 'wxa690d053c34ceebd',
									path: 'pages/index/index',
									extraData: {
										'from': 'qy',
										'phone': phone
									},
									success(res) {}
								})
							} else {
								this.$refs.uToast.show({
									title: '您未登录,请先登录',
									type: 'error',
									duration: '1000',
									url: '/pages/login/login'
								})
							}
						} else if (e.dictLabel == '新医象') {
							this.goycjc();
						} else {
							if (e.jumpLink == '/pages/ConsultationDetails/ConsultationDetails') {
								const url = `/pages/ConsultationDetails/ConsultationDetails?goto=${'homepage'}`
								uni.navigateTo({
									url: url
								})
							} else if (e.jumpLink == '/pages/homepage/homepage' || e.jumpLink ==
								'/pages/Personal/Personal') {
								uni.switchTab({
									url: e.jumpLink
								})
							} else {
								uni.navigateTo({
									url: e.jumpLink
								})
							}
						}
					}
				})
			},
			swiperChange(e) {
				this.currentIndex = e.detail.current
				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
			},
			//跳转item
			gohealthitem(item) {
				uni.navigateTo({
					url: `/pages/Healthitem/Healthitem?item=${encodeURIComponent(JSON.stringify(item))}`
				})
			},
			//齐鲁名医
			getHeathHousing() {
				getHeathHousingList(this.pageNum, this.pageSize).then(res => {
					if (res.rows) {
						res.rows.forEach(e => {
							e.leadThumbnailUrl = baseurl + e.leadThumbnailUrl
						})
					}
					this.informationCategoryVOList = res.rows
					this.informationCategorytotal = res.total
				})
			},
			//海报
			getPoserInfo() {
				getPoserInfoListByType().then(res => {
					if (res.code == 200) {
						if (res.data.poserInfoList) {
							this.swiperImglink = res.data.poserInfoList
							res.data.poserInfoList.forEach(e => {
								e.image = baseurl + e.posterPictureUrl
								this.swiperImgUrls.push(e.image)
							})
							if (res.data.poserInfoList[0].video) {
								res.data.poserInfoList[0].video = baseurl + res.data.poserInfoList[0]
									.posterVideoUrl
								this.swiperImgUrls.push(res.data.poserInfoList[0].video)
							}
						}
						this.getHeathHousing();
					}
				})
			},
			//专病管理
			godiseasemanagement() {
				uni.navigateTo({
					url: '/pages/diseasemanagement/diseasemanagement'
				})
			},
			//齐鲁名医
			gomedicine() {
				uni.navigateTo({
					url: '/pages/medicine/medicine'
				})
			},
			//跳转客服
			gocustomerservice() {
				uni.navigateTo({
					url: '/pages/customerservice/customerservice'
				})
			},
			//跳转护理站页面
			gosite() {
				this.openPopup();
				setTimeout(e => {
					uni.navigateTo({
						url: '/pages/site/site'
					})
				}, 0)
			},
			//健康常识
			gohealth() {
				uni.navigateTo({
					url: '/pages/Healthknowledge/Healthknowledge'
				})
			},
			//新人福利
			// 第一种 直接映射
			...mapActions(["openPopup"]),
			gomaterialbenefits() {
				// 第二种引入
				// this.$store.dispatch("openPopup");
				this.openPopup();
				setTimeout(e => {
					uni.navigateTo({
						url: '/pages/materialbenefits/materialbenefits'
					})
				}, 0)
			},
			//跳转商城
			goshopping() {
				this.openPopup();
				setTimeout(e => {
					uni.navigateTo({
						url: '/pages/shopping/shopping'
					})
				}, 0)
			},
			//跳转新意象
			goycjc() {
				uni.navigateToMiniProgram({
					appId: 'wxa2335d45fb25ee50',
					success(res) {}
				})
			},
			//跳转疏于
			gosuyu() {
				uni.navigateToMiniProgram({
					appId: 'wxa0e41e29dd9e540b',
					path: 'pages/index/index?source=ad_app_yryl-qydjtzwx',
					success(res) {}
				})
			},
			//跳转就医
			goseekmedicaladvice() {
				uni.navigateToMiniProgram({
					appId: 'wx4f1d77226064cfc1',
					path: 'pages/index/index',
					success(res) {}
				})
			},
			//跳转
			gopzyh() {
				uni.navigateTo({
					url: `/pages/nursestation/nursestation?nurseStationId=${13}`
				})
			},
			//跳转贴心智养
			gonight() {
				uni.navigateTo({
					url: '/pages/night/night'
				})
			},
		},
		// onReachBottom() { //下滑加载
		// 	if (this.informationCategoryVOList.length >= this.informationCategorytotal) {} else {
		// 		this.pageNum++
		// 		getHeathHousingList(this.pageNum, this.pageSize).then(res => {
		// 			if (res.rows) {
		// 				res.rows.forEach(e => {
		// 					e.leadThumbnailUrl = baseurl + e.leadThumbnailUrl
		// 					this.informationCategoryVOList.push(e)
		// 				})
		// 			}
		// 		})
		// 	}
		// },
		// onPullDownRefresh() { //下拉刷新
		// 	this.pageNum = 1;
		// 	this.getHeathHousing();
		// 	setTimeout(function() {
		// 		uni.stopPullDownRefresh();
		// 	}, 1000);
		// },
		//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">
	.app {
		padding: 0 0 0 0;
		-webkit-overflow-scrolling: touch;

		.container {
			padding-top: 65rpx;
			background-color: #fff
		}

		.swiper-block {
			height: 500rpx;
			width: 100%;
		}

		.swiper-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			overflow: unset;
		}

		.slide-image {
			height: 270rpx;
			width: 580rpx;
			border-radius: 9rpx;
			box-shadow: 0px 0px 30rpx rgba(0, 0, 0, 0.2);
			margin: 0 0 0 30rpx;
			z-index: 1;
		}

		.active {
			transform: scale(1.10);
			transition: all 0.2s ease-in 0s;
			z-index: 20;
		}

		video {
			// height: 100%;
			// width: 100%;
		}

		.Healthknowledge {
			width: 100%;
			padding: 40rpx 50rpx 50rpx;
			background-color: #fff;
			position: relative;
			line-height: 46rpx;

			.more {
				position: absolute;
				right: 20rpx;
				top: 40rpx;
				height: 46rpx;
				width: 30%;

				.title {
					position: absolute;
					right: 30rpx;
					top: 50%;
					text-align: right;
					transform: translateY(-50%);
					font-size: 26rpx;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: #969494;
				}

				image {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 15rpx;
					height: 25rpx;
				}
			}

			.list {
				width: 100%;
				margin: 20rpx auto 0;

				.item {
					width: 100%;
					height: 250rpx;
					position: relative;
					border-bottom: 2rpx solid #CDC9C9;

					image {
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
						width: 200rpx;
						height: 200rpx;
						border-radius: 10rpx;
					}

					.author {
						position: absolute;
						bottom: 20rpx;
						left: 0;
						font-size: 20rpx;
						color: #969494;
					}

					.text {
						position: absolute;
						top: 20rpx;
						left: 0;
						width: 65%;
						font-size: 30rpx;
						text-overflow: -o-ellipsis-lastline;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 5; //行数需设置
						line-clamp: 5;
						-webkit-box-orient: vertical;
						text-align: justify;
					}
				}
			}

			.title {
				font-size: 36rpx;
				font-weight: bold;
			}
		}

		.Welfarecustomerservice {
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			background-color: #fff;
			width: 100%;
			padding: 30rpx 2%;
			margin-bottom: 20rpx;

			.topimgs {
				display: flex;
				justify-content: space-around;
				width: 100%;
				margin-bottom: 30rpx;

				image {
					width: 30%;
					height: 170rpx;
				}
			}

			.shopping {
				margin-top: 5rpx;
				width: 98%;
				height: 170rpx;
			}

			.rightimg {
				display: inline-block;
				width: 48%;

				image {
					display: block;
					margin-bottom: 10rpx;
					width: 100%;
					height: 165rpx;
				}
			}

			.night {
				width: 48%;
				height: 340rpx;
			}
		}

		.items {
			background-color: #fff;
			padding: 30rpx 20rpx 20px;
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.item {
				width: 25%;

				image {
					width: 120rpx;
					height: 120rpx;
					display: block;
					margin: 0 auto 20rpx;
				}

				.title {
					font-size: 36rpx;
					font-weight: 600;
					text-align: center;
				}
			}
		}
	}
</style>
