<template>
  <div class="commonTitle">记录</div>
  <el-scrollbar class="barHeight">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="印刷板编号" prop="printingPlateCode" />
      <el-table-column label="物料名称" prop="materialName" />
      <el-table-column label="委外工序" prop="operationName" />
      <el-table-column label="工单编码" prop="workOrderCode" />
      <el-table-column label="操作" prop="operation">
        <template #default="{ row }">
          <el-button round type="danger" @click="deleteRecord(row)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-scrollbar>
  <Pagination
    v-model:limit="page.pageSize"
    v-model:page="page.pageNo"
    :total="page.total"
    @pagination="paginationChange"
  />
  <ConfirmMessage ref="confirmMessageRef" />
</template>

<script lang="ts" setup>
import { emitter, EventsNames } from "@/utils/common";
import { deletePrintInfo, getPrintInfoPage } from "@/api/process/appointOut";
import { useProcessStore } from "@/store";
import ConfirmMessage from "@/components/CommonDialogs/ConfirmMessage.vue";

const store = useProcessStore();

const page = reactive({
  pageSize: 10,
  pageNo: 1,
  total: 0,
});

const tableData = ref<any>([]);

// =========确认弹窗
const confirmMessageRef = ref<InstanceType<typeof ConfirmMessage>>();

const deleteRecord = (row: any) => {
  deletePrintInfo(row.id).then(() => {
    ElMessage.success("删除成功");
    getData();
  });
};

const paginationChange = () => {
  getData();
};

const getData = () => {
  getPrintInfoPage({
    pageNo: page.pageNo,
    pageSize: page.pageSize,
    operationId: store.odersData.operationId,
  }).then((res) => {
    tableData.value = res.data.records;
    page.total = res.data.totalCount;
  });
};

onMounted(() => {
  getData();
  emitter.on(EventsNames.PRINTING_PLATE, () => {
    getData();
  });
});

onBeforeUnmount(() => {
  emitter.off(EventsNames.PRINTING_PLATE);
});
</script>

<style lang="scss" scoped>
.barHeight {
  height: calc(100vh - 220px);
}

.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
</style>
