<script lang="tsx">
import FinishedProducts from './components/finished-products/index.vue';
import RawMaterial from './components/raw-material/index.vue';

const TABS = [
  {
    label: '成品库',
    key: '1',
    routeName: 'MaterialCenterFinishedProducts',
  },
  {
    label: '原料库',
    key: '2',
    routeName: 'MaterialCenterRawMaterial',
  },
];
export default defineComponent({
  setup(_, { attrs, slots, expose }) {
    const route = useRoute();
    const router = useRouter();

    const activeKey = ref('1');

    onMounted(() => {
      activeKey.value = TABS.find((item) => item.routeName === route.name)?.key;
    });
    return () => (
      <div class="material-center-wrap h-full flex flex-col">
        <header class="py-16px px-24px rounded-8px bg-#fff flex items-center mb-16px">
          {TABS.map((item) => (
            <p
              key={item.key}
              class={`font-family-medium color-#737478 font-400 text-16px lh-24px cursor-pointer mr-32px ${
                item.key === activeKey.value ? '!color-#6D4CFE font-500' : ''
              }`}
              onClick={() => {
                activeKey.value = item.key;
                router.push({ name: item.routeName });
              }}
            >
              {item.label}
            </p>
          ))}
        </header>
        {activeKey.value === '1' ? <FinishedProducts /> : <RawMaterial />}
      </div>
    );
  },
});
</script>

<style scoped lang="scss">
@import './style.scss';
</style>
