<template>
    <ul :class="[prefixCls + '-list']">
        <li
            v-for="(file, index) in files"
            :key="index"
            :class="fileCls(file)"
            @click="handleClick(file)">
            <div :class="prefixCls + '-list-file-item'">
                <YYFileLogo @click.native="handlePreview(file)" :type="format(file)"></YYFileLogo> 
                <span :class="prefixCls + '-list-file-name'">{{ file.name }}</span>
                <Icon
                    type="xiazai"
                    :class="[prefixCls + '-list-download']"
                    v-show="file.status === 'finished'"
                    v-if="showDownload"
                    @click.native="handleDownload(file)"></Icon>
                <Icon
                    type="close"
                    :class="[prefixCls + '-list-remove']"
                    v-show="file.status === 'finished'"
                    @click.native="handleRemove(file)"></Icon>
            </div>
            <transition name="fade">
                <Progress
                    v-if="file.showProgress"
                    :stroke-width="2"
                    :percent="parsePercentage(file.percentage)"
                    :status="file.status === 'finished' && file.showProgress ? 'success' : 'normal'"/>
            </transition>
        </li>
    </ul>
</template>
<script>
    import Icon from '../icon/'
    import YYFileLogo from '../file-logo/'
    import Progress from '../progress/'
    const prefixCls = 'yy-upload'

    export default {
        name: 'YYUploadList',
        components: { Icon, Progress, YYFileLogo },
        props: {
            files: {
                type: Array,
                default() {
                    return []
                }
            },
            showDownload: {
                type: Boolean,
                default: false
            }
        },
        data () {
            return {
                prefixCls: prefixCls
            }
        },
        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)
            },
            handleDownload (file) {
                this.$emit('on-file-download', file)
            },
            format (file) {
                const format = file.name.split('.').pop().toLocaleLowerCase() || ''
                // console.log(file.name, format)
                // let type = 'document'

                // if (['gif','jpg','jpeg','png','bmp','webp'].indexOf(format) > -1) {
                //     type = '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 = 'document-text'
                // }
                // if (['numbers','csv','xls','xlsx'].indexOf(format) > -1) {
                //     type = 'stats-bars'
                // }
                // if (['keynote','ppt','pptx'].indexOf(format) > -1) {
                //     type = 'ios-videocam'
                // }

                // console.log('type', type) 
                return format
            },
            parsePercentage (val) {
                return parseInt(val, 10)
            }
        }
    }
</script>