<template>
  <div class="index-container">

    <!-- 顶部模式切换 -->
    <div class="index-switch">
      <a-radio-group v-model="homeMode">
        <a-radio-button value="portal">门户首页</a-radio-button>
        <a-radio-button value="display">展示首页</a-radio-button>
      </a-radio-group>

      <a-radio-group
        size="small"
        v-if="homeMode==='display'"
        v-model="displayMode"
        style="margin-left:16px"
      >
        <a-radio-button value="list">列表</a-radio-button>
        <a-radio-button value="grid">网格</a-radio-button>
      </a-radio-group>
    </div>

    <!-- 页面区域 -->
    <keep-alive>
      <component :is="currentComponent"/>
    </keep-alive>

  </div>
</template>

<script>
import PortalHome from './components/PortalHome.vue'
import HomePage from "./HomePage";
import WheelGLConsume from "./WheelGLConsume"

export default {
  name: "Analysis",
  components: {
    PortalHome,
    HomePage,
    WheelGLConsume,
  },
  data() {
    return {
      homeMode: 'portal',     // portal / display
      displayMode: 'list'     // list / grid
    }
  },
  computed: {
    currentComponent() {
      if (this.homeMode === 'portal') {
        return 'PortalHome'
      }
      return this.displayMode === 'list'
        ? 'WheelGLConsume'
        : 'HomePage'
    }
  }
}
</script>

<style scoped>
.index-container {
  position: relative;
}

.index-switch {
  position: absolute;
  top: 16px;
  right: 60px;
  z-index: 10;
}
</style>