<script setup name="accessory">
import { downFileById } from '@/http/apis/commonApi'
import { useRouter } from 'vue-router'

const props = defineProps({
  fileName: {
    type: String,
    default: ''
  },
  fileId: {
    type: Number,
    default: undefined
  },
  isDownLoad: {
    type: Boolean,
    default: true
  }
})
// 下载附件
const downloadFile = async () => {
  const res = await downFileById({ fileId: props.fileId })
  const url = URL.createObjectURL(res)
  const link = document.createElement('a')
  link.style.display = 'none'
  link.href = url
  link.download = props.fileName
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  window.URL.revokeObjectURL(url)
}
// 预览附件
const router = useRouter(),
  view = () => {
    const routeUrl = router.resolve({
      path: '/fileView',
      query: { id: props.fileId }
    })
    window.open(routeUrl.href, '_blank')
  }
</script>
<template>
  <div v-if="fileName&&fileId" class="accessory text-primary flex items-center flex-wrap">
    <span class="cursor-pointer" @click="view">{{ fileName||'-' }}</span>
    <p v-if="isDownLoad" class="ml-16 flex items-center text-primary btn cursor-pointer" @click="downloadFile">
      <svg-icon name="down-icon" class="mr-2 text-14" />
      <span>下载</span>
    </p>
  </div>
  <span v-else>-</span>
</template>
<style lang="less">
.accessory {
  .btn {
    line-height: 22px;
    height: 22px;
    background: rgba(9, 103, 253, 0.06);
    border-radius: 4px;
    border: 1px solid #0967FD;
    padding: 0 6px;
    font-size: 14px;
    width: 60px;
  }
}
</style>
