<template>
  <div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handChange">
      <el-tab-pane label="充值订单" name="recharge">
        <rechargeList v-if="activeName == 'recharge'" :primary="props.primary"></rechargeList>
      </el-tab-pane>
      <el-tab-pane label="退款订单" name="refund">
        <refundList v-if="activeName == 'refund'" :primary="props.primary"></refundList>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import { useRouter, useRoute } from 'vue-router'
import type { TabsPaneContext } from 'element-plus'
import rechargeList from "./tabs/rechargeList/index.vue"
import refundList from "./tabs/refundList/index.vue"
const router = useRouter()
const route = useRoute()
const handChange = (tab: TabsPaneContext, event: Event) => {
  activeName.value = tab
}
const props = defineProps({
  primary: Object,
});
const activeName = ref('recharge')
onMounted(() => {
  activeName.value = route.query.tab || 'recharge'
});
</script>

<style scoped lang="scss"></style>
