<!--
 * @description: 下载文件弹窗
 * @author: tangQing
 * @date: 2022-12-06
!-->
<template>
  <div>
    <el-dialog
      v-dialogDrag
      :visible.sync="dialogData.visible"
      :close-on-click-modal="false"
      title="文件下载"
      width="896px"
      custom-class="el-dialog__body-p8 el-dialog_table"
    >
      <!-- <div v-loading="loading" class="loadingBox" element-loading-spinner="el-icon-loading" /> -->
      <div v-for="(items,index) in fileList" :key="index" class="downClass" @click="getFile(items,index)">
        <span style="font-size:16px">
          <i class="iconfont icon-downloadRecord " />  {{ items.attachmenttitle }}
        </span>
        <i v-if="items.loading" v-loading="loading" element-loading-spinner="el-icon-loading" class="archivedLoading" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogData.visible = false">
          关 闭
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { downLoadFileByPath } from '@/api/common/uploadCenter'
import { download } from '@/assets/js/utils'// 常用方法
import { commonMixins } from './mixins/commonMixins'// 公共方法
export default {
  mixins: [commonMixins],
  props: {
    // 弹框展示状态
    dialogData: {
      type: Object,
      default: function() {
      }
    }
  },
  data() {
    return {
      loading: true,
      fileList: []
    }
  },
  created() {
    this.fileList = this.dialogData.fileList.filter(items => items.supplierName === this.dialogData.supplierName)
    this.fileList = this.fileList.map((item) => {
      return Object.assign(item, { loading: false })
    })
    console.log(this.fileList)
  },
  methods: {
    // 下载文件
    getFile(items, index) {
      this.$set(this.fileList[index], 'loading', true)
      this.$forceUpdate()
      var params = {
        realpath: items.realpath,
        attachmenttitle: items.attachmenttitle,
        extend: items.extend
      }
      downLoadFileByPath(params).then(res => {
        download(res, items.attachmenttitle + '.' + items.extend)
        this.$set(this.fileList[index], 'loading', false)
        this.$forceUpdate()
      })
    }

  }
}
</script>
<style scoped>
.downClass{
  color:#007CCC;
   cursor: pointer;
}
.downClass span{
  margin: 6px 0;
  display: inline-block;
}
.loadingBox{
  z-index: 999;
  position: absolute;
  bottom:0;
  width: 100%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.archivedLoading{
  margin-bottom:10px;
}
.archivedLoading >>>.el-loading-spinner{
margin-top: -12px !important;
margin-left: 5px;
}
</style>
