<template>
  <el-scrollbar v-loading="isLoading">
    <div class="grid-container">
      <div
        v-for="(box, index) in merterielBoxes"
        :key="index"
        class="suit-box"
        @click="getSuitDetail(box)"
      >
        <div class="suit-title">{{ box.vehicleName }}</div>
        <div class="suit-desc">{{ box.vehicleCode }}</div>
        <div class="suit-desc">{{ box.updated }}</div>
        <svg-icon class="svgStyle" icon-class="jiaobiao" size="25" />
      </div>
    </div>
  </el-scrollbar>
  <el-button
    v-if="!isFull"
    class="call-btn"
    round
    type="primary"
    @click="toCall"
  >
    叫料
  </el-button>

  <MarterielBoxDetail ref="materielBoxDetailRef" />
</template>

<script lang="ts" setup>
import MarterielBoxDetail from "@/views/pro-operation/call-materiel/components/materiel-box-detail.vue";

import {
  boxSuitDetailByBoxId,
  boxSuitList,
  callNotFullSuit,
} from "@/api/process/callMateriel";
import { useProcessStore } from "@/store/modules/processView";

const processStore = useProcessStore();
const merterielBoxes = ref<any[]>([]);
const isFull = ref(false); //是否齐套了
const isLoading = ref(false);

const getList = () => {
  isLoading.value = true;
  boxSuitList({
    operationId: processStore.odersData.operationId,
    workOrderCode: processStore.odersData.workOrderCode,
  })
    .then((res) => {
      merterielBoxes.value = res.data.processVehicleList || [];
      isFull.value = res.data.isFull;
    })
    .finally(() => {
      isLoading.value = false;
    });
};

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

// =========料箱详情
const detailList = ref<any[]>([]);
const materielBoxDetailRef = ref<InstanceType<typeof MarterielBoxDetail>>();
const getSuitDetail = (box: any) => {
  isLoading.value = true;
  boxSuitDetailByBoxId({ vehicleOperationId: box.id })
    .then((res) => {
      detailList.value = res.data;
      materielBoxDetailRef.value?.showDialog(box, detailList.value, () => {
        getList();
      });
    })
    .finally(() => {
      isLoading.value = false;
    });
};

const toCall = () => {
  isLoading.value = true;
  callNotFullSuit({
    operationId: processStore.odersData.operationId,
    workOrderCode: processStore.odersData.workOrderCode,
  })
    .then((res) => {
      res.data && ElMessage.success(res.data);
      // getList();
    })
    .finally(() => {
      isLoading.value = false;
    });
};
</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;
    }
  }
}

.call-btn {
  position: fixed;
  top: 80px;
  left: 650px;
  height: 80px;
  width: 200px;
  font-size: 24px;
}
</style>
