<template>
  <div class="voucher-management-container">
    <div class="header">
      <el-page-header @back="goBack">
        <template #content>
          <span class="text-large font-600 mr-3">代金券管理 (ID: {{ voucherId }})</span>
        </template>
      </el-page-header>
    </div>

    <el-card class="mt-4" shadow="never">
      <el-tabs v-model="activeTab" type="card">
        <el-tab-pane label="用户分发管理" name="user-distribution">
          <UserVoucher :code-id="voucherId" />
        </el-tab-pane>
        
        <el-tab-pane label="商品关联管理" name="discount-goods">
          <DiscountGoods :code-id="voucherId" />
        </el-tab-pane>
        
        <el-tab-pane label="用户关联管理" name="discount-users">
          <DiscountUsers :code-id="voucherId" />
        </el-tab-pane>
        
        <el-tab-pane label="用户信息管理" name="user-info">
          <VoucherHolders :code-id="voucherId" />
        </el-tab-pane>
        
        <el-tab-pane label="用户使用记录" name="user-history">
          <VoucherHistory :code-id="voucherId" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import UserVoucher from './UserVoucher.vue'
import DiscountGoods from './DiscountGoods.vue'
import DiscountUsers from './DiscountUsers.vue'
import VoucherHolders from './VoucherHolders.vue'
import VoucherHistory from './VoucherHistory.vue'

const route = useRoute()
const router = useRouter()
const activeTab = ref('user-distribution')

const voucherId = computed(() => route.params.id)

const goBack = () => {
  router.push('/product/discount')
}
</script>

<style scoped>
.voucher-management-container {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}

.mt-4 {
  margin-top: 16px;
}
</style>
