<template>
  <el-scrollbar>
    <div class="grid-container">
      <div
        v-for="(box, index) in merterielBoxes"
        :key="index"
        class="suit-box"
        @click="testClick(index)"
      >
        <div>
          <div class="suit-title">{{ box.title }}短发的</div>
          <div class="suit-desc">{{ box.desc }}对待</div>
        </div>
        <div>
          <div>
            <span class="suit-count">90</span>
            <span class="suit-desc">件</span>
          </div>
          <div class="suit-desc">{{ box.desc }}对待</div>
        </div>
      </div>
    </div>
  </el-scrollbar>
  <CallHistory ref="callHistoryRef" />
  <MarterielBoxDetail ref="materielBoxDetailRef" />
  <ChangeCount ref="changeCountRef" description="双面胶黑色" title="叫料数量" />
  <ConfirmMessage ref="confirmMessageRef" />
</template>

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

const merterielBoxes = ref<any>([
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
]);

// =========叫料历史
const callHistoryRef = ref<InstanceType<typeof CallHistory>>();

// =========料箱详情
const materielBoxDetailRef = ref<InstanceType<typeof MarterielBoxDetail>>();
// =========叫料数量
const changeCountRef = ref<InstanceType<typeof ChangeCount>>();

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

const testClick = (index: number) => {
  callHistoryRef.value?.showDrawer(index);
  materielBoxDetailRef.value?.showDialog("", () => {});
  changeCountRef.value?.showDialog(12, (value: number) => {
    console.log(value);
  });
  confirmMessageRef.value?.showDialog(
    "工位上料提示",
    "料箱：LX1321312已到达缓存位，是否立即工位上料？",
    "工位上料",
    () => {}
  );
};
</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: 24px 30px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-between;
    position: relative;

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

    .suit-count {
      font-weight: bold;
      font-size: 38px;
      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;
    }
  }
}
</style>
