<!--
  @description: 投标解密文件文件回显下载组件
  @Modifier: haoFx
  @routerPath:
  @date: 2020/1/10-13:56
-->

<template>
  <div>
    <div style="display: inline">
      <div v-for="(item,index) in fileSeeList" :key="index" class="file">
        <a :href="item.downLoadFileUrl" class="inline-file">
          <i class="iconfont icon-icon_file" />
          {{ item.name }}
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import { getTenderOpeningBidDecryptAttachmentList, downLoadFile } from '@api/bidding/bidOpening'
export default {
  name: 'DownloadFile',
  props: {
    // 上传参数
    data: {
      type: Object,
      default() {
        return {
          bizId: '', // 主键Id
          fileType: ''// 文件类型
        }
      }
    }
  },
  data() {
    return {
      fileSeeList: [], // 初始化的文件列表
      downLoadFileUrl: downLoadFile
    }
  },
  watch: {
    // 监听参数是否有变化-重新调用附件查询
    data: { // 监听的对象
      deep: true, // 深度监听设置为 true
      handler: function() {
        this.getFile()
      }
    }
  },
  created() {
    this.getFile()
  },
  methods: {
    // 获取附件信息
    getFile() {
      this.fileList = []
      // 有参数时才能进行查询
      if (this.data.bizId && this.data.fileType) {
        getTenderOpeningBidDecryptAttachmentList(this.data).then(response => {
          this.fileList = response.data
          this.assemblyData()
        }).catch(() => {
        })
      }
    },
    // 组装数据
    assemblyData() {
      this.fileSeeList = []// 初始化
      this.fileList.forEach(item => {
        const fileData = {
          name: item.title + '.' + item.extend,
          url: item.path,
          fileId: item.id,
          fileType: item.fileType,
          downLoadFileUrl: this.downLoadFileUrl + '?fileId=' + item.id + '&fileType=' +
              item.fileType,
          raw: {
            type: item.extend
          }
        }
        this.fileSeeList.push(fileData)
      })
    }
  }
}
</script>

<style lang="less" scoped>
  @import '~@assets/style/common/public.less';
  div {
    display: inline;
  }
  .file{
    margin: 0 6px;
    .inline-file {
      color: @blue;

      .iconfont {
        margin-right: 8px;
      }
      &:hover{
        color: @blue;
      }
    }
  }
</style>
