<template>
  <div class="main-contant">
    <div>
      <a-tabs default-active-key="1" @change="changeTab" v-model:activeKey="defaultKey">
        <a-tab-pane key="PutAdAcountL" tab="广告账户数据"> </a-tab-pane>
        <a-tab-pane key="PutAdGroup" tab="广告组数据"> </a-tab-pane>
        <a-tab-pane key="PutAdPlan" tab="广告计划数据"> </a-tab-pane>
      </a-tabs>
    </div>

    <router-view></router-view>
  </div>
</template>

<script lang="ts">
import useApp from "@/hooks/useApp";
import { defineComponent,reactive,toRefs } from "vue";
import { onBeforeRouteUpdate } from "vue-router";

const PutDataIndex = defineComponent({
  setup(props,context) {
    const {  route,router } = useApp();
    const state = reactive({
      defaultKey:route.name
    })
    const changeTab = (key:string) => {

      router.replace({name:key})
    };
    onBeforeRouteUpdate((to) => {
      state.defaultKey = to.name
    });
    return {...toRefs(state), changeTab };
  },
});

export default PutDataIndex;
</script>
