<template>
  <!-- 佐证材料公共上传 -->
  <div class="zzclPage">
    <el-button type="warning" size="small" @click="addZzcl">新增佐证材料</el-button>
    <el-table :data="tableData" style="margin: 20px 0px">
      <el-table-column label="序号" type="index" width="50" />
      <el-table-column label="文件名称" prop="name">
        <template #default="{ row }">
          <span class="green" style="cursor: pointer" @click="previewFile(row.name)">{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog v-model="dialogVisible" title="新增佐证材料" width="500px" append-to-body>
    <el-form ref="formRef" :model="formData" label-width="120px">
      <el-form-item label="佐证材料:" prop="fileList">
        <ImageFileUpload
          :limit="1"
          :saveFileArr="formData.fileList"
          :listType="'text'"
          :refField="'trfield'"
          :refType="'tr_site_info'"
          :fileType="['pdf,doc,docx']"
        ></ImageFileUpload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="info" @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传

const { proxy } = getCurrentInstance();
const tableData = ref([{ index: 1, name: '材料.doc' }]);
const dialogVisible = ref(false);
const formData = ref({ fileList: [] });

const props = defineProps({
  pageParams: {
    type: Object,
  },
});

// 新增佐证材料
function addZzcl() {
  dialogVisible.value = true;
  formData.value.fileList = [];
}

// 保存佐证材料
function submitForm() {
  // specialNavEdit(formData.value).then(response => {
  //   proxy.$modal.msgSuccess('新增成功');
  //   dialogVisible.value = false;
  //   getDataList();
  // });
}

// 预览文件
function previewFile(name) {
  window.open(name);
}

// 获取佐证材料列表
function getDataList() {}

onMounted(() => {
  console.log('------', props.pageParams);
  getDataList();
});
</script>

<style lang="scss" scoped>
.zzclPage {
  width: 100%;
}
</style>