<template>
  <div class="module-root-page">
    <div class="module-page-header">
      <h2>业务管理</h2>
    </div>
    <IViewTabs v-model:activeKey="activeKey" :animated="false" class="module-entry-tabs">
      <IViewTabPane key="demo" tab="使用示例">
        <div class="tab-content" v-if="activeKey === 'demo'">
          <IndexDemo />
        </div>
      </IViewTabPane>
    </IViewTabs>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import IViewTabs from "@/iview/IViewTabs.vue";
import IViewTabPane from "@/iview/IViewTabPane.vue";
import IndexDemo from "./IndexDemo.vue";

const activeKey = ref("demo");
const route = useRoute();
const router = useRouter();

watch(
  () => route.query.tab,
  (tab) => {
    if (tab && ["demo"].includes(tab)) {
      activeKey.value = tab;
    }
  },
  { immediate: true }
);

watch(activeKey, (newKey) => {
  router.push({
    query: { ...route.query, tab: newKey },
  });
});
</script>

<style scoped>
.module-root-page {
  display: flex;
  flex-direction: column;
  text-align: left;
  box-sizing: border-box;
}

.module-page-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
}

@media screen and (max-width: 768px) {
  .module-root-page {
    --module-page-inset: 16px;
    width: calc(100% + 2 * var(--module-page-inset));
    margin: calc(-1 * var(--module-page-inset));
    padding: var(--module-page-inset);
    gap: 12px;
  }

  .module-root-page .module-page-header {
    padding: 0;
  }

  .module-root-page .module-page-header h2 {
    font-size: 20px;
  }

  .module-root-page .module-entry-tabs {
    margin: 0;
  }
}

@media screen and (min-width: 769px) {
  .module-page-header h2 {
    margin: 0 0 4px;
  }
}

.tab-content {
  min-height: 350px;
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 768px) {
  .tab-content {
    min-height: auto;
  }
}
</style>
