<template>
  <span @click="onView" class="view" v-if="props.fileId && props.type.includes('view')"
    ><el-icon><View /></el-icon>预览
  </span>
  <span @click="onDownload" class="download" v-if="props.fileId && props.type.includes('download')"
    ><el-icon><Download /></el-icon>下载
  </span>

  <el-dialog v-model="flyldialog" :show-close="false" top="10px" bottom="10px" width="1120px" :append-to-body="true">
    <div style="height: 84vh; text-align: center">
      <Kkfile :files="props.fileId" @changedialog="changedialog" />
    </div>
  </el-dialog>
</template>

<script setup>
import { nextTick, watch, ref } from "vue"
import FileSaver from "file-saver"
import Kkfile from "@/components/MyComponents/kkfile/index.vue"
import { getApi } from "@/api/tobAcco_api.js"
import { createAndClickLink } from "@/utils/tools.js"

const props = defineProps({
  fileId: String,
  type: Array
})
const flyldialog = ref(false)

const onView = () => {
  flyldialog.value = true
}
const onDownload = () => {
  if (props.fileId) {
    getApi({}, `/mosty-base/minio/file/download/${props.fileId}`).then(res => {
      if (res) {
        createAndClickLink(res.url, res.originalName)
      }
    })
  }
}
const changedialog = () => {
  flyldialog.value = false
}
</script>

<style lang="scss" scoped>
.download,
.view {
  color: var(--el-color-primary);
  cursor: pointer;
}
</style>
