<template>
    <ul :class="classes">
        <li
            v-for="file in files"
            :class="fileCls(file)"
            @click="handleClick(file)">
            <span @click="handlePreview(file)">
<!--                <ht-base-icon :type="format(file)" />-->
                <Icon :type="format(file)"></Icon>
                <span :class="horizontalList ? 'ht-base-upload-horizontal-file-name' : ''">{{ file.name }}</span>
            </span>
            <ht-base-icon
                    type='LiRa_cross'
                    :class="[htPrefixCls + '-list-remove']"
                    v-show="file.status === 'finished'"
                    @click.native="handleRemove(file)"/>
            <transition name="fade">
                <ht-base-progress
                    v-if="file.showProgress"
                    :stroke-width="2"
                    :percent="parsePercentage(file.percentage)"
                    :status="file.status === 'finished' && file.showProgress ? 'success' : 'normal'"></ht-base-progress>
            </transition>
        </li>
    </ul>
</template>
<script>
    const prefixCls = 'ivu-upload';
    const htPrefixCls = 'ht-base-upload';

    export default {
        name: 'HtBaseUploadList',
        props: {
            files: {
                type: Array,
                default() {
                    return [];
                }
            },
            horizontalList:{
                type: Boolean,
                default: false
            },
            verticalList:{
                type: Boolean,
                default: false
            }
        },
        data () {
            return {
                prefixCls: prefixCls,
                htPrefixCls: htPrefixCls,
            };
        },
        methods: {
            fileCls (file) {
                return [
                    `${prefixCls}-list-file`,
                    {
                        [`${prefixCls}-list-file-finish`]: file.status === 'finished'
                    }
                ];
            },
            handleClick (file) {
                this.$emit('on-file-click', file);
            },
            handlePreview (file) {
                this.$emit('on-file-preview', file);
            },
            handleRemove (file) {
                this.$emit('on-file-remove', file);
            },
            format (file) {
                const format = file.name.split('.').pop().toLocaleLowerCase() || '';
                let type = 'ios-document-outline';

                if (['gif','jpg','jpeg','png','bmp','webp'].indexOf(format) > -1) {
                    type = 'ios-image';
                }
                if (['mp4','m3u8','rmvb','avi','swf','3gp','mkv','flv'].indexOf(format) > -1) {
                    type = 'ios-film';
                }
                if (['mp3','wav','wma','ogg','aac','flac'].indexOf(format) > -1) {
                    type = 'ios-musical-notes';
                }
                if (['doc','txt','docx','pages','epub','pdf'].indexOf(format) > -1) {
                    type = 'md-document';
                }
                if (['numbers','csv','xls','xlsx'].indexOf(format) > -1) {
                    type = 'ios-stats';
                }
                if (['keynote','ppt','pptx'].indexOf(format) > -1) {
                    type = 'ios-videocam';
                }
               /* if (['doc','docx'].indexOf(format) > -1) {
                    type = 'LiRa_word';
                }
                if (['xls','xlsx'].indexOf(format) > -1) {
                    type = 'LiRa_xlsx';
                }
                if (['pdf'].indexOf(format) > -1) {
                    type = 'LiRa_pdf';
                }*/

                return type;
            },
            parsePercentage (val) {
                return parseInt(val, 10);
            }
        },
        computed:{
            classes () {
                return [
                    `${prefixCls}-list`,
                    {
                        [`${htPrefixCls}-horizontal-list`]: this.horizontalList,
                        [`${htPrefixCls}-vertical-list`]: this.verticalList,
                    }
                ]
            }
        }
    };
</script>