<template>
  <div class="commonTitle">操作</div>
  <div class="body">
    <ScanCode />
    <!-- <div class="btnBox">
      <el-button class="btn el-button-big" color="#0A59F7" round @click="call">
        <span class="btnText">叫料</span>
      </el-button>
    </div> -->
    <template v-for="(item, index) in operationObjs" :key="index">
      <Transition style="margin-top: 20px">
        <div
          v-if="
            index == 1
              ? selectSeqArray.length > 0 && selectSeqIndex > -1
                ? true
                : false
              : true
          "
          class="operateBox"
          @click="handleClick(item)"
        >
          <span class="operateText">{{ item.text }}</span>
          <svg-icon v-if="item.icon" :icon-class="item.icon" size="30" />
          <span v-else>{{ item.num }}</span>
        </div></Transition
      >
    </template>
    <Transition>
      <OperatePop v-model="callStatus" />
    </Transition>
  </div>
</template>

<script lang="ts" setup>
import router from "@/router";
import { useProcessStore } from "@/store";
import ScanCode from "@/views/process/components/scanCode.vue";
import OperatePop from "../popUpView/operatePop.vue";

const store = useProcessStore();
const operationObjs: { icon?: string; text: string; num?: number }[] = [
  // {
  //   icon: "liuzhuan",
  //   text: "物料流转",
  // },
  {
    icon: "shengchanlvli",
    text: "生产履历",
  },
];
const scanStatus = inject("scanStatus");
const selectSeqArray = inject("selectSeqArray");
const selectSeqIndex = inject("selectSeqIndex");
const handleClick = (item: { text: string }) => {
  switch (item.text) {
    case "物料流转":
      router.push({ name: "material-flow" });
      break;
    case "取暂存料":
      break;
    case "生产履历":
      if (!store.useSeqNo) {
        ElMessage.error("请选择流转卡号");
      } else {
        router.push({ path: `/traceability/${store.useSeqNo}` });
      }
      break;
    default:
      break;
  }
};

const callStatus = ref(false);
const call = () => {
  callStatus.value = true;
};
</script>

<style lang="scss" scoped>
.body {
  width: 100%;
  height: 250px;

  .btnBox {
    width: 100%;
    height: 80px;
    margin: $p20 0;

    .btn {
      width: 100%;
      height: 80px;
      font-size: $f24;
    }
  }

  .operateBox {
    height: 76px;
    width: 100%;
    margin-bottom: 10px;
    background-color: white;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    cursor: pointer;

    .operateText {
      font-size: $f24;
    }

    .operateSum {
      @include flex;

      span {
        font-size: $f24;
        font-weight: bold;
      }
    }
  }
}
</style>
