<template>
  <div class="ws-download">
      <div class="ws-download-item" v-for="(file, idx) in files" :key="idx" @click="onDownloadClick(file)">
        <img :src="getFileImg(file)">
        <p :title="getFilename(file)">{{getFilename(file)}}</p>
      </div>
  </div>
</template>

<script>
import downloadUtil from './download';

const PREVIEW_IMGS = {
    pic: require('../../assets/images/common/upload/pic.png'),
    doc: require('../../assets/images/common/upload/doc.png'),
    docx: require('../../assets/images/common/upload/docx.png'),
    eml: require('../../assets/images/common/upload/eml.png'),
    pdf: require('../../assets/images/common/upload/pdf.png'),
    rar: require('../../assets/images/common/upload/rar.png'),
    xls: require('../../assets/images/common/upload/xls.png'),
    xlsx: require('../../assets/images/common/upload/xlsx.png'),
    zip: require('../../assets/images/common/upload/zip.png'),
}

export default {
    name: 'WsDownload',
    props: {
        files: { // [{url: '', name: ''}]
            type: Array,
            default: function(){
                return []
            }
        }
    },
    methods: {
        async onDownloadClick(file){
            file.downloading = true;
            await downloadUtil(file.url, this.getFilename(file));
            delete file.downloading;
        },

        getFilename(file){
            var filename = file.name;
            if(!filename){
                filename = this.url2Filename(file.url);
            }
            return filename;
        },

        url2Filename(url){
            var idx = url.lastIndexOf('/');
            if(idx >= 0){
                if(idx != url.length - 1){
                    url = url.substr(idx + 1);
                }
            }
            return url;
        },

        getFileImg(file){
            var url = file.url;
            var fileType = url.substr(url.lastIndexOf('.') + 1);

            var imgDefs = ['png', 'gif', 'jpg', 'jpeg', 'webp'];
            if(imgDefs.indexOf(fileType) >= 0){
                return PREVIEW_IMGS['pic'];
            }

            var img = PREVIEW_IMGS[fileType];
            if(!img){
                img = PREVIEW_IMGS['zip'];
            }
            return img;
        }
    }
}
</script>

<style lang="scss" scoped>
$item-width: 80px;

.ws-download{
    display: grid;
    grid-template-columns: repeat(auto-fill, $item-width);
    grid-row-gap: 14px;
    grid-column-gap: 10px;

    .ws-download-item{
        width: $item-width;
        text-align: center;
        cursor: pointer;

        &:hover p{
            color: #2d7dfc;
        }

        img{
            width: 66px;
            height: 66px;
            display: block;
            margin: auto;
        }
        p{
            font-size: 12px;
            color: #333;
            margin-top: 10px;
            margin-bottom: 0px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            // display: -webkit-box;
            // -webkit-line-clamp: 2;
            // -webkit-box-orient: vertical;
        }
    }
}
</style>
