<template>
    <view class="page">
        <!-- 预览图片 -->
        <swiper class="swiper" style="width:100%;height:calc(100vh - 44px);margin:0 auto;" v-if="fileType === '1'">
            <swiper-item v-for="(item, index) in imageList" :key="'key' + index">
                <image :src="item" style="width:100%;height:100%;" mode="aspectFit"></image>
            </swiper-item>
        </swiper>
        <!-- 预览文件 -->
        <web-view :webview-styles="webviewStyles" :src="src" v-if="fileType === '2'"></web-view>
        <!-- 预览视频 -->
        <view class="video-detail-page" v-if="fileType === '3'">
            <view class="video-box">
                <!-- :controls="false" -->
                <video :src="fileUrl"  muted :autoplay="true" @canplay="handleCanPlay"></video>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'ss-preview',
    props: {
        fileUrl: {
            type: String,
            default: ''
        },
        fileType: {
            type: String,
            default: '', //1.预览图片，2.预览文件，3.预览视频
        },
        imageList: {//预览图片，可以预览多张
            type: Array,
            default: () => {
                return []
            }
        },
    },
    data() {
        return {
            webviewStyles: {
                progress: {
                    color: '#FF3333'
                }
            },
            src: '',
        };
    },
    methods: {
        handleCanPlay() {
            this.$refs.videoPlayer.play();
        },
        //APP，H5预览文档图片和视频，微信小程序预览图片和视频
        previewPdf(value) {
            this.src = `/uni_modules/ss-preview/hybrid/html/pdf-reader/index.html?file=${encodeURIComponent(value)}`;
            //此处路径为项目根路径，如果是uni-modules处于src下方，则地址应该为下方地址，否则会读取失败
            // this.src = `/src/uni_modules/ss-preview/hybrid/html/pdf-reader/index.html?file=${encodeURIComponent(value)}`;	
        },
    },
    watch: {
        fileType: {
            deep: true,
            immediate: true,
            handler: function (value) {
                if (value === '2') {//预览文档
                    //#ifdef APP-PLUS || H5
                    this.previewPdf(this.fileUrl)
                    //#endif
                }
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.page {
    height: 100%;

    .video-detail-page {
        width: 100%;

        uni-video {
            width: 100%;
        }

        video {
            width: 100%;
        }
    }

    /deep/ .video-box{
        video::-webkit-media-progress {
            display: none;
        }

        video::-webkit-media-controls-enclosure {
            pointer-events: none;
        }
    }


}
</style>
