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

<template>
  <div class="inline">
    <!--一键下载-->
    <div v-if="oneDownload" class="inline">
      <a ref="oneDownload" class="inline-file">
        <!-- link  -->
        <el-link v-if="butType==='link'" v-loading="loading" style="margin:0 8px" type="primary" @click="dowloadFile()">
          {{ butText }}
        </el-link>
        <el-button v-else v-loading="loading" :size="size" :type="butType" style="margin-left:10px" @click="dowloadFile()">
          {{ butText }}
        </el-button>
      </a>
    </div>
    <!--非一键下载-->
    <div v-else>
      <div v-for="(item,index) in fileSeeList" :key="index" :class="disBlock" class="file">
        <!--图片展示样式-->
        <div v-if="itemType(item.name) && listType==='picture'" class="file-image clearfix">
          <div class="img">
            <el-image
              style="width: 100px; height: 100px"
              :src="readImageUrl + item.url"
              :preview-src-list="[readImageUrl + item.url]"
            />
          </div>
        </div>
        <!--文件展示样式-->
        <div v-else class="inline-block" @click="downLoadClick(item)">
          <span class="inline-file pointer" @click="handDownLoad(item)">
            <i class="iconfont icon-icon_file" />
            {{ item.name }}
          </span>
        </div>
      </div>
    </div>
    <div v-if="loadingDialogVisible" style="height:60px;width:100%;">
      <el-progress :text-inside="true" :stroke-width="16" :percentage="progress" />
      <p style="width:90%;margin:10px 0 0 5%;text-align:center;color:#3D60AD;">
        下载中...
      </p>
    </div>
  </div>
</template>

<script>
import { readImageRoot } from '@api/common/uploadCenter'
import { downLoadFileUrl, getFileDetail, downLoadFile } from '@/api/common/uploadCenter'
import { download } from '@/assets/js/utils/index'
import { mapMutations } from 'vuex'
import pdf from '@comp/common/pdf/pdf'
//  函数
function noop() {
}
export default {
  name: 'DownloadFile',
  components: {
    pdf
  },
  props: {
    // 查询参数
    data: {
      type: Object,
      default() {
        return {
          bizId: '', // 主键Id
          fileType: ''// 文件类型
        }
      }
    },
    // 块级元素 block 行内元素  inline
    disBlock: {
      type: String,
      default: 'inline-block'
    },
    // 是否可以下载
    downLoad: {
      type: Boolean,
      default: true
    },
    // 点击下载触发函数
    // 参数 当前点击的file文件参数
    downLoadClick: {
      type: Function,
      default: noop
    },
    // 是否开启点击接预览状态
    preview: {
      type: Boolean,
      default: false
    },
    // 是否一键下载
    oneDownload: {
      type: Boolean,
      default: false
    },
    // 设置文件下载名称
    downloadText: {
      type: String,
      default: ''
    },
    // 下载前回调
    beforeDowloadFile: {
      type: Function,
      default: noop
    },
    // 文件状态改变时的钩子，查询附件时会被调用
    onChange: {
      type: Function,
      default: noop
    },
    // 一键下载-按鈕文字
    butText: {
      type: String,
      default: '一键下载'
    },
    // 一键下载-按鈕类型 link===el-link  其他参数 一律为 el-button
    butType: {
      type: String,
      default: ''
    },
    // 一键下载-按钮大小
    size: {
      type: String,
      default: 'medium'
    },
    // 文件列表
    fileList: {
      type: Array,
      default: function() {
        return []
      }
    },
    // 文件类型 text/picture
    listType: {
      type: String,
      default: 'text'
    }
  },
  data() {
    return {
      readImageUrl: readImageRoot, // 预览图片
      loading: false,
      fileSeeList: [], // 初始化的文件列表
      downLoadFileUrl: downLoadFileUrl,
      progress: 0,
      loadingDialogVisible: false
    }
  },
  watch: {
    // 监听userUploadProgress的变化并实时更新到变量progress
    '$store.getters.userUploadProgress': function(val) {
      this.progress = val
    },
    // 查询参数
    data: { // 监听的对象
      deep: true, // 深度监听设置为 true
      handler: function() {
        this.getFile()// 获取附件信息
      }
    },
    // 监听参数是否有变化-组装数据
    fileList: { // 监听的对象
      deep: true, // 深度监听设置为 true
      handler: function() {
        this.assemblyData()
      }
    }
  },
  created() {
    this.getFile()// 获取附件信息
    // 如果有数据则组装
    if (this.fileList.length) {
      this.assemblyData()
    }
  },
  methods: {
    ...mapMutations(['UPLOAD_USER_PROGRESS']),
    // 获取附件信息
    getFile(data) {
      data = data || this.data
      // 有参数时才能进行查询
      if (data.bizId && data.fileType) {
        const len = this.fileSeeList.length
        this.fileList.splice(0, len)// 初始化列表
        getFileDetail(data).then(response => {
          this.fileList.push(...response.data)
          this.onChange(this.fileList, this.fileList)// 文件状态改变时的钩子，查询附件时会被调用
        }).catch(() => {
        })
      }
    },
    // 判断是否为图片
    itemType(type) {
      const fileend = type.substr(type.lastIndexOf('.') + 1)
      return ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(fileend.toLowerCase()) !== -1
    },
    // 组装数据
    assemblyData() {
      this.fileSeeList = []// 初始化
      // 如果不是数组直接 return掉
      if (this.fileList instanceof Array === false) return
      this.fileList.forEach(item => {
        const fileData = {
          name: item.title + '.' + item.extend,
          url: item.path,
          fileId: item.fileId,
          fileType: item.fileType,
          downLoadFileUrl: this.downLoadFileUrl + '?fileId=' + item.fileId + '&fileType=' +
            item.fileType,
          raw: {
            type: item.extend
          }
        }
        this.fileSeeList.push(fileData)
      })
    },
    handDownLoad(item) {
      this.loadingDialogVisible = true
      this.UPLOAD_USER_PROGRESS(0)
      const params = {
        fileId: item.fileId,
        fileType: item.fileType
      }
      this.$nextTick(() => {
        downLoadFile(params).then((res) => {
          download(res, item.name)
          this.loadingDialogVisible = false
        }).catch(() => {
          this.loadingDialogVisible = false
        })
      })
    },
    // 下载文件为多个同时下载-或一键下载
    async dowloadFile() {
      this.loading = true
      await this.beforeDowloadFile()
      this.fileSeeList.map((item, index) => {
        this.$nextTick(function() {
          // 设置文件下载名称时
          if (this.downloadText) {
            // 文件流的形式
            downLoadFile({
              fileId: item.fileId,
              fileType: item.fileType
            }).then(file => {
              download(file, this.downloadText)
              if (index === this.fileSeeList.length - 1) {
                this.loading = false
              }
            }).catch(() => {
              if (index === this.fileSeeList.length - 1) {
                this.loading = false
              }
            })
          } else {
            // 获取一键下载中a标签
            this.$refs.oneDownload.href = item.downLoadFileUrl
            if (index === this.fileSeeList.length - 1) {
              this.loading = false
            }
          }
        })
      })
    }
  }
}
</script>

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

      .iconfont {
        margin-right: 8px;
      }
      &:hover{
        color: @blue;
      }
    }
  }
  /*图片展示样式*/
  .file-image {
    display: flex;
    flex-wrap: wrap;
    justify-content:  flex-start;
    align-items: flex-start;
    .img {
      height: 100px;
      width: 100px;
      border-radius: 4px;
      background-color: @french-grey;
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
    }
  }
</style>
