<!-- 文件预览 -->
<template>
  <div>
    <ul class="el-upload-list el-upload-list--picture-card">
      <li v-for="item in fileList" :key="item.url" class="el-upload-list__item is-success">
        <img
          v-if="isImageByUrl(item.url)"
          :src="item.url"
          alt=""
          class="el-upload-list__item-thumbnail"
        />
        <video
          v-else-if="isVideoByUrl(item.url) || isAduioByUrl(item.url)"
          :poster="isVideoByUrl(item.url) ? null : isAudioImg"
          style="width: 100%; height: 100%"
        >
          <source :src="item.url" />
          <source />
        </video>
        <img v-else src="./file.png" alt="" width="80%" height="80%" class="mt-16px" />
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(item)">
            <el-icon
              v-if="isImageByUrl(item.url) || isVideoByUrl(item.url) || isAduioByUrl(item.url)"
              ><zoom-in
            /></el-icon>
            <el-icon v-else><Paperclip /></el-icon>
          </span>
          <span
            v-if="mode === 'add'"
            class="el-upload-list__item-delete"
            @click="handleRemove(item)"
          >
            <el-icon><Delete /></el-icon>
          </span>
        </span>
      </li>
    </ul>
    <el-dialog v-model="dialogVisible" append-to-body width="800px" destroy-on-close title="查看">
      <img v-if="isImageByUrl(elsrc)" :src="elsrc" width="100%" alt />
      <video
        v-if="isVideoByUrl(elsrc)"
        :src="elsrc"
        style="width: 100%; height: 500px"
        controls="controls"
        controlslist="nodownload"
        width="100%"
        height="50%"
      ></video>
      <audio
        v-if="isAduioByUrl(elsrc)"
        :src="elsrc"
        controls="controls"
        controlslist="nodownload"
        style="width: 100%"
      ></audio>
    </el-dialog>
  </div>
</template>

<script>
import { isVideoByUrl, isImageByUrl, isAduioByUrl, download } from './utils.js'
import { ElDialog } from 'element-plus'

export default {
  name: 'FileView',
  components: { ElDialog },
  props: {
    fileList: {
      type: Array,
      default: () => []
    },
    mode: {
      type: String,
      default: 'view'
    }
  },
  data() {
    return {
      elsrc: '',
      isVideoByUrl,
      isImageByUrl,
      isAduioByUrl,
      dialogVisible: false
    }
  },

  computed: {
    isAudioImg() {
      return require('@/assets/img/AUDIO.png')
    }
  },
  // watch: {
  //   fileList: {
  //     immediate: true,
  //     deep: true,
  //     handler (n) {
  //       console.log(n)
  //     }
  //   }
  // },
  methods: {
    handlePictureCardPreview(file) {
      this.elsrc = file.url
      const canOpen =
        isVideoByUrl(this.elsrc) || isImageByUrl(this.elsrc) || isAduioByUrl(this.elsrc)
      if (canOpen) {
        this.dialogVisible = true
      } else {
        download(file.url, file.name || file.url.split('/').slice(-1))
      }
    },
    handleRemove(file) {
      this.$emit('remove', file, this.fileList)
    }
  }
}
</script>
<style lang="less" scoped>
.el-upload-list {
  .el-upload-list__item {
    position: relative;
    text-align: center;
  }

  .file-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--el-color-primary);
    font-size: 30px;
  }
}
</style>
