<template>
    <div class="imgContent">
        <template v-if="img">
            <div class="img">
                <div class="image" v-if="img" @click="choose" :style="imageStyle" ref="img"></div>
            </div>

            <el-dialog title="照片预览" :visible.sync="preView" width="30%">
                <img width="100%" :src="img" alt="">
            </el-dialog>
        </template>

    </div>

</template>

<script>
export default {
    name: 'imgItemLittle',
    props: {
        img: {
            type: String,
            default: {}
        }
    },
    data() {
        return {
            imageStyle: {
                backgroundColor: '#ebebeb'
            },
            preView: false
        }
    },
    computed: {
    },
    created() {
        this.getImg()
    },
    methods: {
        choose() {

            this.preView = true

        },
        getImg() {
            if (this.img) {
                var img = new Image()
                img.onload = () => {
                    var key = img.width / img.height
                    var height = 82
                    var width = img.width / img.height * 82
                    this.imageStyle = {
                        backgroundImage: `url(${this.img})`,
                        width: width + 'px',
                        height: height + 'px'
                    }
                }
                img.src = this.img
            }
        }
    }
}
</script>

<style lang="less" scoped>
.imgContent {
    vertical-align: middle;
    display: inline-block;
    margin: 16px 4px 0 0;
}

.image {
    display: inline-block;
    border-radius: 3px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin: auto;
    vertical-align: middle;
    cursor: pointer;
}
</style>
