<!-- eslint-disable vue/no-unused-vars -->
<template>
  <div class="el-upload-picture__item" :key="file.uid" tabindex="0"
    @keydown.delete="remove(file)" @mouseenter="focusing = true" @mouseleave="focusing = false">
    <slot :file="file">
      <div class="el-upload-picture__item-wrap" @click.stop="edit(file)">
        <img class="el-upload-picture__item-thumbnail" :src="file.url" alt="" />
        <div class="el-upload-picture__item-modal" :class="{'modal-uploading': file.status === 'uploading'}"  v-if="file.status !== 'success' || focusing">
          <span class="retry" v-if="file.status === 'fail'" @click="retryUpload($event, file)">点击重试 </span>
          <UploadLoading v-else-if="file.status !== 'success'" :width="16" :percentage="parsePercentage(file.percentage)"/>
          <div v-else class="btn-list">
            <i class="el-icon-editor" @click.stop="edit(file)"></i>
            <i class="el-icon-delete" @click.stop="remove(file)"></i>
          </div>
          <el-tooltip content="文件上传失败" v-if="file.status === 'fail'">
            <i class="el-icon-warning error-tooltip modal-tooltip"></i>
          </el-tooltip>
        </div>
      </div>
    </slot>
  </div>
</template>
<script>
import ElTooltip from 'modesign-ui/packages/tooltip';
import Locale from 'modesign-ui/src/mixins/locale';
import UploadLoading from './upload-loading.vue'
export default {

  name: 'ElUploadCard',

  mixins: [Locale],

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

  props: {
    file: {},
    disabled: {
      type: Boolean,
      default: false
    },
    readable: {
      type: Boolean,
      default: false
    },
    handlePreview: Function,
    listType: String
  },
  inject: ['uploader'],
  methods: {
    remove(file) {
      if ((this.disabled || this.readable) && !this.uploader.delCallback) return
      this.$emit('remove', file)
    },
    edit(file) {
      if ((this.disabled || this.readable) && !this.uploader.editCallback) return
      if (this.uploader.editCallback && typeof this.uploader.editCallback === 'function') {
        this.uploader.editCallback()
        return
      }
      this.handleClick(file)
    },
    retryUpload(e, file) {
      e.stopPropagation();
      this.uploader.$emit('retryUpload', file)
    },
    parsePercentage(val) {
      return parseInt(val, 10);
    },
    handleClick(file) {
      if (this.handlePreview) {
        this.handlePreview(file);
      } else {
        // 保证modal会消失
        setTimeout(() => {
          this.focusing = false;
        }, 700)
        this.uploader.$emit('clickInput', file)
      }
    }
  }
};
</script>
