<template>
    <div
        class="image-message"
        :class="{ 'image-404': fileFailed2Load }"
        @dblclick="dbClick"
        @click="open"
    >
        <img
            v-if="messageRealUrl"
            :src="messageRealUrl"
            :title="messageBody.msg.name"
            :alt="messageBody.msg.name"
            @error="onImageError"
        />
        <file-icon v-else-if="fileFailed2Load" :value="image404"></file-icon>
    </div>
</template>

<script lang="ts">
    import { Component } from "vue-property-decorator";
    import { FileType } from "./file-controller";
    import BaseMessage from "./index";
    import FileIcon from "./file-icon.vue";
    import { UserAgentHelper } from "@/customer-service/third-party/user-agent";

    @Component({ components: { FileIcon } })
    export default class Index extends BaseMessage {
        private readonly image404 = FileType.Image_404;

        private readonly mobile = UserAgentHelper.isMobile(
            window.navigator.userAgent
        );

        private onImageError() {
            this.fileFailed2Load = true;
            this.messageRealUrl = "";
        }

        mounted() {
            this.buildMessageUrl();
        }

        private dbClick() {
            !this.mobile && this.openFile();
        }

        private open() {
            this.mobile && this.openFile();
        }
    }
</script>

<style lang="less" scoped>
    .image-message {
        line-height: 1;
        max-width: 300px;
        box-sizing: content-box;
        background-color: unset;

        img {
            width: 100%;
        }
        &.image-404 {
            background: #f7f8fa;
            display: flex;
            align-items: center;
            justify-content: center;

            .file-icon {
                margin: 0;
            }
        }

        /deep/ .file-icon {
            margin-left: 0;
        }
    }
</style>