<template>
    <div class="engin-image-item">       
        <div class="div-img">
            <span class="sp-border sp-1"></span>
            <span class="sp-border sp-2"></span>
            <span class="sp-border sp-3"></span>
            <span class="sp-border sp-4"></span>          
            <el-image  :preview-src-list="[info.imageFile + '.1000.jpg']" :src="info.imageFile + '.1000.jpg'">
            </el-image>
        </div>
        <div class="div-desc">
            <el-popover placement="bottom"  trigger="hover" popper-class="engin-image-item-pop">                
                <div>
                    {{ info.standardDesc }}
                </div>
                <div class="div-title" slot="reference" style="cursor: pointer;">{{ info.standardDesc }}</div>
            </el-popover>
        </div>
    </div>
</template>

<script>


export default {
    props: {
        info: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
    
        };
    },

    mounted() {

    },
    computed: {
        
    },
    methods: {        
        
    },
};
</script>

<style lang="less" scoped>
.engin-image-item {
    height: calc(100% - 36px);
    margin-left: 5px;
    width: calc(100% - 10px);
    margin-top: 10px;
    text-align: center;

   

    .div-img {
        height: calc(100% - 40px);
        position: relative;
        display: inline-block;
        border: solid 1px #004D7C;

        .sp-border {
            position: absolute;
            display: inline-block;
            width: 30px;
            height: 30px;
            z-index: 1;

            &.sp-1 {
                top: -1px;
                left: -1px;
                border-left: solid 1px #62F6F8;
                border-top: solid 1px #62F6F8;
            }

            &.sp-2 {
                top: -1px;
                right: -1px;
                border-right: solid 1px #62F6F8;
                border-top: solid 1px #62F6F8;
            }

            &.sp-3 {
                bottom: -1px;
                right: -1px;
                border-right: solid 1px #62F6F8;
                border-bottom: solid 1px #62F6F8;
            }

            &.sp-4 {
                bottom: -1px;
                left: -1px;
                border-left: solid 1px #62F6F8;
                border-bottom: solid 1px #62F6F8;
            }
        }
    }

    /deep/ .el-image {
        height: 100%;
    }

    .div-desc {
        margin-top: 4px;

        &>span {
            display: flex;

            /deep/ .el-popover__reference-wrapper {
                display: flex;
                width: 100%;
                justify-content: center;

                .div-title {
                    max-width: 80%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
        }

    }

}
.engin-image-item-pop{
    max-width: 400px;
    min-width: auto;
}
</style>