<template>
  <!-- 工改平台文件附件 -->
  <div class="publicContainer gongGFile">
    <el-form :model="queryForm" ref="queryRef" :inline="true">
      <el-form-item label="材料名称:" prop="clmc">
        <el-input v-model="queryForm.clmc" placeholder="请输入" clearable></el-input>
      </el-form-item>
      <el-form-item label="材料分类:" prop="clfl">
        <el-select v-model="queryForm.clfl" placeholder="请选择" @change="queryForm.cllx = ''">
          <el-option label="全部" value="" />
          <el-option v-for="dict in clfl" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="材料类型:" prop="cllx">
        <el-select v-model="queryForm.cllx" placeholder="请选择">
          <el-option label="全部" value="" />
          <!-- 审批材料 -->
          <el-option v-for="dict in spjglx" :key="dict.value" :label="dict.label" :value="dict.value" v-if="queryForm.clfl == '2'" />
          <!-- 申报资料、其他材料 -->
          <el-option v-for="dict in cllx" :key="dict.value" :label="dict.label" :value="dict.value" v-if="queryForm.clfl != '2'" />
        </el-select>
      </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 max-height="550" ref="multipleTableRef">
      <el-table-column type="selection" width="55" />
      <el-table-column label="材料名称" prop="clmc" />
      <el-table-column label="材料分类" prop="clfl">
        <template #default="{ row }">
          <dict-tag :options="clfl" :value="row.clfl" />
        </template>
      </el-table-column>
      <el-table-column label="材料类型" prop="cllxName"></el-table-column>
      <el-table-column label="操作">
        <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" />
  </div>
</template>

<script setup>
import { ElMessageBox } from 'element-plus';
import { spglXmjbxxbDetail } from '@/api/project/projectInformationNew';

const props = defineProps({
  // 文件id
  fileId: {
    type: String,
  },
});
const { proxy } = getCurrentInstance();
const { clfl, spjglx, cllx } = proxy.useDict('clfl', 'spjglx', 'cllx');
const tableData = ref([]);
const tableLoading = ref(true);
const total = ref(0);
const queryForm = ref({
  clfl: '',
  cllx: '',
  clmc: null,
  gcdm: null,
  pageNum: 1,
  pageSize: 10,
});

// 搜索
function handleQuery() {
  queryForm.value.pageNum = 1;
  getDataList();
}
// 获取数据
async function getDataList() {
  tableLoading.value = true;
  let res = await spglXmjbxxbDetail(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.dzzzwjlj) {
        proxy.$modal.msgWarning('暂无文件地址，无法预览');
        return;
      }
      // 1，Base64进行转码
      let b64Encoded = Base64.encode(row.dzzzwjlj);
      window.open(`previewUrl/onlinePreview?url=` + encodeURIComponent(b64Encoded));
    },
    () => false
  );
}

onMounted(() => {
  queryForm.value.gcdm = props.fileId;
  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>