<template>
    
  <div class="conole-left">

    <div class="console-header">
      <a-button type="primary" shape="circle" style="background-color: black; border-radius: 5px; margin-right: 10px;">
        <MessageOutlined />
      </a-button>
      WebChat控制台
    </div>
    <div class="console-menu">
        <a-menu
          style="width: 230px; background-color: transparent; border: none; margin-left: -10px;"
          mode="inline"
        >
        <a-sub-menu key="sub0">
          <template #icon>
            <AppstoreOutlined />
          </template>
          <template #title>账号管理</template>
          <router-link to="/account-user-management" class="black-text"><a-menu-item key="01">普通账号</a-menu-item></router-link>
          <router-link to="/account-admin-management" class="black-text"><a-menu-item key="02">管理员账号</a-menu-item></router-link>
          <router-link to="/account-group-management" class="black-text"><a-menu-item key="03">群组管理</a-menu-item></router-link>
          <router-link to="/account-robot-management" class="black-text"><a-menu-item key="04">机器人</a-menu-item></router-link>
          <router-link to="/account-server-management" class="black-text"><a-menu-item key="05">服务号</a-menu-item></router-link>
          <router-link to="/account-offical-management" class="black-text"><a-menu-item key="06">公众号</a-menu-item></router-link>
          <router-link to="/account-black-management" class="black-text"><a-menu-item key="07">黑名单</a-menu-item></router-link>
          <router-link to="/access-app-management" class="black-text"><a-menu-item key="08">外部应用</a-menu-item></router-link>
        </a-sub-menu>
        <a-sub-menu key="sub5">
          <template #icon>
            <SettingOutlined />
          </template>
          <template #title>支付平台</template>
          <router-link to="/payment-app-management" class="black-text"><a-menu-item key="9">应用管理</a-menu-item></router-link>
          <router-link to="/payment-order-management" class="black-text"><a-menu-item key="10">交易订单</a-menu-item></router-link>
          <router-link to="/payment-detail-management" class="black-text"><a-menu-item key="11">交易明细</a-menu-item></router-link>
        </a-sub-menu>
        <a-sub-menu key="sub1">
          <template #icon>
            <AppstoreOutlined />
          </template>
          <template #title>公众号管理</template>
          <router-link to="/article-management" class="black-text"><a-menu-item key="3">文章内容管理</a-menu-item></router-link>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <template #icon>
            <AppstoreOutlined />
          </template>
          <template #title>朋友圈管理</template>
          <a-menu-item key="4">动态列表</a-menu-item>
          <a-menu-item key="5">评论管理</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub3">
          <template #icon>
            <AppstoreOutlined />
          </template>
          <template #title>抽奖活动运营</template>
          <a-menu-item key="6">活动管理</a-menu-item>
          <a-menu-item key="7">抽奖订单</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub4">
          <template #icon>
            <SettingOutlined />
          </template>
          <template #title>系统配置</template>
          <a-menu-item key="8">滑块验证</a-menu-item>
        </a-sub-menu>
      </a-menu>
    </div>
  </div>
  <div class="conole-right">
    <router-view/>
  </div>
  
</template>
<script>
import { RouterLink, RouterView, useRouter } from 'vue-router'
import { defineComponent, reactive, toRefs, watch } from 'vue';
import {
  MailOutlined,
  CalendarOutlined,
  AppstoreOutlined,
  SettingOutlined,
} from '@ant-design/icons-vue';
</script>

<style scoped>
* {
  margin: 0px;
  padding: 0px;
}
.conole-left {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 250px;
  padding: 20px;
  height: 100%;
  border-right: 1px solid rgb(214, 213, 213);
  background-color: whitesmoke;
}
.conole-right {
  position: absolute;
  right: 10px;
  top: 0px;
  width: calc(100% - 270px);
  padding: 20px;
  height: 100%;
}
.console-header {
  position: relative;
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-weight: 500;
}
.console-menu {
  margin-top: 30px;
}
.black-text {
  color: rgb(35, 35, 35);
}
</style>
