<template>
  <div class="commonTitle">待完成订单[{{ ordersSum }}]</div>
  <el-scrollbar class="barHeight">
    <Order v-for="(item, index) in ordersDataArray" :key="index" @click="setSlectIndex(index)"
      :hoverStatus="index == selectIndex ? true : false" :item="item" />
    <el-empty v-if="!ordersDataArray" description="暂无数据" />
  </el-scrollbar>
</template>
<script lang="ts" setup>
import Order from "@/views/process/components/order.vue";
import { useProcessStore } from "@/store";

const store = useProcessStore();
const props = defineProps<{
  ordersSum?: number;
}>();
const emit = defineEmits(["getindex"]);
const ordersDataArray = inject("ordersDataArray");
const selectIndex = ref(0);
const setSlectIndex = (value: number) => {
  selectIndex.value = value;
  store.odersData.productLineId = ordersDataArray.value[value].productLineId;
  store.odersData.workOrderCode = ordersDataArray.value[value].workOrderCode;
  store.processInfo.materialName = ordersDataArray.value[value].materialName;
  store.processInfo.materialModel = ordersDataArray.value[value].materialModel;
  emit("getindex", value);
};

watch(ordersDataArray, () => {
  if (ordersDataArray.value.length > 0) setSlectIndex(0);
});
</script>

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

.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}
</style>
