<template>
  <!-- 工改平台文件附件选择 -->
  <div class="publicContainer gongGFile">
    <el-divider content-position="left">工改文件选择</el-divider>
    <el-form :model="queryForm" ref="queryRef" :inline="true">
      <el-form-item label="材料名称:" prop="name">
        <el-input v-model="queryForm.name" placeholder="请输入" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜 索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重 置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" v-loading="tableLoading" stripe height="300" ref="multipleTableRef">
      <el-table-column type="selection" width="55" />
      <el-table-column label="附件名称" prop="name" width="260" />
      <el-table-column label="附件地址" prop="url" />
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button type="warning" link @click="previewFile(row)">预览</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="total" v-model:page="queryForm.pageNum" v-model:limit="queryForm.pageSize" @pagination="getDataList" />
    <!-- 本地文件上传 -->
    <el-divider content-position="left" style="margin-top: 40px">本地文件选择</el-divider>
    <ImageFileUpload
      listType="text"
      :limit="10"
      :saveFileArr="fileObj.fileList"
      :refType="fileObj.refType"
      :refField="fileObj.refType"
      :fileType="['pdf', 'doc', 'docx', 'xlsx', 'xls', 'txt']"
    />
    <el-divider></el-divider>
    <div class="flex flex-justcontent-center" style="margin-top: 20px">
      <el-button type="warning" @click="contentClick">确定选择</el-button>
    </div>
  </div>
</template>

<script setup>
import { ElMessageBox } from 'element-plus';
import { filePage } from '@/api/system/file.js';
import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传

const emit = defineEmits(['closeGGDialog']);
const props = defineProps({
  // 判断类型，查看或者选择文件
  fileObj: {
    type: Object,
  },
});
const { proxy } = getCurrentInstance();
const tableData = ref([]);
const tableLoading = ref(true);
const total = ref(0);
const queryForm = ref({
  name: null,
  refId: '',
  refType: 'projectInfoGonggai',
  pageNum: 1,
  pageSize: 10,
});

// 搜索
function handleQuery() {
  queryForm.value.pageNum = 1;
  getDataList();
}
// 获取数据
async function getDataList() {
  tableLoading.value = true;
  let res = await filePage(queryForm.value);
  if (res && res.code == 200) {
    tableData.value = res.data || [];
    total.value = res.total;
  }
  tableLoading.value = false;
}
// 重置
function resetQuery() {
  proxy.$refs.queryRef.resetFields();
  handleQuery();
}

// 预览
function previewFile(row) {
  // 新上传的文件
  ElMessageBox.confirm(`确定预览此文件？`).then(
    () => {
      if (!!!row.url) {
        proxy.$modal.msgWarning('暂无文件地址，无法预览');
        return;
      }
      // 1，Base64进行转码
      let b64Encoded = Base64.encode(row.url);
      window.open(`previewUrl/onlinePreview?url=` + encodeURIComponent(b64Encoded));
    },
    () => false
  );
}

// 确定选择
function contentClick() {
  let listGG = proxy.$refs.multipleTableRef.getSelectionRows();
  let lists = [...listGG, ...props.fileObj.fileList];
  // 定义工改文件的相关参数
  lists &&
    lists.map(item => {
      item.refId = '';
      item.refField = props.fileObj.refField;
      item.refType = props.fileObj.refType;
    });
  console.log('选中的文件列表----', lists);
  if (!!!lists.length) return proxy.$modal.msgError('请至少选择或上传一个文件！');
  emit('closeGGDialog', lists);
}

onMounted(() => {
  queryForm.value.refId = props.fileObj.refId;
  handleQuery();
});
</script>

<style lang="scss">
.gongGFile {
  margin-bottom: 30px;
  .title {
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
  }
  .part {
    display: flex;
    justify-content: space-around;
    margin-top: 5px;
    .el-checkbox {
      width: 100%;
      .el-checkbox__label {
        width: 95%;
        display: flex;
        align-items: center;
      }
    }
    p {
      flex: 1;
      color: #00c7f2;
    }
  }
}
</style>