<template>
    <div class='picDia'>
        <el-dialog :visible.sync='dialogVisible' width='90%' :close-on-click-modal='false' :show-close='false'>
            <!-- <img
                src='https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1592807833&di=5adf17cda9f46c37696da5b1d0aec9dc&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg'
                alt
            />-->
            <rotation :size='sizePic' :key='key' :type='3' v-if='rotationImg.length>0' :rotationImg='rotationImg' style='height:100%;width:100%'></rotation>
            <span class='close' @click='close'>X</span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogVisible: false,
            mode: 'top',
            rotationImg: [],
            key: 1,
            sizePic: '',
            imgInfo: {}
        }
    },
    methods: {
        showModal(params) {
            this.key++
            this.dialogVisible = true
            this.rotationImg = params
            if (this.rotationImg.length > 0) {
                let img = new Image()
                img.src = this.rotationImg[0].url
                const vm = this
                img.onload = function() {
                    vm.$set(vm.imgInfo, 'width', img.width)
                    vm.$set(vm.imgInfo, 'height', img.height)
                    if (vm.imgInfo.width > vm.imgInfo.height) {
                        vm.sizePic = 'width'
                    } else {
                        vm.sizePic = 'height'
                    }
                    console.log(vm.sizePic)
                }
            }
        },
        close() {
            this.dialogVisible = false
        }
    }
}
</script>

<style lang="less" scoped>
.picDia {
    img {
        width: 100%;
        height: 100%;
    }
}
.close {
    display: block;
    position: absolute;
    right: -40px;
    font-size: 20px;
    color: #fff;
    top: -30px;
    z-index: 10;
    cursor: pointer;
}
</style>
<style lang='less'>
.picDia {
    .el-dialog {
        height: 88%;
        margin-top: 5vh !important;
        position: relative;
        .el-dialog__header {
            padding: 0;
        }
        .el-dialog__body {
            padding: 0;
            height: 100%;
        }
    }
}
</style>