<template>
  <div class="file-box">
    <div class="file-item" v-for="item,index in files" :key="item.id">
      <div class="item-left">
        <img src="@/assets/images/home/world.png" alt="">
        <div @click="downloadFile(index)">{{ item.name }}{{ item.size }}</div>
      </div>
      <div class="item-right">
        <img src="@/assets/images/Transaction/download.png" alt="" @click="downloadFile(index)">
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imageDate:[
        {
          url:require('@/assets/images/home/excel.png')
        },
        {
          url:require('@/assets/images/home/img.png')
        },
        {
          url:require('@/assets/images/home/world.png')
        },
        {
          url:require('@/assets/images/home/pdf.png')
        },
      ],
      throttle:true,
    }
  },
  props:{
    files:{
      type:Array,
      default:function(){
        return []
      },
    }
  },
  methods:{
    //图标
    getImg(){
      let res = this.fileName.split('.')
      let msg =res[res.length-1]
      console.log(msg);
      if(msg == 'doc' || msg == 'docx'){
         return this.imageDate[2].url
      }else if(msg == 'xlsx' || msg == 'xls'){
        return this.imageDate[0].url
      }else if(msg == 'pdf'){
        return this.imageDate[3].url
      }else if(msg == 'png' || msg == 'jpg' ||msg == 'jpeg'){
        return this.imageDate[1].url
      }
    },
    downloadFile(index){
      // if(this.throttle) {
      //   this.throttle = false;
      //   this.download(
      //     this.files.split(",")[1].split("/").splice(4).join("/"),
      //     this.fileName
      //   );
      //   setTimeout(()=>{
      //     this.throttle = true;
      //   },1500)
      // }else {
      //   this.$message({
      //     message: "下载中请稍后",
      //     type: "warning",
      //   });
      // }
      this.$message({
        message: "下载中请稍后",
        type: "warning",
      });
    }
  },
}
</script>
<style lang="scss" scoped>
@import "@/assets/styles/utils.scss";
.file-box {
  display: grid;
  grid-column: 1fr;
  grid-row-gap: vh(10);

  .file-item {
    padding: vh(9) vw(10);
    width: 100%;
    background-color: #F8F9FA;
    border-radius: vw(2);
    display: flex;
    justify-content: space-between;
    align-items: center;

    .item-left {
      display: flex;
      align-items: center;

      img {
        width: vw(21);
        // height: vw(23);
        margin-right: vw(10);
      }
      div {
        font-size: vw(16);
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #6A6C6F;
        cursor: pointer;
      }
    }
    .item-right {
      img {
        width: vw(19);
        cursor: pointer;
      }
    }
  }
}
</style>
