<template>
  <div class="main">
    <template v-if="isWebPage">
      <div class="main-head" >
        <img src="../../assets/logo-icon.png" alt="" class="logo">
        <div class="right">
          <a-icon type="search" class="icon-ball" />
          <a-icon type="bell" class="icon-ball" />
          <img src="../../assets/logo-icon.png" alt="" class="icon-user">
          <a-dropdown>
            <a class="ant-dropdown-link" @click="e => e.preventDefault()">
              Marci Fumons <a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a href="javascript:;">退出登陆</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;">消息</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>
      </div>
      <div class="main-con">
        <div class="main-menu">
          <a-menu style="width: 256px" :default-selected-keys="['1']" :default-open-keys="['sub1']" mode="inline"
             :selected-keys="[current]" @click="handleClick">
            <a-menu-item key="1">
              <a-icon type="profile" />
              知识库
            </a-menu-item>
            <a-menu-item key="2">
              <a-icon type="setting" />
              设置
            </a-menu-item>
          </a-menu>
        </div>
        <div class="main-right">
          <router-view />
        </div>
      </div>
    </template>
    <template v-else>
      <router-view />
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: '1',
      isWebPage:true,
      menuList: [
        { name: '知识库', path: '/list' },
        { name: '对话记录', path: '/history' },
      ]
    }
  },
  created() {
  },
  methods: {
    handleClick(e) {
      console.log('click ', e);
      this.current = e.key;
    },

  },
}
</script>

<style lang="less" scoped>
.main {
  height: 100%;
  width: 100%;

  .main-head {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #E6EDFF;
    padding: 0 50px;
    box-sizing: border-box;
    height: 60px;

    .logo {
      // background: url('../../assets/logo-icon.png') no-repeat center center;
      // background-size: 100% 100%;
      width: 110px;
      height: 34px;
      margin-top: 13px;
    }

    .right {
      margin-top: 14px;

      .icon-ball {
        font-size: 16px;
        margin-right: 28px;
      }

      .icon-user {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        margin-right: 12px;
      }

    }
  }

  .main-con {
    display: flex;

    .main-menu {
      width: 285px;
      text-align: left;

      .ant-menu-inline .ant-menu-item {
        padding-left: 58px !important;
      }
    }

    .main-con-right {
      flex: 1;
    }
  }
}
</style>
