<template>
	<view
		class="u-swiper"
		:style="{
			backgroundColor: bgColor,
			height: $u.addUnit(height),
			borderRadius: $u.addUnit(radius)
		}"
	>
		<view
			class="u-swiper__loading"
			v-if="loading"
		>
			<u-loading mode="circle"></u-loading>
		</view>
		<swiper
			v-else
			class="u-swiper__wrapper"
			:style="{
				height: $u.addUnit(height),
			}"
			@change="change"
			:circular="circular"
			:interval="interval"
			:duration="duration"
			:autoplay="autoplayCom"
			:current="currentIndex"
			:currentItemId="currentItemId"
			:previousMargin="$u.addUnit(previousMargin)"
			:nextMargin="$u.addUnit(nextMargin)"
			:acceleration="acceleration"
			:displayMultipleItems="displayMultipleItemsCom"
			:easingFunction="easingFunction"
		>
			<swiper-item
				class="u-swiper__wrapper__item"
				v-for="(item, index) in list"
				:key="index"
			>
				<view
					class="u-swiper__wrapper__item__wrapper"
					:style="[itemStyle(index)]"
				>
					<!-- 在nvue中，image图片的宽度默认为屏幕宽度，需要通过flex:1撑开，另外必须设置高度才能显示图片 -->
					<image
						class="u-swiper__wrapper__item__wrapper__image"
						v-if="getItemType(item) === 'image'"
						:src="getSource(item)"
						:mode="imgMode"
						@tap="clickHandler(index)"
						:style="{
							height: $u.addUnit(height),
							borderRadius: $u.addUnit(radius)
						}"
					></image>
					<!-- #ifdef H5 || MP-WEIXIN || APP-NVUE -->
					<!-- 只有h5和微信小程序和nvue可以直接播放视频 -->
					<video
						class="u-swiper__wrapper__item__wrapper__video"
						v-if="getItemType(item) === 'video'"
						:id="`video-${index}`"
						:enable-progress-gesture="false"
						:src="getSource(item)"
						:poster="getPoster(item,'auto')"
						:title="showTitle && $u.test.object(item) && item.title ? item.title : ''"
						:style="{
							height: $u.addUnit(height)
						}"
						:controls="true"
						:show-mute-btn="true"
						:autoplay="videoAutoplayFn(index)"
						:muted="videoMuted"
						:object-fit="item.objectFit"
						@tap="clickHandler(index)"
						@ended="videoEnded(index)"
					></video>
					<!-- #endif -->
					<!-- #ifndef H5 || MP-WEIXIN || APP-NVUE-->
					<!-- 其他端只能展示图片，点击图片播放视频 -->
					<image
						v-if="getItemType(item) === 'video'"
						class="u-swiper__wrapper__item__wrapper__image"
						:src="getPoster(item)"
						mode="aspectFill"
						:style="{
							height: $u.addUnit(height),
							borderRadius: $u.addUnit(radius)
						}"
					></image>
					<image
						v-if="getItemType(item) === 'video'"
						class="play-btn"
						src="data:image/png;base64, "
						mode="widthFix"
						@tap.stop="previewVideo(index)"
					></image>
					<!-- #endif -->
					<text
						v-if="showTitle && $u.test.object(item) && item.title && $u.test.image(getSource(item))"
						class="u-swiper__wrapper__item__wrapper__title u-line-1"
					>{{ item.title }}</text>
				</view>
			</swiper-item>
		</swiper>
		<view class="u-swiper__indicator" :style="[$u.addStyle(indicatorStyle)]">
			<slot name="indicator">
				<u-swiper-indicator
					v-if="!loading && indicator && !showTitle"
					:indicatorActiveColor="indicatorActiveColor"
					:indicatorInactiveColor="indicatorInactiveColor"
					:length="list.length"
					:current="currentIndex"
					:indicatorMode="indicatorMode"
				></u-swiper-indicator>
			</slot>
		</view>

		<u-popup v-model="videoPopup.show" mode="center" :duration="0" :blur="10" :closeable="true">
			<video
				v-if="videoPopup.show"
				class="u-swiper__wrapper__item__wrapper__video"
				:enable-progress-gesture="false"
				:src="videoPopup.url"
				:poster="videoPopup.poster"
				style="height: 60vh;"
				:controls="true"
				:show-mute-btn="true"
				:autoplay="true"
				:muted="false"
				object-fit="contain"
				@ended="videoEnded(index)"
			></video>
		</u-popup>
	</view>
</template>

<script>
	import uSwiperIndicator from "./components/u-swiper-indicator"
	/**
	 * Swiper 轮播图
	 * @description 该组件一般用于导航轮播，广告展示等场景,可开箱即用，
	 * @tutorial https://www.uviewui.com/components/swiper.html
	 * @property {Array}			list					轮播图数据
	 * @property {Boolean}			indicator				是否显示面板指示器（默认 false ）
	 * @property {String}			indicatorActiveColor	指示器非激活颜色（默认 '#FFFFFF' ）
	 * @property {String}			indicatorInactiveColor	指示器的激活颜色（默认 'rgba(255, 255, 255, 0.35)' ）
	 * @property {String | Object}	indicatorStyle			指示器样式，可通过bottom，left，right进行定位
	 * @property {String}			indicatorMode			指示器模式（默认 'line' ）
	 * @property {Boolean}			autoplay				是否自动切换（默认 true ）
	 * @property {String | Number}	current					当前所在滑块的 index（默认 0 ）
	 * @property {String}			currentItemId			当前所在滑块的 item-id ，不能与 current 被同时指定
	 * @property {String | Number}	interval				滑块自动切换时间间隔（ms）（默认 3000 ）
	 * @property {String | Number}	duration				滑块切换过程所需时间（ms）（默认 300 ）
	 * @property {Boolean}			circular				播放到末尾后是否重新回到开头（默认 false ）
	 * @property {String | Number}	previousMargin			前边距，可用于露出前一项的一小部分，nvue和支付宝不支持（默认 0 ）
	 * @property {String | Number}	nextMargin				后边距，可用于露出后一项的一小部分，nvue和支付宝不支持（默认 0 ）
	 * @property {Boolean}			acceleration			当开启时，会根据滑动速度，连续滑动多屏，支付宝不支持（默认 false ）
	 * @property {Number}			displayMultipleItems	同时显示的滑块数量，nvue、支付宝小程序不支持（默认 1 ）
	 * @property {String}			easingFunction			指定swiper切换缓动动画类型， 只对微信小程序有效（默认 'default' ）
	 * @property {String}			keyName					list数组中指定对象的目标属性名（默认 'url' ）
	 * @property {String}			imgMode					图片的裁剪模式（默认 'aspectFill' ）
	 * @property {String | Number}	height					组件高度（默认 130 ）
	 * @property {String}			bgColor					背景颜色（默认 	'#f3f4f6' ）
	 * @property {String | Number}	radius					组件圆角，数值或带单位的字符串（默认 4 ）
	 * @property {Boolean}			loading					是否加载中（默认 false ）
	 * @property {Boolean}			showTitle				是否显示标题，要求数组对象中有title属性（默认 false ）
	 * @event {Function(index)}	click	点击轮播图时触发	index：点击了第几张图片，从0开始
	 * @event {Function(index)}	change	轮播图切换时触发(自动或者手动切换)	index：切换到了第几张图片，从0开始
	 * @example	<u-swiper :list="list4" keyName="url" :autoplay="false"></u-swiper>
	 */
	export default {
		name: 'u-swiper',
		emits: ["click", "change"],
		components:{
			uSwiperIndicator
		},
		props: {
			// 列表数组，元素可为字符串，如为对象可通过keyName指定目标属性名
			list: {
				type: [Array, null],
				default () {
					return [];
				}
			},
			// 是否显示面板指示器
			indicator: {
			    type: Boolean,
			    default: false
			},
			// 指示器非激活颜色
			indicatorActiveColor: {
			    type: String,
			    default: "#FFFFFF"
			},
			// 指示器的激活颜色
			indicatorInactiveColor: {
			    type: String,
			    default: "rgba(255, 255, 255, 0.35)"
			},
			// 指示器样式，可通过bottom，left，right进行定位
			indicatorStyle: {
			    type: [String, Object],
			    default: '',
			},
			// 指示器模式，line-线型，dot-点型
			indicatorMode: {
			    type: String,
			    default: 'line',
			},
			// 是否自动切换
			autoplay: {
			    type: Boolean,
			    default: true
			},
			// 当前所在滑块的 index
			current: {
			    type: [String, Number],
			    default: 0
			},
			// 当前所在滑块的 item-id ，不能与 current 被同时指定
			currentItemId: {
			    type: String,
			    default: '',
			},
			// 滑块自动切换时间间隔
			interval: {
			    type: [String, Number],
			    default: 3000
			},
			// 滑块切换过程所需时间
			duration: {
			    type: [String, Number],
			    default: 300
			},
			// 播放到末尾后是否重新回到开头
			circular: {
			    type: Boolean,
			    default: false
			},
			// 前边距，可用于露出前一项的一小部分，nvue和支付宝不支持
			previousMargin: {
			    type: [String, Number],
			    default: 0
			},
			// 后边距，可用于露出后一项的一小部分，nvue和支付宝不支持
			nextMargin: {
			    type: [String, Number],
			    default: 0
			},
			// 当开启时，会根据滑动速度，连续滑动多屏，支付宝不支持
			acceleration: {
			    type: Boolean,
			    default: false
			},
			// 同时显示的滑块数量，nvue、支付宝小程序不支持
			displayMultipleItems: {
			    type: Number,
			    default: 1
			},
			// 指定swiper切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic
			// 只对微信小程序有效
			easingFunction: {
			    type: String,
			    default: 'default'
			},
			// list数组中指定对象的目标属性名
			keyName: {
			    type: String,
			    default: 'url'
			},
			// 图片的裁剪模式
			imgMode: {
			    type: String,
			    default: 'aspectFill'
			},
			// 组件高度
			height: {
			    type: [String, Number],
			    default: 130
			},
			// 背景颜色
			bgColor: {
			    type: String,
			    default: '#f3f4f6'
			},
			// 组件圆角，数值或带单位的字符串
			radius: {
			    type: [String, Number],
			    default: 4
			},
			// 是否加载中
			loading: {
			    type: Boolean,
			    default: false
			},
			// 是否显示标题，要求数组对象中有title属性
			showTitle: {
			    type: Boolean,
			    default: false
			},
			// 视频是否自动播放
			videoAutoplay: {
			    type: Boolean,
			    default: false
			},
			// 视频是否静音播放
			videoMuted: {
			    type: Boolean,
			    default: false
			},
		},
		data() {
			return {
				$u: uni.$u,
				currentIndex: 0,
				videoPopup: {
					show: false,
					url: ""
				}
			}
		},
		watch: {
			current(val, preVal) {
				if(val === preVal) return;
				this.currentIndex = val; // 和上游数据关联上
			},

			// #ifdef H5 || MP-WEIXIN || APP-NVUE
			currentIndex(newVal, oldVal){
				if (this.checkIsVideo(oldVal)) {
					// 如果是视频，则暂停
					this.videoPopup.show = false;
					this.videoPopup.url = "";
					let videoContext = uni.createVideoContext(`video-${oldVal}`, this);
					videoContext.pause();
					videoContext.exitFullScreen();
				}
				if (this.checkIsVideo(newVal) && this.videoAutoplay) {
					// 如果是视频，则播放
					let videoContext = uni.createVideoContext(`video-${newVal}`, this);
					videoContext.play();
				}
			}
			// #endif
		},
		computed: {
			itemStyle() {
				return index => {
					const style = {}
					// #ifndef APP-NVUE || MP-TOUTIAO
					// 左右流出空间的写法不支持nvue和头条
					// 只有配置了此二值，才加上对应的圆角，以及缩放
					if (this.nextMargin && this.previousMargin) {
						style.borderRadius = uni.$u.addUnit(this.radius)
						if (index !== this.currentIndex) style.transform = 'scale(0.92)'
					}
					// #endif
					return style
				}
			},
			mutedCom() {
				// #ifdef H5
				return true;
				// #endif
				// #ifndef H5
				return false;
				// #endif
			},
			currentIsVideoCom(){
				let { currentIndex } = this;
				return this.checkIsVideo(currentIndex);
			},
			autoplayCom() {
				let { autoplay, currentIsVideoCom } = this;
				return currentIsVideoCom ? false : autoplay;
			},
			displayMultipleItemsCom(){
				let { displayMultipleItems, list } = this;
				if (list && list.length > 0) {
					return displayMultipleItems;
				} else {
					return 0
				}
			}
		},
		methods: {
      getItemType(item) {
        if (typeof item === 'string') return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
        if (typeof item === 'object' && this.keyName) {
          if (!item.type) return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
          if (item.type === 'image') return 'image'
          if (item.type === 'video') return 'video'
          return 'image'
        }
      },
			// 获取目标路径，可能数组中为字符串，对象的形式，额外可指定对象的目标属性名keyName
			getSource(item) {
				if (typeof item === 'string') return item
				if (typeof item === 'object' && this.keyName) return item[this.keyName]
				else uni.$u.error('请按格式传递列表参数')
				return ''
			},
			// 轮播切换事件
			change(e) {
				// 当前的激活索引
				const {
					current
				} = e.detail
				this.currentIndex = current
				this.$emit('change', e.detail)
			},
			// 当一个轮播item为视频时，获取它的视频海报
			getPoster(item, mode) {
				let { height } = this;
				if (mode === "auto") {
					return;
				}
				if (typeof item === 'object' && item.poster) {
					return item.poster;
				}
				let url = this.getSource(item);
				if (url.indexOf("cdn.bspapp.com")>-1 || url.indexOf("aliyuncs.com")>-1) {
					// 只有阿里云oss才支持
					let poster = `${url}?x-oss-process=video/snapshot,t_2000,f_jpg,w_0,h_0,m_fast,ar_auto`;
					return poster;
				} else {
					return;
				}
			},
			// 点击某个item
			clickHandler(index) {
				this.$emit('click', index)
			},
			// 下一页
			nextPage(){
				let { currentIndex=0, list=[] } = this;
				currentIndex++;
				currentIndex = currentIndex % list.length;
				this.currentIndex = currentIndex;
			},
			// 视频播放完毕后
			videoEnded(index){
				if (!this.videoPopup.show) {
					setTimeout(() => {
						this.nextPage();
					}, 1000);
				}
			},
			// 检测当前轮播显示的是否是视频
			checkIsVideo(index){
				let { list, currentIndex } = this;
				if (typeof index === "undefined") index = currentIndex;
				let item = list[index];
				return this.getItemType(item) === "video" ? true : false;
			},
			// 预览视频
			previewVideo(index){
				let { list, currentIndex } = this;
				if (typeof index === "undefined") index = currentIndex;
				let item = list[index];
				this.videoPopup.show = true;
				this.videoPopup.url = this.getSource(item);
			},
			videoAutoplayFn(index){
				let { list, current, videoAutoplay } = this;
				if (index === current && videoAutoplay) {
					return true;
				} else {
					return false;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../libs/css/style.components.scss";

	.u-swiper {
		@include vue-flex;
		justify-content: center;
		align-items: center;
		position: relative;
		overflow: hidden;

		&__wrapper {
			flex: 1;

			&__item {
				flex: 1;

				&__wrapper {
					@include vue-flex;
					position: relative;
					overflow: hidden;
					transition: transform 0.3s;
					flex: 1;

					&__image {
						flex: 1;
					}

					&__video {
						flex: 1;
					}

					&__title {
						position: absolute;
						background-color: rgba(0, 0, 0, 0.3);
						bottom: 0;
						left: 0;
						right: 0;
						font-size: 28rpx;
						padding: 12rpx 24rpx;
						color: #FFFFFF;
						flex: 1;
					}
				}
			}
		}

		&__indicator {
			position: absolute;
			bottom: 10px;
		}

		.play-btn{
			position: absolute;
			width: 100rpx;
			height: 100rpx;
			top:calc(50% - 50rpx);
			left:calc(50% - 50rpx);
			display: block;
			z-index: 99;
		}
	}
</style>
