<template>
  <!-- 佐证材料公共上传 -->
  <div class="zzclPage">
    <el-form ref="formRef" :model="formData" label-width="100px">
      <el-form-item label="佐证材料:" prop="fileList">
        <ImageFileUpload
          :limit="10"
          :saveFileArr="fileList"
          :listType="'text'"
          :refField="'trfield'"
          :refType="'tr_site_info'"
          :fileType="['pdf', 'doc', 'docx', 'png', 'jpg', 'jpeg']"
        ></ImageFileUpload>
      </el-form-item>
    </el-form>
    <el-table :data="fileList" style="margin: 20px 0px">
      <el-table-column label="序号" type="index" width="50" />
      <el-table-column label="文件名称" prop="url">
        <template #default="{ row }">
          <span class="green" style="cursor: pointer" @click="previewFile(row.url)">{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button type="danger" size="small" @click="deleFile(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="dialog-footer" style="text-align: center; margin-bottom: 20px">
      <el-button type="info" @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="submitForm">保 存</el-button>
    </div>
  </div>
</template>

<script setup>
import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
import { quotaCommomInfoEdit } from '@/api/sponeScreen/jxkh.js';

const { proxy } = getCurrentInstance();
const fileList = ref([]);
const emits = defineEmits(['closeDialog']);
const props = defineProps({
  pageParams: {
    params: Object,
  },
});
// 关闭弹窗
function closeDialog() {
  emits('closeDialog');
}

// 删除文件
function deleFile(file) {
  let fileIndex = null;
  fileList.value.map((item, index) => {
    if (file.name == item.originalName || file.originalName == item.originalName) {
      fileIndex = index;
    }
  });
  fileList.value.splice(fileIndex, 1);
  props.pageParams.params.fileList.splice(fileIndex, 1);
}

// 保存佐证材料
function submitForm() {
  quotaCommomInfoEdit(props.pageParams.params).then(res => {
    if (res.code == 200) {
      proxy.$modal.msgSuccess('保存成功');
      emits('closeDialog');
    } else {
      proxy.$modal.msgError(res.msg);
    }
  });
}

// 预览文件
function previewFile(url) {
  // 1，Base64进行转码,http  预览
  let b64Encoded = Base64.encode(url);
  window.open(`previewUrl/onlinePreview?url=` + encodeURIComponent(b64Encoded));
}

// 获取佐证材料列表
onMounted(() => {
  fileList.value = props.pageParams.params.fileList;
});
</script>

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