<template>
    <transition-group tag="ul"
                      :class="[
      `${prefix}-upload-list`,
      `${prefix}-upload-list--${listType}`,
      { 'is-disabled': disabled }
    ]"
                      :name="`${prefix}-list`">
        <li v-for="file in files"
            :key="file.uid"
            :class="[`${prefix}-upload-list__item`, 'is-' + file.status, focusing ? 'focusing' : '']"
            tabindex="0"
            :style="listItemStyle"
            @focus="focusing = true"
            @blur="focusing = false"
            @click="focusing = false">
            <slot :file="file">
                <div v-if="file.status !== 'running' && ['file', 'card'].indexOf(listType) > -1 && file.fileType === 'image'"
                     :class="`${prefix}-upload-list__item-thumbnail`"
                     :style="`background-image:url(${file.url})`"
                     alt=""></div>
                <div v-if="file.status !== 'running' && ['file', 'card'].indexOf(listType) > -1 && file.fileType === 'file'"
                     :class="`${prefix}-upload-list__item-thumbnail`">
                    <div :class="[`${prefix}-upload-list__item-icon`, `${file.icon}`]" />
                    <span :class="`${prefix}-upload-list__item-icon__name`">
                        <span>{{ file.newname && file.newname.front }}</span>
                        <span>{{ file.newname && file.newname.last }}.{{ file.newname && file.newname.suffix }}</span>
                    </span>
                </div>
                <span :class="`${prefix}-upload-list__item-name`">
                    <i :class="`${prefix}-icon-document`" />{{ file.name }}
                </span>
                <label v-if="['file', 'card'].indexOf(listType) > -1"
                       :class="`${prefix}-upload-list__item-status-label`"
                       @click="$emit('remove', file)">
                    <i :class="`${prefix}-icon-error-l`" />
                </label>
                <i v-if="!disabled"
                   :class="`${prefix}-icon-error-l`"
                   @click="$emit('remove', file)" />
                <jdd-progress v-if="file.status === 'running'"
                              size="small"
                              :type="'line'"
                              :status="file.status"
                              :stroke-width="2"
                              :value="parsePercentage(file.percentage)" />
                <span v-if="listType === 'card' && file.status !== 'running'"
                      :class="`${prefix}-upload-list__item-actions`">
                    <span v-if="handlePreview"
                          :class="`${prefix}-upload-list__item-preview`"
                          @click="handlePreview(file)">
                        <i :class="`${prefix}-icon-search`" />
                    </span>
                    <span v-if="!disabled"
                          :class="`${prefix}-upload-list__item-delete`"
                          @click="$emit('remove', file)">
                        <i :class="`${prefix}-icon-trash`" />
                    </span>
                </span>
            </slot>
        </li>
    </transition-group>
</template>

<script>
import { prefix, prefixMixins } from 'jdd-design/utils';
import JddProgress from 'jdd-design/components/progress';

export default {
    name: `${prefix}-upload-list`,
    components: { JddProgress },
    mixins: [prefixMixins],
    props: {
        width: Number,
        height: Number,
        files: {
            type: Array,
            default() {
                return [];
            }
        },
        disabled: {
            type: Boolean,
            default: false
        },
        handlePreview: Function,
        listType: String
    },
    data() {
        return {
            focusing: false
        };
    },
    computed: {
        listItemStyle() {
            return {
                width: `${this.width}px`,
                height: `${this.height}px`
            };
        }
    },
    methods: {
        parsePercentage(val) {
            return parseInt(val, 10);
        },
        handleClick(file) {
            this.handlePreview && this.handlePreview(file);
        }
    }
};
</script>
