<template>
  <draggable
    v-model="dataVal"
    class="file-list__wrap"
    :class="[fromType === 'mobileFile' ? 'mobile-file-list' : 'pc-file-list']"
    tag="ul"
    v-bind="dragOptions"
    handle=".handle"
    @start="isDragging = true"
    @end="isDragging = false"
  >
    <transition-group type="transition" name="flip-list">
      <li
        v-for="file in dataVal"
        :key="getFileKey(file)"
        :class="[
          'file-item',
          'el-upload-list__item',
          {
            'is-success': file.status == 'success',
            'is-uploading': file.status == 'uploading',
          },
        ]"
      >
        <template v-if="fromType === 'mobileFile'">
          <div
            class="file-icon"
            :class="
              getIconClass(
                file.name || (file.response && file.response.fileName)
              )
            "
            @click="$emit('preview', file)"
          ></div>
          <div class="file-content">
            <div
              class="file__name"
              :class="{ 'done-subject': previewable }"
              :title="file.name"
              @click="$emit('preview', file)"
            >
              {{ file.name || (file.response && file.response.fileName) }}
            </div>
            <el-progress
              v-if="file.status == 'uploading'"
              class="el-progress--line"
              :stroke-width="6"
              :percentage="Math.floor(file.percentage)"
            />
            <div v-else class="file-size">
              {{
                filterSize(file.size || (file.response && file.response.size))
              }}
            </div>
          </div>
          <div class="file-btns">
            <i
              v-if="downloadable && file.status == 'success'"
              class="download-icon"
              @click="$emit('download', file)"
            ></i>
            <i
              v-if="inputWriteable"
              class="el-icon-close"
              @click="$emit('remove', file)"
            ></i>
          </div>
          <!-- <el-progress
            v-if="file.status == 'uploading'"
            class="el-progress--line"
            :stroke-width="4"
            :percentage="Math.floor(file.percentage)"
          /> -->
        </template>
        <template v-else>
          <div class="file_left hover-follow-theme-color">
            <ht-icon
              v-if="sortable && inputWriteable && file.status == 'success'"
              name="sort"
              class="handle"
            />
            <!-- <ht-icon name="file" class="file_icon" /> -->
            <i
              v-if="file.status == 'success'"
              class="pc-file-icon"
              :class="
                getIconClass(
                  file.name || (file.response && file.response.fileName)
                )
              "
            ></i>
            <i
              v-if="file.status == 'uploading'"
              style="color: #2a8bfd; margin-right: 5px"
              class="el-icon-loading"
            ></i>
            <p
              class="file__name hover-follow-theme-color"
              :class="{ 'done-subject': previewable }"
              :title="file.name"
              @click="$emit('preview', file)"
            >
              {{ file.name || (file.response && file.response.fileName) }}
            </p>
          </div>

          <el-progress
            v-if="file.status == 'uploading'"
            class="el-progress--line"
            :stroke-width="4"
            :percentage="Math.floor(file.percentage)"
          />
          <i
            v-if="downloadable && file.status == 'success'"
            class="el-icon-download hover-follow-theme-color"
            :title="t('ht.file.download')"
            @click="$emit('download', file)"
          ></i>
          <el-popconfirm
            v-if="inputWriteable && file.status == 'success'"
            title="确定要删除吗？"
            @confirm="$emit('remove', file)"
          >
            <i
              slot="reference"
              class="el-icon-error"
              :title="t('ht.common.remove')"
            ></i>
          </el-popconfirm>
        </template>
      </li>
    </transition-group>
  </draggable>
</template>
<script>
  import Locale from '@/mixins/locale'
  const draggable = require('vuedraggable')
  import mobileMode from '@/mixins/mobileMode.js'

  export default {
    name: 'FileList',
    components: { draggable },
    mixins: [Locale, mobileMode],
    props: {
      data: {
        type: Array,
      },
      previewable: {
        type: Boolean,
        default: true,
      },
      inputWriteable: {
        type: Boolean,
        default: true,
      },
      downloadable: {
        type: Boolean,
        default: true,
      },
      sortable: {
        type: Boolean,
        default: true,
      },
      fromType: String, // 移动端附件时特殊展示 mobileFile
    },
    data() {
      return {
        isDragging: false,
      }
    },
    computed: {
      dataVal: {
        get() {
          return this.data
        },
        set(val) {
          // 只有在拖拽排序时才通过inputVal对value进行更新
          if (this.isDragging && val.constructor == Array && val.length > 0) {
            this.$emit('sort', val)
          }
        },
      },
      dragOptions() {
        return {
          animation: 0,
          group: 'description',
          disabled: false,
          ghostClass: 'ghost',
        }
      },
    },
    methods: {
      getFileKey(file) {
        if(file.uid){
          return file.uid
        }
        if(file.response && file.response.fileId){
          return file.response.fileId
        }
        return this.$Formulas.UUID()
      },
      getIconClass(fileName) {
        if (!fileName) {
          return ''
        }
        let pos = fileName.lastIndexOf('.')
        let fileType = fileName.substring(pos, fileName.length).toLowerCase()
        if (fileType === '.docx' || fileType === '.doc') {
          return 'ht-icon-doc'
        }
        if (fileType === '.xls' || fileType === '.xlsx') {
          return 'ht-icon-xls'
        }
        if (fileType === '.ppt' || fileType === '.pptx') {
          return 'ht-icon-ppt'
        }
        if (fileType === '.pdf') {
          return 'ht-icon-pdf'
        }
        if (fileType === '.rar') {
          return 'ht-icon-rar'
        }
        if (fileType === '.zip') {
          return 'ht-icon-zip'
        }
        if (fileType === '.txt') {
          return 'ht-icon-txt'
        }
        if (fileType === '.mp4') {
          return 'ht-icon-mp4'
        }
        let imgArr = [
          '.jpeg',
          '.png',
          '.gif',
          '.psd',
          '.dds',
          '.webp',
          '.svg',
          '.jpg',
        ]
        if (imgArr.includes(fileType)) {
          return 'ht-icon-img'
        }
        let FileType = [
          '.jpeg',
          '.png',
          '.gif',
          '.psd',
          '.dds',
          '.webp',
          '.svg',
          '.jpg',
          '.mp4',
          '.txt',
          '.zip',
          '.rar',
          '.pdf',
          '.ppt',
          '.xls',
          '.xlsx',
          '.docx',
          '.doc',
        ]
        if (!FileType.includes(fileType)) {
          return 'ht-icon-qita'
        }
      },
      pow1024(num) {
        return Math.pow(1024, num)
      },
      filterSize(size) {
        if (!size) return '0KB'
        return size < 1024
          ? size + ' B'
          : size < this.pow1024(2)
          ? (size / 1024).toFixed(2) + ' KB'
          : size < this.pow1024(3)
          ? (size / this.pow1024(2)).toFixed(2) + ' MB'
          : size < this.pow1024(4)
          ? (size / this.pow1024(3)).toFixed(2) + ' GB'
          : (size / this.pow1024(4)).toFixed(2) + ' TB'
      },
    },
  }
</script>
<style lang="scss" scoped>
  .flip-list-move {
    transition: transform 0.5s;
  }

  .file-list__wrap {
    list-style: none;
    width: 100%;
    padding-left: 0;
    .file-item {
      padding: 3.5px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f8f9fb;
      border-radius: 4px;
      width: 100%;
      .file_left {
        display: flex;
        flex-grow: 1;
        width: calc(100% - 60px);
        align-items: center;
      }

      .el-progress--line {
        width: calc(100% - 10px);
      }

      .file__name {
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: calc(100% - 60px);
        margin: 0;
        color: #595959;
      }
      .el-icon-download {
        margin-right: 8px;
      }
      &:hover {
        .file-hover__icon {
          visibility: visible;
        }
        .file__name {
          cursor: pointer;
        }
        .handle {
          display: initial;
          position: relative;
          width: 16px;
          height: 16px;
          background: #f5f7fa;
          border: none;
        }
        .handle + .pc-file-icon {
          display: none;
        }
      }
      svg {
        margin-right: 5px;
      }
      .handle {
        display: none;
        cursor: move;
      }
      .file-hover__icon {
        visibility: hidden;
      }
      .file-hover__icon:hover {
        color: $base-color-blue;
        cursor: pointer;
      }
      .pc-file-icon {
        display: inline-block;
        width: 12px;
        height: 14px;
        background: url(../../../src/assets/pcFile/txt.svg);
        background-size: 100% 100%;
        margin-right: 8px;
        flex-shrink: 0;
        &.ht-icon-doc {
          background: url(../../../src/assets/pcFile/doc.svg);
          background-size: 100% 100%;
        }
        &.ht-icon-img {
          background: url(../../../src/assets/pcFile/img.svg);
          background-size: 100% 100%;
        }
        &.ht-icon-pdf {
          background: url(../../../src/assets/pcFile/pdf.svg);
          background-size: 100% 100%;
        }
        &.ht-icon-rar {
          background: url(../../../src/assets/pcFile/rar.svg);
          background-size: 100% 100%;
        }

        &.ht-icon-xls {
          background: url(../../../src/assets/pcFile/xls.svg);
          background-size: 100% 100%;
        }
      }
    }

    &.pc-file-list {
      ::v-deep {
        .el-progress--line {
          width: 100%;
        }
        .el-upload-list__item .el-progress {
          position: relative;
          top: 0;
        }
        .el-progress-bar {
          width: 0;
        }
        .el-progress__text {
          top: 0;
          color: #2b8cfd !important;
        }
        .el-upload-list__item:hover .el-progress__text {
          display: block;
        }
        .el-icon-error {
          color: #bfbfbf;
        }
      }
    }
    &.mobile-file-list {
      width: calc(100vw - 32px);
      .file-item {
        padding: 12px 10px 12px 0;
        background: none;
        border-bottom: 1px solid #e6e6e6;
        margin-top: 0;
        .file-icon {
          width: 42px;
          height: 42px;
          border-radius: 4px;
          background: url(../../../src/assets/file/unknow.svg);
          background-size: 100% 100%;
          padding-top: 0;
          &.ht-icon-doc {
            background: url(../../../src/assets/file/doc.svg);
            background-size: 100% 100%;
          }
          &.ht-icon-img {
            background: url(../../../src/assets/file/img.svg);
            background-size: 100% 100%;
          }
          &.ht-icon-pdf {
            background: url(../../../src/assets/file/pdf.svg);
            background-size: 100% 100%;
          }
          &.ht-icon-ppt {
            background: url(../../../src/assets/file/ppt.svg);
            background-size: 100% 100%;
          }
          &.ht-icon-rar {
            background: url(../../../src/assets/file/rar.svg);
            background-size: 100% 100%;
          }
          &.ht-icon-txt {
            background: url(../../../src/assets/file/txt.svg);
            background-size: 100% 100%;
          }
          &.ht-icon-xls {
            background: url(../../../src/assets/file/xls.svg);
            background-size: 100% 100%;
          }
          &.ht-icon-zip {
            background: url(../../../src/assets/file/zip.svg);
            background-size: 100% 100%;
          }
          &.ht-icon-mp4 {
            background: url(../../../src/assets/file/mp4.svg);
            background-size: 100% 100%;
          }
          &.ht-icon-qita {
            background: url(../../../src/assets/file/qita.svg);
            background-size: 100% 100%;
          }
        }
        .file-content {
          flex: 1;
          overflow: hidden;
          margin: 0 15px 0 8px;
          line-height: normal;
          text-align: left;
          height: 44px;
          position: relative;
          .file__name {
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #262626;
            font-size: 14px;
            margin-bottom: 4px;
          }
          .file-size {
            font-size: 12px;
            color: #999999;
          }
          ::v-deep {
            .el-progress {
              width: calc(100% - 44px);
              .el-progress__text {
                color: #409eff;
                top: unset;
                right: unset;
                margin-left: 8px;
              }
            }
          }
        }
        .file-btns {
          display: flex;
          align-items: center;
          .download-icon {
            display: inline-block;
            width: 22px;
            height: 22px;
            background: url(../../../src/assets/file/download.svg);
            background-size: 100% 100%;
            margin-right: 8px;
          }
          .el-icon-close {
            display: inline-block;
            position: static;
            font-size: 22px;
            color: #8c8c8c;
          }
        }
      }
      .file-item:last-child {
        border-bottom: none;
      }
    }
  }
  .border-top {
    border-top: 1px solid #e6e6e6;
  }
</style>
