<script setup lang='ts'>
import { user } from '~/store/user'

const router = useRouter()

const NavList = [
  {
    id: '/',
    label: '直播课程',
  },
  {
    id: '/jchf',
    label: '精彩回放',
  },
  {
    id: '/xbkc',
    label: '小班课程',
  },
  {
    id: '/xlkc',
    label: '系列课程',
  },
  {
    id: `${location.origin}/page/task.html`,
    label: '精准教学',
  },
]

function browserOpen(path: string, flag?: boolean) {
  if (path.startsWith('http') || flag)
    window.open(path, '_self')
  else
    router.push(path)
}
// @click="browserOpen(`https://openapi.bozedu.net/login.html?token=${user.token}`)"
</script>

<template>
  <div class="h-100px flex items-center justify-center">
    <div class="w-1200px flex justify-between">
      <div class="flex items-center text-3xl space-x-3">
        <img src="/logo.png" alt="" class="h-36px w-36px">
        <div>宜昌市乡村教育振兴网络扶智课堂</div>
      </div>

      <el-dropdown trigger="click">
        <div class="cursor-pointer">
          <img
            class="inline-block h-40px w-40px rounded-1/2 align-middle hover:bg-hex-1259A110 hover:text-hex-1259A1"
            :src="user?.user_avatar?.small || undefined" alt=""
          >
          <span class="ml-10px inline-block align-middle">
            {{ user.user_realname }}
          </span>
        </div>
        <template #dropdown>
          <el-dropdown-menu v-if="user.user_role_id !== '76'">
            <el-dropdown-item
              @click="browserOpen('https://ycxcktapi.bozedu.net/index.php?mod=index&action=index&do=index')"
            >
              后台管理
            </el-dropdown-item>
            <el-dropdown-item @click="browserOpen(`https://uc.bozedu.net/webapps/page/glzx.html?type=xuexiao&token=${user.token}`)">
              个人中心
            </el-dropdown-item>
            <el-dropdown-item @click="browserOpen(`https://stat.bozedu.net?token=${user.token}`)">
              数据分析
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
  <div class="flex items-center justify-center bg-blue-600 text-lg text-light-50">
    <div class="w-1200px flex">
      <div
        v-for="item in NavList" :key="item.id"
        class="h-64px w-120px cursor-pointer text-center leading-64px hover:bg-blue-500" @click="browserOpen(item.id)"
      >
        {{ item.label }}
      </div>
    </div>
  </div>
</template>
