<template>
	<view class="">
    <cu-swiper indicator-pos="bottomRight" mode="number" height="750" border-radius="0" :list="urls">
      <template slot-scope="scope">
        <view class="w-full h-full relative"  @tap="previewImage(scope.index)">
          <block v-if="scope.data.type=='video'">
            <!-- #ifdef H5 || MP-WEIXIN -->
            <video id="myVideo" class="w-full h-full" :enable-progress-gesture="false" :controls="showControls"
							:autoplay="true" :show-progress="true" :show-fullscreen-btn="showControls" :src="scope.data.video"
							:show-center-play-btn="false" @error="videoErrorCallback" :show-play-btn="showControls"
              :poster="scope.data.image"
							@play="showPlay = false" @ended="playEnd" @fullscreenchange="fullscreenchange">
						</video>
						<image v-show="showPlay" @tap.stop="play" src="/static/images/icon_play.png" class="w-90rpx h-90rpx play-icon"></image>
            <!-- #endif -->
            <!-- #ifdef APP-PLUS -->
						<j-video :url="scope.data.video" height="750rpx" width="750rpx" :poster="scope.data.image"></j-video>
						<!-- #endif -->
          </block>
          <u-image v-else width="100%" height="100%" :src="scope.data.image"></u-image>
        </view>
      </template>
    </cu-swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentSwiper: 0,
				urls: [],
				showPlay: true,
				showControls: false,
				autoplay: true
			};
		},

		components: {
      videoUrl(){
        return this.list.find(e=>e.type=='video')?.video ?? ''
      }
    },
		props: {
      list:{
        type: Array,
				default: () => [],
      },
			circular: {
				type: Boolean,
				default: true,
			},
			interval: {
				type: Number,
				default: 3000,
			},
			duration: {
				type: Number,
				default: 500,
			}
		},
		watch: {
			list: {
				handler(val) {
          this.urls = val
          if(val.findIndex(e=>e.type=='video')>=0){
            this.autoplay = false
            this.$nextTick(() => {
              this.videoContext = uni.createVideoContext('myVideo', this)
            })
          }
				},
				immediate: true,
			},
		},
		methods: {
			swiperChange(e) {
				this.currentSwiper = e.detail.current
			},
			videoErrorCallback(err) {
				console.log('err==>', err)
			},
			playEnd() {
				this.showPlay = true;
			},
			previewImage(current) {

				let index = current
        const urls = this.urls.map(e=>Object.assign(e,{url:e.image}))

				// #ifdef MP-WEIXIN
				wx.previewMedia({
					current,
					sources: urls,
				});
				//#endif
				// #ifdef H5 || APP-PLUS
				if (this.videoUrl) {
					index = current - 1
				}
				if (urls[current].type == "video") {
					this.videoContext.requestFullScreen()
				} else {
					uni.previewImage({
						index,
						urls: this.list.filter(({type})=>type == 'image').map(({image})=>image)
					})
				}

				//#endif
			},
			play() {
				this.videoContext.play()
			},
			fullscreenchange(e) {
				const {
					fullScreen
				} = e.detail

				!fullScreen && this.videoContext.pause()
				this.showControls = fullScreen ? true : false
				this.showPlay = fullScreen ? false : true

			}

		}
	};
</script>
<style lang="scss" scoped>
.play-icon{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
</style>
