<template>
  <el-form
    ref="form"
    :model="caseFile"
    label-width="90px"
    class="camera-from dispatch-file-from jm-file-upload"
  >
    <el-form-item label="排版：">
      <el-radio-group v-model="exportInfo.paperType">
        <el-radio value="four">4联卡纸</el-radio>
        <el-radio value="a4">A4纸</el-radio>
        <el-radio value="a3">A3纸</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="格式：">
      <el-radio-group v-model="exportInfo.fileType">
        <el-radio value="pdf">pdf</el-radio>
        <el-radio value="jpg">jpg</el-radio>
      </el-radio-group>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { maxFileSize } from "@/constant/caseFile";
import { useUpload } from "@/hook/upload";
import { ElMessage, ElLoading } from "element-plus";
import { computed, ref, watchEffect, onMounted } from "vue";
import { addCaseScenes } from "./quisk";
import { QuiskExpose } from "@/helper/mount";
import { updateSelectByTreeFileLists } from "@/store/case";

const props = defineProps<{
  showPagesRef: any;
  title: string
}>();
const exportInfo = ref({
  paperType: "four",
  fileType: "pdf",
})
onMounted(async () => {
});
const submit = () => {
    if (!props.showPagesRef) {
      ElMessage.error("加载异常，请刷新浏览器");
      throw "加载异常，请刷新浏览器";
    }else{
       const loading = ElLoading.service({ lock: true, text: "正在导出" });
        // 延迟执行，让 loading 先显示出来
      setTimeout(async () => {
        try {
          await props.showPagesRef.exportToPDF(
            exportInfo.value.paperType, props.title, exportInfo.value.fileType
          );
          return true;
        } finally {
          loading.close();
        }
      }, 40);
      // props.showPagesRef.exportToPDF(exportInfo.value.paperType,props.title, exportInfo.value.fileType)
      // console.log('正在导出2');
      // loading.close();
    }
  };
defineExpose<QuiskExpose>({
  submit,
});
</script>

<style scoped lang="scss">
.upload-demo {
  overflow: hidden;
}

.file {
  display: flex;
  justify-content: space-between;
  align-items: center;
  > div {
    display: flex;
    align-items: center;
  }

  .name {
    margin-left: 10px;
  }
}
.jm-file-upload {
  // .mtk {
  //   position: absolute;
  //   right: 0;
  //   top: 0;
  // }
}
</style>
