<template>
  <el-scrollbar height="calc(100vh - 250px)">
    <div v-loading="loading" class="grid-container">
      <div
        v-for="(box, index) in historyList"
        :key="index"
        class="suit-box"
        @click="handleClick(box)"
      >
        <div class="suit-title">料箱名称: {{ box.vehicleName }}</div>
        <div class="suit-desc">料箱编号:{{ box.vehicleCode }}</div>
        <div class="suit-desc">创建时间:{{ box.created }}</div>
        <svg-icon class="svgStyle" icon-class="jiaobiao" size="25" />
      </div>
    </div>
  </el-scrollbar>
  <Pagination
    v-model:limit="page.pageSize"
    v-model:page="page.pageNo"
    :total="page.total"
    size="large"
    @pagination="paginationChange"
  />
  <RecordDetail ref="recordDetailRef" />
</template>

<script lang="ts" setup>
import { getMaterialFlowHistoryList } from "@/api/process/materialFlow";
import RecordDetail from "@/views/material-flow/recordDetail.vue";

const recordDetailRef = ref<InstanceType<typeof RecordDetail>>();
const loading = ref(false);
const page = reactive({
  pageSize: 10,
  pageNo: 1,
  total: 0,
});

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

const getData = () => {
  loading.value = true;
  getMaterialFlowHistoryList({
    pageNo: page.pageNo,
    pageSize: page.pageSize,
  })
    .then((res) => {
      console.log(res);
      historyList.value = res.data.records;
      page.total = res.data.totalCount;
    })
    .finally(() => {
      loading.value = false;
    });
};

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

onMounted(() => {
  getData();
});

const handleClick = (item: any) => {
  if (item.processMaterialList && item.processMaterialList.length > 0) {
    recordDetailRef.value?.showDetails(item);
  }
};
</script>

<style lang="scss" scoped>
.grid-container {
  width: 100%;
  display: grid;
  /*行间距*/
  grid-row-gap: 24px;
  /*列间距*/
  grid-column-gap: 24px;

  grid-template-columns: 1fr 1fr 1fr;
  overflow-y: auto;

  .suit-box {
    height: 210px;
    background-color: white;
    border-radius: 16px 16px 16px 16px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    position: relative;

    .suit-title {
      font-weight: 500;
      font-size: 20px;
      color: rgba(0, 0, 0, 0.9);
      text-align: left;
    }

    .suit-desc {
      font-size: 20px;
      color: rgba(0, 0, 0, 0.6);
      text-align: left;
    }

    .svgStyle {
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
}
</style>
