<template>
    <div class='m-image-preview' v-show='show'>
        <van-image-preview
            :show-index='false'
            class='img-preview'
            v-model='show'
            :images='imgList'
            :show-indicators='true'
            :closeable='true'
            close-icon='cross'
            close-icon-position='top-left'
            :max-zoom='20'
            :min-zoom='1/20'
            @close='close'
            @change='onChange'
        ></van-image-preview>
        <div class='direction' @click='changeOri'>
            <!-- <i class='iconfont wanda-hengshuping'></i> -->
            <img src='../assets/images/screen.png' />
        </div>
    </div>
</template> 
<script>
/**
 * @description 图片预览组件
 * @param { Boolean } visible 显隐图片预览组件
 * @param { Array } imgList 显示的图片数组  ['https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-2.jpg']
 * @eg 示例:
 * 模板中:
 * <ImagePreview :key='imgKey' class='update-img-preview' :visible.sync='showImgPreview' :imgList='imgList' />
 * js中
 * import ImagePreview from '../../components/ImagePreview'
    components: { ImagePreview },

    // 点击按钮时,显示预览组件,设置图片数组
    showPhoto() {
        this.imgKey = `img${new Date().getTime()}` //重新渲染组件,解决 横竖屏切换时,图片宽度错乱的问题
        this.imgList = ['https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-2.jpg']
        this.showImgPreview = true
    },
 */
import Vue from 'vue'
import { ImagePreview } from 'vant'
Vue.use(ImagePreview)
export default {
    name: 'ImagePreview',
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        imgList: {
            type: Array,
            default: () => {
                return []
            },
        },
    },
    watch: {
        visible(val) {
            this.show = val
        },
    },
    data() {
        return {
            currentIndex: 1,
            direction: '竖屏',
            show: false,
        }
    },
    components: {},
    created() {},
    beforeMount() {},
    mounted() {},
    methods: {
        onChange(index) {
            this.currentIndex = index + 1
        },
        changeOri() {
            if (this.direction === '竖屏') {
                this.roateX()
                this.direction = '横屏'
            } else if (this.direction === '横屏') {
                this.roateY()
                this.direction = '竖屏'
            }
        },
        roateX() {
            console.log('横屏')
            window.webkit &&
                webkit.messageHandlers.cordova_iab.postMessage(
                    JSON.stringify({
                        method: 'roateX',
                    })
                )
        },

        // 竖屏
        roateY() {
            console.log('竖屏')
            window.webkit &&
                webkit.messageHandlers.cordova_iab.postMessage(
                    JSON.stringify({
                        method: 'roateY',
                    })
                )
        },
        close() {
            this.roateY()
            this.$emit('update:visible', false)
        },
    },
}
</script>
<style lang='less' scoped>
.m-image-preview {
    .direction {
        display: inline-block;
        position: fixed;
        z-index: 3000;
        // height: 30px;
        // line-height: 30px;
        // width: 80px;
        // bottom: 50px;
        bottom: 30px;
        right: 30px;
        text-align: center;
        width: 40px;
        height: 40px;
        justify-content: center;
        align-items: center;
        opacity: 1;
        i {
            width: 100%;
            height: 100%;
            display: inline-block;
            color: #fff;
            font-size: 40px;
        }
    }
}
// 竖屏
@media screen and (orientation: portrait) {
    /deep/ .van-swipe-item {
        // width: 375px !important;
    }
}
// 横屏
@media screen and (orientation: landscape) {
    .m-image-preview .direction {
        color: #fff !important;
        bottom: 30px;
        right: 30px;
        i {
            color: #000 !important;
            font-size: 30px;
        }
    }
}
</style>