<template>

  <div class="bigBox">
    <MOSTY.FromPage :title="'附件预览'" @closeDialog="handleClose" :showtb="fasle">
      <template #content>
        <div class="box-big">
          <iframe @load="onLoad" @error="onError" v-if="file" :src="url + file" frameborder="0"></iframe>
        </div>
      </template>
      <template #footer>
        <div class="btn-clas" @click="downloadFile">
          <el-icon>
            <Download />
          </el-icon>
          <span>附件下载</span>
        </div>
        <div class="btn-clas" @click="handleClose">
          <el-icon>
            <CloseBold />
          </el-icon>
          <span>关闭</span>
        </div>
      </template>
    </MOSTY.FromPage>
  </div>

</template>
<style lang="scss" scoped>
.box-big {
  width: 100%;
  margin: 5px 10px;
  display: flex;
  height: 70vh;

  iframe {
    width: 100%;
    height: 100%;
  }
}

.btn-clas {
  width: 100px;
  color: #fff;
  padding: 5px;
  text-align: center;
  background-color: var(--el-color-primary);
  border-radius: 5px;
  margin-left: 10px;
  cursor: pointer;
}
</style>
<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { ref, defineProps, defineEmits, onMounted, watch } from "vue";
import { getFile } from "@/utils/getFile.js";
import { ElLoading, ElMessage } from 'element-plus'
const emits = defineEmits(["changedialog"]);
const file = ref(null);
const url = ref('')
const downloadUrl = ref('')
const props = defineProps({
  files: {
    type: String,
    default: ''
  }
});
const loading = ref(null)
onMounted(async () => {
  const currentMode = process.env.NODE_ENV;
  if (currentMode === 'development') {
    url.value = 'http://192.168.1.6:8012/onlinePreview?url=';// 烟草本地
  } else {
    url.value = window.location.origin + '/kkfile/onlinePreview?url='
  }
  try {
    loading.value = ElLoading.service({
      lock: true,
      text: '加载中...',
      background: 'rgba(0, 0, 0, 0.7)',
    })
    let data = await getFile(props.files);
    if (data != null) {
      downloadUrl.value = data.innerUrl
      file.value = encodeURIComponent(btoa(data.innerUrl))
    } else {
      emits("changedialog", false);
    }
  } catch (e) {
    loading.value.close()
    emits("changedialog", false);
  }
})
watch(() => props.files, async (n) => {
  if (n) {
    try {
      loading.value = ElLoading.service({
        lock: true,
        text: '加载中...',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      let data = await getFile(n);
      if (data != null) {
        downloadUrl.value = data.innerUrl
        file.value = encodeURIComponent(btoa(data.innerUrl))
      } else {
        emits("changedialog", false);
      }
    } catch (e) {
      loading.value.close()
      emits("changedialog", false);
    }
  }
})
loading.value = ElLoading.service({
  lock: true,
  text: '加载中...',
  background: 'rgba(0, 0, 0, 0.7)',
})
const onLoad = () => {
  loading.value.close()
}
const onError = () => {
  loading.value.close()
  ElMessage({
    showClose: true,
    message: '加载失败',
    type: 'error',
  })
}
// 下载PDF
async function downloadFile() {
  fileAjax(file.value.innerUrl, function (xhr) {
    _downloadFile(xhr.response, file.value.originalName)
  }, {
    responseType: 'blob'
  })
}

function fileAjax(url, callback, options) {
  let xhr = new XMLHttpRequest()
  xhr.open('get', url, true)
  if (options.responseType) {
    xhr.responseType = options.responseType
  }
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      callback(xhr)
    }
  }
  xhr.send()
}

function _downloadFile(content, filename) {
  // window.URL = window.URL || window.webkitURL
  // let a = document.createElement('a')
  // let blob = new Blob([content])
  // // 通过二进制文件创建url
  // let url = window.URL.createObjectURL(blob)
  // a.href = url
  // a.download = filename
  // a.click()
  // // 销毁创建的url
  // window.URL.revokeObjectURL(url)
  window.open(downloadUrl.value, "_blank");
}
// 关闭
const handleClose = () => {
  emits("changedialog", false);
};

</script>
