<script setup lang="ts">
import { markRaw, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Goods, Refresh } from '@element-plus/icons-vue'
import GoodsView from '@/views/goods/GoodsView.vue'
import SyncView from '@/views/sync/SyncView.vue'

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

const tabs = [
  { name: 'goods', label: '商品配置', icon: markRaw(Goods), comp: markRaw(GoodsView) },
  { name: 'sync', label: '数据同步', icon: markRaw(Refresh), comp: markRaw(SyncView) },
]

const activeTab = ref((route.query.tab as string) || 'goods')

watch(activeTab, (val) => {
  router.replace({ query: { ...route.query, tab: val } })
})
</script>

<template>
  <div class="pm-wrapper">
    <el-tabs v-model="activeTab" class="pm-tabs" type="card">
      <el-tab-pane
        v-for="t in tabs"
        :key="t.name"
        :name="t.name"
      >
        <template #label>
          <span class="pm-tab-label">
            <el-icon class="pm-tab-icon"><component :is="t.icon" /></el-icon>
            {{ t.label }}
          </span>
        </template>
        <component :is="t.comp" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>
.pm-wrapper { height: 100%; display: flex; flex-direction: column; }
.pm-tabs { height: 100%; display: flex; flex-direction: column; }
.pm-tabs :deep(.el-tabs__header) { margin-bottom: 0; flex-shrink: 0; }
.pm-tabs :deep(.el-tabs__content) { flex: 1; min-height: 0; overflow: hidden; }
.pm-tabs :deep(.el-tab-pane) { height: 100%; }
.pm-tab-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pm-tab-icon { font-size: 14px; }
</style>
