<template>
  <div>
    <ScanCodeInput
      v-model="currentCode"
      style="width: 400px; margin-left: 20px"
      @keyup.enter="enter"
    />
    <div class="bar-container">
      <el-scrollbar>
        <div class="grid-container">
          <div v-for="(item, index) in dataList" :key="index" class="list-box">
            <div>
              <div class="name">{{ item.name }}name</div>
              <div class="spec">{{ item.spec }}spec</div>
            </div>
            <div class="bottom">
              <NumberInput v-model="item.number" />
              <span class="unit">{{ item.unit }}个</span>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <div class="station-bottom-btns">
      <el-button class="cancelBtn" @click="cancelClick">取消</el-button>
      <el-button class="sureBtn" type="primary" @click="confirmClick"
        >确认上料
      </el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useProcessStore } from "@/store/modules/processView";
import router from "@/router";

const currentCode = ref("");
const enter = () => {};

const processStore = useProcessStore();
const dataList = ref<any>([
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
]);

const cancelClick = () => {
  router.back();
};

const confirmClick = () => {};

onMounted(() => {
  if ("EventSource" in window) {
    const source = new EventSource(
      "/api/v1/pro-operation/station-up-material/stream",
      { withCredentials: true }
    );
    source.onmessage = (event) => {
      const data = JSON.parse(event.data);
      console.log(data);
    };
    source.onerror = (event) => {
      console.log("EventSource error");
    };
    source.onopen = (event) => {
      console.log("EventSource connected");
    };
  } else {
    console.log("EventSource not supported");
  }
});
</script>

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

.grid-container {
  display: grid;
  /*行间距*/
  grid-row-gap: 24px;
  /*列间距*/
  grid-column-gap: 24px;

  overflow-y: auto;
  padding: 24px;
  width: calc(100% - 48px);
  grid-template-columns: 1fr 1fr 1fr;

  .list-box {
    height: 210px;
    background: #fff;
    border-radius: 16px 16px 16px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    padding: 30px 30px;

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

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

    .bottom {
      display: flex;
      justify-content: start;
      align-items: end;
    }

    .unit {
      font-weight: 500;
      font-size: 24px;
      color: rgba(0, 0, 0, 0.6);
      text-align: left;
      margin-left: 5px;
    }
  }
}

.station-bottom-btns {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  //margin-bottom: 20px;

  .button {
    margin-right: 20px;
  }

  .cancelBtn {
    width: 292px;
    height: 80px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 76px 76px 76px 76px;
  }

  .sureBtn {
    width: 292px;
    height: 80px;
    margin-left: 24px;
    background: #0a59f7;
    border-radius: 76px 76px 76px 76px;
  }
}
</style>
