<template>
    <el-dialog
        :modal="false"
        :before-close="close"
        :visible="value"
        custom-class="hide-header show-close padding-0 width-auto"
    >
        <div class="d-flex flex-column">
            <div class="preview-title text-center">图片预览</div>

            <div class="d-flex justify-content-center" style="min-width: 300px">
                <img v-if="file" :src="file.url" :style="style" />
            </div>

            <div class="d-flex justify-content-center actions">
                <span
                    class="d-flex align-items-center justify-content-center"
                    @click="set2Default"
                    >1:1</span
                >
                <a
                    class="d-flex align-items-center justify-content-center"
                    :href="file.url"
                    :download="getAttachment"
                >
                    <i class="el-icon-download"></i>
                </a>
            </div>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Model, Prop, Vue } from "vue-property-decorator";

@Component({ components: {} })
export default class ImagePreview extends Vue {
    @Model("update")
    private value!: boolean;

    @Prop()
    private file!: { name: string; url: string };

    private style: {
        "max-height": number | string;
        "max-width": number | string;
    } = {
        "max-height": "300px",
        "max-width": "600px",
    };

    private close() {
        setTimeout(
            () =>
                (this.style = { "max-height": "300px", "max-width": "600px" }),
            300
        );
        this.$emit("update", false);
    }

    private set2Default() {
        this.style = { "max-height": "1600px", "max-width": "1600px" };
    }

    private get getAttachment() {
        if (this.file) {
            return this.file.name;
        }
        return "文件下载";
    }
}
</script>

<style lang="less" scoped>
.preview-title {
    font-size: 18px;
    color: #333;
    margin-bottom: 15px;
}

.actions {
    margin: 15px 0;

    > span,
    a {
        width: 30px;
        height: 30px;
        background-color: #7a7b7d;
        color: #fff;
        border-radius: 50%;
        cursor: pointer;

        i {
            color: #fff;
            font-size: 20px;
        }

        & + span {
            margin-left: 15px;
        }
    }

    > a {
        margin-left: 15px;
    }
}
</style>