<template>
  <ul class="form_upload_img_box" @dragover="dragover($event)">
    <li
      v-for="(item, index) in file"
      :key="index"
      :style="fileListStyle"
      :draggable="fileListDraggable"
      @dragstart="dragstart(item)"
      @dragenter="dragenter(item, $event)"
      @dragend="dragend()"
      @dragover="dragover($event)"
    >
      <div
        v-if="handleFileType(item.url) === 'image'"
        class="upload_img_item"
        :style="fileListStyle"
      >
        <el-image
          ref="preview"
          :style="fileListStyle"
          :src="item.url"
          :preview-src-list="
            fileList
              .filter(y => handleFileType(y.url) === 'image')
              .map(p => p.url)
          "
        ></el-image>

        <div
          class="img_mask"
          :class="{ no_name: !item.name }"
          :style="fileListStyle"
        >
          <p v-if="item.name" class="img_name clamp2">{{ item.name }}</p>
          <div class="img_tools">
            <i
              v-if="!hideUploadDelete"
              class="el-icon-delete img_mask_icon"
              @click="formUploadRemove(index)"
            >
            </i>
            <el-divider
              v-if="!hideUploadDelete"
              direction="vertical"
            ></el-divider>
            <i
              class="el-icon-zoom-in img_mask_icon"
              @click="previewImg(index)"
            ></i>
          </div>
        </div>
      </div>
      <div
        v-if="handleFileType(item.url) === 'excel'"
        class="upload_img_item"
        :style="fileListStyle"
      >
        <div class="excel_img" ref="preview" :style="fileListStyle"></div>

        <div
          class="img_mask"
          :class="{ no_name: !item.name }"
          :style="fileListStyle"
        >
          <p v-if="item.name" class="img_name clamp2">{{ item.name }}</p>
          <div class="img_tools">
            <i
              v-if="!hideUploadDelete"
              class="el-icon-delete img_mask_icon"
              @click="formUploadRemove(index)"
            >
            </i>
          </div>
        </div>
      </div>
      <div
        v-if="handleFileType(item.url) === 'video'"
        class="upload_img_item"
        :style="fileListStyle"
      >
        <video
          class="upload_video"
          :src="item.url"
          controls
          :style="fileListStyle"
        ></video>
        <i
          v-if="!hideUploadDelete"
          class="el-icon-close video_close_icon"
          @click="formUploadRemove(index)"
        ></i>
      </div>
    </li>
    <slot name="fileListSlot"></slot>
  </ul>
</template>
<script>
import tools from '../../utils/tools.js'
export default {
  name: 'file-list-view',
  props: {
    //文件列表数据
    file: {
      type: Array,
      default: () => []
    },
    // 文件列表的样式
    fileListStyle: {
      type: [Object],
      default: () => ({
        height: '80px',
        width: '80px'
      })
    },
    //是否可拖拽
    fileListDraggable: {
      type: Boolean
    },
    // 是否隐藏删除功能按钮
    hideUploadDelete: {
      type: Boolean
    }
  },
  data() {
    return {
      fileList: [],
      oldData: null, // 开始排序时按住的旧数据
      newData: null // 拖拽过程的数据
    }
  },
  watch: {
    file(file) {
      this.fileList = file || []
    }
  },
  methods: {
    handleFileType(name) {
      return tools.getFileType(name)
    },
    // 删除事件
    formUploadRemove(index) {
      //删除图片
      console.log('formUploadRemove', index, this.fileList, this.file)
      this.fileList.splice(index, 1)
      this.$emit('form-upload-event', this.fileList)
    },
    // 触发大图预览事件
    previewImg(index) {
      console.log(this.$refs.preview)
      this.$refs.preview[index].clickHandler()
      this.$emit('preview-img')
    },
    // 清除数据方法
    resetData() {
      this.fileList = []
      console.log('重置数据', this.fileList)
    },
    // 拖拽开始
    dragstart(value) {
      console.log('拖拽开始', value)
      this.oldData = value
    },

    // 记录移动过程中信息
    dragenter(value, e) {
      console.log('移动过程', value)
      this.newData = value
      e.preventDefault()
    },

    // 拖拽最终操作
    dragend(value, e) {
      console.log(this.oldData, this.newData)
      if (this.oldData !== this.newData) {
        let oldIndex = this.fileList.indexOf(this.oldData)
        let newIndex = this.fileList.indexOf(this.newData)
        let newItems = [...this.fileList]
        // 删除老的节点
        newItems.splice(oldIndex, 1)
        // 在列表中目标位置增加新的节点
        newItems.splice(newIndex, 0, this.oldData)
        this.fileList = [...newItems]
        console.log('拖拽最终操作', this.fileList)
        this.$emit('dragend', this.fileList)
      }
    },
    // 拖动事件（主要是为了拖动时鼠标光标不变为禁止）
    dragover(e) {
      e.preventDefault()
    }
  }
}
</script>
<style lang="less" scoped>
.clamp2 {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 这里是超出几行省略 */
  overflow: hidden;
}
.form_upload_img_box {
  display: flex;
  // flex: 1;
  flex-wrap: wrap;
  align-items: center;

  li {
    margin: 0 10px 10px 0;
  }
  // .upload_img_item{
  //   // border:1px solid #ebebeb;
  //   img,video{
  //     border-radius: 5px;
  //   }
  // }
  .upload_img_item {
    // width:60px;
    // height: 60px;
    position: relative;
    border-radius: 5px;
    .excel_img {
      background: url('../../img/import_file.svg') center no-repeat;
    }
    /deep/ .el-image__inner {
      object-fit: cover;
    }
    .el-image,
    video {
      border-radius: 5px;
    }
    .video_close_icon {
      position: absolute;
      right: 2px;
      top: 2px;
      font-size: 14px;
      color: #fff;
      cursor: pointer;
    }

    .img_mask {
      top: 0px;
      left: 0px;
      // width: 60px;
      // height: 60px;
      text-align: center;
      position: absolute;
      background-color: rgba(0, 0, 0, 0.5);
      opacity: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      border-radius: 5px;
      .img_name {
        color: rgba(255, 255, 255, 0.85);
        line-height: 18px;
      }
      .img_tools {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .el-divider--vertical {
        height: 1em;
        // margin-top: 3px;
      }
      .img_mask_delete {
        margin-right: 8px;
      }
      .img_mask_icon {
        color: #fff;
        z-index: 1;
        font-size: 16px;
        cursor: pointer;
      }
      .form_upload_zoom {
        margin-left: 10px;
      }
    }
    .no_name {
      flex-direction: row;
    }
    .img_mask:hover {
      transition: all 0.5s;
      // width: 60px;
      // height: 60px;
      opacity: 1;
    }
  }
}
</style>
