
<template>
    <view class="evalList">
        <image v-if="current.type==1" mode="aspectFill" :src="current.url" 
        @click="previewImage(current.url)"/>
        <!--@fullscreenchange="onFullscreenChange" controls-->
        <video v-else :id="`myVideoDetail_${index}_${childIndex}`"
        :src="current.url" 
        :poster="current.ur" 
        :show-fullscreen-btn="false"
        @fullscreenchange='onFullscreenChange'
        ></video>
        <text v-if="current.type==2" @click="toggleFullScreen">{{ isFullScreen ? '退出全屏' : '全屏播放' }}</text>
</view>
</template>

<script>
export default {
    props:['item','current','index','childIndex'],
    data() {
        return {
            allImageSrc: [],
            isFullScreen: false,
            videoContext: null,
        }
    },
    watch: {
        item: {
            handler(val, oldval) {
                this.videoContext = uni.createVideoContext(`myVideoDetail_${this.index}_${this.childIndex}`)
                // console.log(`myVideoDetail_${this.index}_${this.childIndex}`,'--------')
                for (let i = 0; i < val.images.length; i++) {
                    if(val.images[i].type==1){
                       this.allImageSrc.push(val.images[i].url) 
                    }
                }
            },
            deep: true,
            immediate: true
        },
    },
    methods: {
        toggleFullScreen() {
            console.log('this.isFullScreen---',this.isFullScreen)
            if (this.isFullScreen) {
                this.exitFullScreen();
            } else {
                this.enterFullScreen();
            }
        },
        enterFullScreen() {
            console.log(this.videoContext,'进入全屏')
            this.videoContext.requestFullScreen({
                direction: 0 // 横屏方向（可选 0/90/180/270）
            });
            this.isFullScreen = true
        },
        exitFullScreen() {
            this.videoContext.exitFullScreen();
            this.isFullScreen  = false;
        },
        onFullscreenChange(e) {
            this.isFullScreen = e.detail.fullScreen;
        },
        openPicture() {
            let imgObj = [];
            let msg = "&Evaluation=1"
            uni.navigateTo({
                url: `/pages/hotel/picture?imgObj=${encodeURIComponent(imgObj)}${msg}`,
            });
        },
        previewImage(src) {
            uni.previewImage({
                urls: this.allImageSrc,
                current: src,
                longPressActions: {
                    itemList: ["发送给朋友", "保存图片", "收藏"],
                    success: function(data) {
                        
                    },
                    fail: function(err) {
                        console.log(err.errMsg);
                    },
                },
            });
        },
    }
}
</script>
<style>
	.evalList{
        height: 190rpx;
        width: 190rpx;
        overflow: hidden;
        border-radius: 14rpx;
        background: #eee;
        position: relative;
    }
    .evalList image,.evalList video{
        width: 100%;
        height: 100%;
    }
    .evalList text{
        right: 0;
        top: 0;
        position: absolute;
        z-index: 2;
        background: #fff;
        padding: 10rpx;
        display: none;
    }
</style>