<template>
  <el-table :data="tableData" id="tableStyle" :height="tableHeight" border>
    <el-table-column prop="operationName" label="上传工序" />
    <el-table-column prop="creator" label="上传人员" />
    <el-table-column prop="created" label="上传时间" />
    <el-table-column label="操作" prop="operation">
      <template #default="{ row }">
        <el-button link type="primary" @click="handleLook(row.filePath)">查看</el-button>
      </template>
    </el-table-column>
    <template #empty>
      <div class="empty">
        <Empty />
      </div>
    </template>
  </el-table>
  <el-image-viewer
    v-if="showPreview"
    :url-list="preSrcList"
    show-progress
    :initial-index="0"
    @close="showPreview = false"
  />
  <Pagination position="right" :page="page" :limit="limit" :total="total" @pagination="getPagination" />
</template>

<script lang="ts" setup>
import { useProcessStore } from "@/store";
import { media } from "@/api/process/traceability";
const store = useProcessStore();
const page = ref(1);
const limit = ref(10);
const total = ref(10);
const tableData = ref([]);
const tableHeight = ref(null);

const baseUrl = import.meta.env.VITE_APP_UPLOAD_URL;

// 图片查看器相关
const showPreview = ref(false);
const preSrcList = ref([]);

const handleLook = (path: string) => {
  preSrcList.value = [baseUrl + path];
  showPreview.value = true;
};
//动态控制表格高度
const setTableHeight = () => {
  tableHeight.value = Number(document.getElementById("tabBox").offsetHeight) - 60;
};

const getPagination = async () => {
  const { data } = await media({
    pageNo: page.value,
    pageSize: limit.value,
    seqNo: store.useSeqNo,
    workOrderCode: store.odersData.workOrderCode,
  });
  total.value = data.totalCount;
  tableData.value = data.records;
};
onMounted(() => {
  getPagination();
  setTableHeight();
});
</script>

<style lang="scss" scoped></style>
