<template>
  <div class="commonTitle">记录</div>
  <el-scrollbar class="barHeight">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="委外厂商" prop="manufacturers" />
      <el-table-column label="物料名称" prop="materialName" />
      <el-table-column label="委外工序" prop="operationName" />
      <el-table-column label="订单名称" prop="orderName" />
      <el-table-column label="状态" prop="state">
        <template #default="{ row }">
          {{ dictS.getLableByValue("outsource_state", row.state) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" prop="operation">
        <template #default="{ row }">
          <el-button
            v-if="row.state === '1'"
            round
            type="primary"
            @click="handleClick(row)"
            >接收
          </el-button>
          <el-button
            v-if="row.state === '0'"
            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 {
  appointRecord,
  deleteRecordById,
  reveiveRecord,
} from "@/api/process/appointOut";
import { useDictionaryStore } from "@/store";
import ConfirmMessage from "@/components/CommonDialogs/ConfirmMessage.vue";
import { useProcessStore } from "@/store";

const store = useProcessStore();
const dictS = useDictionaryStore();

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

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

const handleClick = (row: any) => {
  console.log(row);
  let nos = "";
  let details: any[] = [];
  row.details.forEach((item: any) => {
    nos += item.seqNo + "  ";
    details.push({
      seqNo: item.seqNo,
      outsourceId: row.id,
    });
  });

  confirmMessageRef.value?.showDialog(
    "确定接收以下流转卡号吗",
    nos,
    "确定",
    () => {
      reveiveRecord(details).then(() => {
        ElMessage.success("接收成功");
        getData();
      });
    }
  );
};

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

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

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

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

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

onBeforeUnmount(() => {
  emitter.off(EventsNames.APPOINT_OUT);
});
</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>
