<template>
  <div>
    <div class="div-file"
         v-for="(item,index) in fileList"
         :key="index">
      <img v-if="item.type==='xls'||item.type==='xlsx'"
           src="@/assets/img/excel.png"
           class="image">
      <img v-else-if="item.type==='pdf'"
           src="@/assets/img/pdf.png"
           class="image">
      <img v-else-if="item.type==='doc'||item.type==='docx'"
           src="@/assets/img/word.png"
           class="image">

      <img v-else-if="item.type==='mp4'||item.type==='wma'||item.type==='m4a'||item.type==='mp3'"
           src="@/assets/img/video.png"
           class="image">
      <img v-else
           src="@/assets/img/image.png"
           class="image">
      <div @click="watchFile(item.url)"
           class="name">{{item.name}}</div>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务
import { requestPost, requestGet } from '@/js/dai/request'


let loading // 加载动画
export default {
  data () {
    return {
      // const formatarray = ['jpg', 'png', 'jpeg', 'bmp', 'mp4', 'wma', 'm4a', 'mp3', 'doc', 'docx', 'xls', 'xlsx', 'pdf']
      btnDisable: false,

      formData: {},

      fileList: [],
      uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadvariedfile',

    }
  },

  watch: {

  },
  components: {},
  async mounted () {
    this.startLoading()



    this.endLoading()

  },

  methods: {

    watchFile (src) {
      if (src) {
        window.open(src);
      }
    },
    handleCancle () {
      this.resetData()
      this.$emit('handleClose')

    },




    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  },
  computed: {



  },
  props: {

    fileList: {
      type: String,
      default: () => []
    },


  }
}
</script>

<style lang="scss" scoped >
.div-file {
  display: flex;
  align-items: center;
  padding-bottom: 10px;

  .image {
    width: 25px;
    height: 25px;
  }

  .name {
    margin-left: 10px;
    color: rgb(0, 149, 255);
    border-bottom: 1px solid rgb(0, 149, 255);
    cursor: pointer;
    font-size: 14px;
  }
}
</style>
