<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

const menuItems = [
  { label: '主材', key: 'PrimaryMaterial', progress: 30 },
  { label: '材料', key: 'RawMaterial', progress: 50 },
  { label: '治具', key: 'Fixture', progress: 80 },
];

const activeKey = computed(() => route.name as string);

const handleMenuClick = (key: string) => {
  router.push({ name: key });
};

const infeedChildRef = ref<any>(null);

/** 父组件对外暴露的方法 */
function renderTableHeight() {
  infeedChildRef.value?.renderTableHeight();
}

defineExpose({
  renderTableHeight
});
</script>

<template>
  <a-row :gutter="24" class="infeed-layout">
    <a-col :span="4">
      <div class="menu-list">
        <span class="infeed-title">进站</span>
        <div 
          v-for="item in menuItems" 
          :key="item.key" 
          class="menu-item"
          :class="{ active: activeKey === item.key }"
          @click="handleMenuClick(item.key)"
        >
          <div class="menu-content">
            <span class="menu-title">{{ item.label }}</span>
            <a-progress 
              :percent="item.progress" 
              :show-info="false" 
              size="small" 
              :stroke-color="activeKey === item.key ? '#1890ff' : undefined"
              class="menu-progress"
            />
          </div>
        </div>
        <a-button type="primary" size="large">确认进站</a-button>
      </div>
    </a-col>
    <a-col :span="20" class="content-wrapper">
      <router-view v-slot="{ Component }">
        <component :is="Component" ref="infeedChildRef" />
      </router-view>
    </a-col>
  </a-row>
</template>

<style scoped lang="scss">
.infeed-layout {
  height: 100%;
}

.menu-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.infeed-title {
  font-size: 20px;
  font-weight: 600;
  border-bottom: 1px solid #c9c9c9;
  padding: 0 0 8px;
}

.menu-item {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  padding: 1vh 1vw;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid #f0f0f0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
  position: relative;
  overflow: hidden;

  &.active {
    background: #e6f7ff;
    border-color: #1890ff;
    
    .menu-title {
      color: #1890ff;
    }
  }

  &:hover {
    border-color: #47a5fd;
  }
}

.menu-content {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
}

.menu-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  line-height: 1.5;
}

.menu-progress {
  margin-bottom: 0 !important;
  
  :deep(.ant-progress-bg) {
    transition: all 0.3s;
  }
}

.content-wrapper {
  height: 100%;
}
</style>
