<template>
  <el-dialog v-model="dialogVisible" title="附件列表" width="45%">
    <el-table :data="fileList" style="width: 100%">
      <el-table-column prop="fileName" label="文件名" />
      <el-table-column prop="type" label="操作">
        <template #default="scope">
          <el-button link type="success" @click="viewFile(scope.row)" icon="View">查看文件</el-button>
          <el-button link type="primary" @click="downloadFile(scope.row)" icon="download">下载文件</el-button>
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"> 关闭 </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog width="80%" v-model="viewFileVisible" title="查看文件" append-to-body>
    <iframe :src="fileUrl" frameborder="0" width="100%" height="800"></iframe>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="viewFileVisible = false" type="primary">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
const { proxy } = getCurrentInstance();
const dialogVisible = defineModel();
const props = defineProps(['fileList']);
const viewFileVisible = ref(false);
const fileUrl = ref('');
const downloadFile = async (data) => {
  // 这里可以添加下载文件的逻辑
  await proxy?.downloadFile(data.fileUrl, data.fileName);
  //   proxy?.$message({
  //     message: '下载成功',
  //     type: 'success'
  //   });
};
const viewFile = (data) => {
  // 这里可以添加查看文件的逻辑
  fileUrl.value = data.fileUrl;
  viewFileVisible.value = true;
};
const adjustIframe = () => {
  const iframe = document.querySelector('iframe');
  if (iframe) {
    iframe.style.height = `${iframe.contentWindow.document.body.scrollHeight}px`;
  }
};
</script>
