<template>
  <el-dialog v-model="visible" title="查看">
    <el-descriptions :column="1" border>
      <el-descriptions-item label="告知书名称">
        {{ info.OCCUPATIONALNAME }}
      </el-descriptions-item>
      <el-descriptions-item label="上传人">
        {{ info.CREATORNAME }}
      </el-descriptions-item>
      <el-descriptions-item label="上传时间">
        {{ info.CREATETIME }}
      </el-descriptions-item>
      <el-descriptions-item label="文件">
        <div @click="previewPdf(info.ATTACHMENT_ROUTE)">
          {{ getFileName(info.ATTACHMENT_ROUTE) }}
          <el-button type="primary" class="ml-10">预览</el-button>
        </div>
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button @click="visible = false">关闭</el-button>
    </template>
  </el-dialog>
  <layout-pdf
    v-if="pdfVisible"
    :src="pdfSrc"
    :visible="pdfVisible"
    @update:visible="pdfVisible = $event"
  ></layout-pdf>
</template>

<script setup>
import { ref } from "vue"; // 导入ref
import { useVModel } from "@vueuse/core";
import LayoutPdf from "@/components/pdf/index.vue";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
  info: {
    type: Object,
    required: true,
    default: () => ({}),
  },
  labelName: {
    type: String,
    required: true,
    default: "",
  },
});

const pdfVisible = ref(false); // 定义pdfVisible为响应式引用
const pdfSrc = ref(""); // 定义pdfSrc为响应式引用

const getFileName = (path) => {
  return path.split("/").pop();
};
const previewPdf = (src) => {
  pdfSrc.value = src; // 设置PDF源地址
  pdfVisible.value = true; // 显示PDF预览对话框
};

const emits = defineEmits(["update:visible"]);
const visible = useVModel(props, "visible", emits);
</script>

<style scoped lang="scss"></style>
