<template>
  <!-- 工序板块 -->
  <div class="commonTitle">工序[{{ OptArrayLength }}]</div>
  <el-scrollbar class="barHeight">
    <Steps :opsArray="opsArray" @setstepindex="setSelectStepIndex" :selectStepIndex="selectStepIndex" />
  </el-scrollbar>
  <div class="bottomBtn">
    <el-button color="#0A59F7" class="btn" round>
      <span class="btnText">叫主料</span>
    </el-button>
  </div>
</template>
<script lang="ts" setup>
import Steps from "@/views/process/components/steps.vue";
const ordersDataArray = inject("ordersDataArray");
const selectOrderIndex = inject("selectOrderIndex");
const selectStepIndex = ref(-1);
const opsArray = ref([]);
const setSelectStepIndex = (value) => {
  selectStepIndex.value = value;
};
const setOptArray = () => {
  if (selectOrderIndex.value > -1) {
    opsArray.value = ordersDataArray.value[selectOrderIndex.value].ops;
  } else {
    opsArray.value = [];
  }
};
const OptArrayLength = computed(() => opsArray.value.length);
watch(selectOrderIndex, () => {
  setOptArray();
});
</script>

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

.bottomBtn {
  height: 80px;
  margin-top: 10px;
  width: 100%;
  display: flex;

  .btn {
    width: 100%;
    height: 80px;
    border-radius: 40px;

    .btnText {
      font-size: $f24;
      color: white;
    }
  }
}
</style>
