<!-- eslint-disable vue/no-unused-vars -->
<template>
  <ul
    :class="[
      'el-upload-list',
      'el-upload-list--' + listType,
      { 'is-disabled': disabled },
      { 'is-readable': readable }
    ]"
    name="el-list"
    v-if="files.length > 0"
  >
    <li
      v-for="(file , fileIndex) in files"
      :class="['el-upload-list__item', 'is-' + file.status, focusing ? 'focusing' : '']"
      :key="file.uid"
      tabindex="0"
      @keydown.delete="remove(file)"
      @focus="focusing = true"
      @blur="focusing = false"
      @click="focusing = false"
    >
      <slot :file="file">
        <div class="el-upload-list__item-name" @click="handleClick(file)" :style="{color:file.status==='fail'?'rgb(var(--danger-5)) ':'rgb(var(--color-text-1))'}">
          <img
            class="el-upload-list__item-thumbnail"
            v-if="isImg"
            :src="file.url" alt=""
          >
          <slot name="icon" :file="file">
            <el-svg :icon-class="getFIleIcon(file.name)" :size="'var(--font-size-title-1)'" color="rgb(var(--primary-5))" class="el-upload-list__item-svg" v-if="!isImg"></el-svg>
          </slot>
          <div class="el-upload-list__item-text">
            <span class="el-upload-list__item-text-label" :class="{'el-upload-list__item-text-fail': file.status === 'fail'}">
              <el-tooltip :content="file.name" overflow placement="top">
                <span class="el-upload-list__item-text-label-name">
                  {{file.name}}
                </span>
              </el-tooltip>
              <el-tooltip content="文件上传失败" v-if="file.status === 'fail'">
                <!-- <span class="error-tooltip"> -->
                  <i class="el-icon-warning error-tooltip"></i>
                <!-- </span> -->
              </el-tooltip>
            </span>
          </div>
          <!-- 自动上传时才展示icon信息 -->
          <label class="el-upload-list__item-status-label" v-if="autoUpload">
            <i v-if="file.status === 'success'" :class="{
              'el-icon-success': true,
              'el-icon-circle-check': listType !== 'picture-card'
            }"></i>
            <a href="javascript:;" v-else-if="file.status === 'fail'" @click="retryUpload(file)">点击重试 </a>
            <!-- <UploadLoading v-else :width="16" :perNum="parsePercentage(file.percentage)"/> -->
            <UploadLoading v-else :width="16" :percentage="parsePercentage(file.percentage)"/>
          </label>
        </div>
        <i class="el-icon-delete icon-remove" v-if="!disabled || uploader.delCallback" @click="remove(file)"></i> 
      </slot>
    </li>
  </ul>
</template>
<script>
  import ElSvg from "modesign-ui/packages/svg";
  import ElTooltip from 'modesign-ui/packages/tooltip';
  import Locale from 'modesign-ui/src/mixins/locale';
  import UploadLoading from './upload-loading.vue'
  export default {

    name: 'ElUploadList',

    mixins: [Locale],

    data() {
      return {
        focusing: false,
        loadingPer:0,
        isError:[],
      };
    },
    components: { UploadLoading, ElSvg, ElTooltip },

    props: {
      files: {
        type: Array,
        default() {
          return [];
        }
      },
      disabled: {
        type: Boolean,
        default: false
      },
      readable: {
        type: Boolean,
        default: false
      },
      handlePreview: Function,
      listType: String,
      autoUpload: Boolean
    },
    computed: {
      isImg() {
        return ['picture-card', 'picture'].indexOf(this.listType) > -1
      }
    },
    mounted() {
      const timer = setInterval(() => {
        if(this.loadingPer >= 100) {
          this.loadingPer = 100;
          clearInterval(timer)
        } else {
          this.loadingPer += 5
        }
      }, 200)
    },
    inject: ['uploader'],
    methods: {
      remove(file) {
        if (this.disabled && !this.uploader.delCallback) return
        this.$emit('remove', file)
      },
      retryUpload(file) {
        this.uploader.$emit('retryUpload', file)
      },
      parsePercentage(val) {
        return parseInt(val, 10); 
      },
      handleClick(file) {
        this.handlePreview && this.handlePreview(file);
      },
      getFIleIcon(fileName) {
        const ext = fileName.split('.')[1]
        const imageExt = ['jpg', 'svg', 'png', 'jpeg', 'gif'];
        const videoExt = ['mp4', 'wmv', 'rm', 'rmvb', 'm4v', 'avi', 'dat', 'mov']
        if(imageExt.includes((ext || '').toLocaleLowerCase())) {
          return 'upload-image'
        } else if(videoExt.includes((ext || '').toLocaleLowerCase())) {
          return 'upload-video'
        } else {
          return 'upload-file'
        }
      }
    }
  };
</script>
