** ----------------------  **/
/**  author : Louie Butch   **/
/**     2019/7/9 10:39     **/
/** email:844089357@qq.com  **/
/** ______________________  **/

<template>
    <div style="padding: 5px 0">
        <div class="file-list-item">
            <div class="left-box">
                <div class="svg-box" v-if="!isImg">
                    <hdIcon custom-class="bigger-svg" :icon-name="setIconName()"></hdIcon>
                </div>
                <div class="img-box" v-else>
                    <img :src="itemData.url" alt="">
                </div>
                <el-tooltip :content="itemData.name" :manual="true" :enterable="false" v-model="isShowTooltip">
                    <div class="title-box"  ref="docTitle" @mouseenter="showTooltip" @mouseleave="isShowTooltip = false">
                        <span>{{docName}}</span>
                    </div>
                </el-tooltip>
                <div class="type-box">
                    <span>{{getFileType()}}</span>
                </div>
                <div class="size-box">
                    <span>({{getFileSize()}})</span>
                </div>

            </div>
            <div class="icon-btn-box" v-if="itemData.response && itemData.response.code === 0">
                <i class="el-icon-check" style="font-size: 16px;color: #409EFF"></i>
            </div>
            <div class="icon-btn-box" v-else style="cursor: pointer" @click="abort">
                <i class="el-icon-close" style="font-size: 16px;color: #666666"></i>
            </div>
            <div class="progress-box" v-show="itemData.percentage && itemData.percentage < 100">
                <el-progress :percentage="itemData.percentage" :stroke-width="4" :show-text="false"></el-progress>
            </div>
        </div>
    </div>

</template>
<script>
    import Tool from '../../../assets/js/tool';
    import hdIcon from "../../hdIcon/src/hdIcon";
    export default {
        name: "file-list-item",
        components:{
            hdIcon
        },
        props:{
            itemData:{
                type:Object,
                default:() => {}
            }
        },
        data() {
            return {
                isShowTooltip:false,
            }
        },
        computed:{
            isImg(){
                let reg = /.(gif|jpg|jpeg|png)$/;
                return reg.test(this.getFileType());
            },
            docName(){
                return this.itemData.name.substring(0,this.itemData.name.length - 5);
            }
        },
        methods:{
            getFileType(){
                return Tool.getFileType(this.itemData.name);
            },
            setIconName(){
                return Tool.setFileSvgName(this.getFileType());
            },
            getFileSize(){
                return Tool.changeFileSize(this.itemData.size);
            },
            showTooltip(event){
                //如果超长 则显示tooltip 否则不显示
                let elementObj = this.$refs.docTitle;
                this.isShowTooltip = elementObj.scrollWidth > elementObj.offsetWidth;
            },
            abort(){
                this.$emit("cancelUpload",this.itemData);
            }

        }
    }
</script>

<style scoped>
    .file-list-item{
        background-color: #f2f2f2;
        margin: 0 auto;
        width: 428px;
        padding: 8px 10px;
        color: #666666;
        font-size: 14px;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .left-box{
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .svg-box, .img-box{
        width: 24px;
        height: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 10px;
    }
    .img-box{
        border-radius: 4px;
        overflow: hidden;
    }
    .title-box{
        max-width: 254px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .size-box{
        color: #999999;
        margin: 0 10px;
    }
    .img-box img{
        width: 100%;
        height: auto;
    }
    .icon-btn-box{
        width: 16px;
        height: 16px;
        text-align: center;
        line-height: 16px;
    }
    .progress-box{
        position: absolute;
        bottom: 5px;
        left: 0;
        width: 100%;
        height: 4px;
    }
</style>