<template>
    <span class="file-icon" :title="value" v-html="html"></span>
</template>

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

import { FileType, getSvg } from "./file-controller";

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

    private get audio() {
        return this.value === FileType.Audio;
    }

    private get excel() {
        return this.value === FileType.Excel;
    }

    private get image() {
        return this.value === FileType.Image;
    }

    private get others() {
        return this.value === FileType.Others;
    }

    private get pdf() {
        return this.value === FileType.Pdf;
    }

    private get ppt() {
        return this.value === FileType.Ppt;
    }

    private get rp() {
        return this.value === FileType.Rp;
    }

    private get txt() {
        return this.value === FileType.Txt;
    }

    private get video() {
        return this.value === FileType.Video;
    }

    private get word() {
        return this.value === FileType.Word;
    }

    private get xmid() {
        return this.value === FileType.Xmind;
    }

    private get zip() {
        return this.value === FileType.Zip;
    }

    private get html() {
        return getSvg(this.value);
    }
}
</script>

<style lang="less" scoped>
.file-icon {
    margin-left: 10px;

    /deep/ svg {
        max-width: 36px;
        max-height: 36px;
    }
}
</style>