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

import AdminFulfillmentBindingsView from './AdminFulfillmentBindingsView.vue'
import AdminKuaishouCloudFulfillmentView from './AdminKuaishouCloudFulfillmentView.vue'

type FulfillmentTabKey = 'legacy' | 'kuaishou-cloud'

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

const activeTab = computed<FulfillmentTabKey>({
  get() {
    const value = String(route.query.tab || '').trim()
    return value === 'kuaishou-cloud' ? 'kuaishou-cloud' : 'legacy'
  },
  set(value) {
    const next = value === 'kuaishou-cloud' ? 'kuaishou-cloud' : 'legacy'
    void router.replace({
      path: '/admin/platform-fulfillment',
      query: next === 'legacy' ? {} : { tab: next },
    })
  },
})
</script>

<template>
  <section class="hub-panel">
    <AdminPageHeader
      title="履约配置中心"
      description="维护外部商品到内部 SKU 的映射规则，旧规则和快手 Cloud 新流程都在这里配置。"
    />

    <el-tabs v-model="activeTab" class="hub-tabs">
      <el-tab-pane label="旧履约规则" name="legacy">
        <AdminFulfillmentBindingsView />
      </el-tab-pane>
      <el-tab-pane label="快手 Cloud 新履约" name="kuaishou-cloud">
        <AdminKuaishouCloudFulfillmentView />
      </el-tab-pane>
    </el-tabs>
  </section>
</template>

<style scoped>
.hub-panel {
  display: grid;
  gap: var(--space-4);
}

:deep(.hub-tabs .el-tabs__header) {
  margin-bottom: 0;
}

:deep(.hub-tabs .el-tabs__content) {
  padding-top: var(--space-4);
}
</style>
