<template>
  <div class="mx-auto bg-blue-600 max-w-86 relative">
    <header class="p-4 pt-12">
      <div class="flex flex-row">
        <div class="flex-1">
          <span class="font-sans text-xs text-gray-300">DemoDemo {{ activeArticle.id }}</span>
          <h1 class="font-bold text-white">Demo Demo</h1>
        </div>
        <div class="bg-white rounded-full flex bg-opacity-15 h-9 w-9 items-center justify-center">
          <div class="border-light-200 border-1 h-3 w-3 relative">
            <div class="rounded-full bg-yellow-400 h-2 -top-1 -right-1 w-2 absolute"></div>
          </div>
        </div>
      </div>
      <div class="mt-6">
        <ul class="bg-white rounded-xl flex bg-opacity-20 mx-10 text-white text-xs justify-around overflow-hidden">
          <li
            v-for="item in navbar.list"
            :key="item" class="rounded-md cursor-pointer bg-opacity-30 py-2 px-4"
            :class="{'bg-white': item===navbar.active }"
            @click="navbar.setPage(item)"
          >
            {{ item }}
          </li>
        </ul>
      </div>
    </header>

    <PageHome v-if="navbar.active === '主页'" v-model:id=activeArticle.id />
    <PageQiye v-if="navbar.active === '企业'"/>
    <PageFile v-if="navbar.active === '文件'"/>
    <PageWeibo v-if="navbar.active === '微博'"/>
    <PageArticle v-if="activeArticle.id !== 0" class="top-0 right-0 bottom-0 left-0 absolute"/>
  </div>
</template>

<script setup>
import {reactive} from "vue"
import PageHome from "./components/PageHome.vue"
import PageFile from "./components/PageFile.vue"
import PageWeibo from "./components/PageWeibo.vue"
import PageQiye from "./components/PageQiye.vue"
import PageArticle from "./components/PageArticle.vue"

const activeArticle = reactive({
  id: 0
})

const navbar = reactive({
  list: ['主页', '企业', '文件', '微博'],
  active: '主页',
  setPage: name => {
    console.log("active:", name)
    navbar.active = name
  }
})

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  background: #fafafa;
  padding: 2rem;
}
</style>
