<template>
  <div style="width: 100%;height: 100%;">
    <Menu class="menu" mode="horizontal" theme="primary" active-name="1">
      <MenuItem name="1" to="/h5/index">
        <Icon type="ios-home" />
        首页
      </MenuItem>
      <MenuItem name="2" to="/h5/form">
        <Icon type="ios-paper" />
        我的填报
      </MenuItem>
      <div class="right-menu">
        <el-dropdown class="avatar-container" trigger="click">
          <div class="avatar-wrapper">
            <p>{{ $store.state.user.info_h5.name }}</p>
            <i class="el-icon-caret-bottom" />
          </div>
          <el-dropdown-menu slot="dropdown" class="user-dropdown">
            <el-dropdown-item @click.native="logout">
              <span style="display:block;">退出</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!--      <Submenu name="3">-->
      <!--        <template slot="title">-->
      <!--          <Icon type="ios-stats" />-->
      <!--          统计分析-->
      <!--        </template>-->
      <!--        <MenuGroup title="使用">-->
      <!--          <MenuItem name="3-1">新增和启动</MenuItem>-->
      <!--          <MenuItem name="3-2">活跃分析</MenuItem>-->
      <!--          <MenuItem name="3-3">时段分析</MenuItem>-->
      <!--        </MenuGroup>-->
      <!--        <MenuGroup title="留存">-->
      <!--          <MenuItem name="3-4">用户留存</MenuItem>-->
      <!--          <MenuItem name="3-5">流失用户</MenuItem>-->
      <!--        </MenuGroup>-->
      <!--      </Submenu>-->
      <!--      <MenuItem name="4">-->
      <!--        <Icon type="ios-construct" />-->
      <!--        综合设置-->
      <!--      </MenuItem>-->
    </Menu>

    <section class="app-main__h5">
      <transition name="fade-transform" mode="out-in">
        <router-view :key="key" />
      </transition>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$router.push(`/h5/login?redirect=${this.$route.fullPath}`)
    }
  },
  computed: {
    key() {
      return this.$route.path
    }
  },
}
</script>

<style scoped lang="scss">
.menu {
  display: flex;
  justify-content: center;
  filter: drop-shadow(0 2px 6px #00000055);
}

::v-deep .ivu-menu-horizontal .ivu-menu-item:hover{
  background: rgb(136, 32, 23);
}

.right-menu {
  height: 100%;
  line-height: 50px;

  transform: translateY(calc(-50% + 4px));
  position: absolute;
  right: 40px;
  top: 50%;

  &:focus {
    outline: none;
  }

  .right-menu-item {
    display: inline-block;
    padding: 0 8px;
    height: 100%;
    font-size: 18px;
    color: #fff;
    vertical-align: text-bottom;

    &.hover-effect {
      cursor: pointer;
      transition: background .3s;

      &:hover {
        background: rgba(0, 0, 0, .025)
      }
    }
  }

  .avatar-container {
    height: 100%;

    .avatar-wrapper {
      color: #fff;
      position: relative;

      .user-avatar {
        cursor: pointer;
        width: 40px;
        height: 40px;
        border-radius: 10px;
      }

      .el-icon-caret-bottom {
        cursor: pointer;
        position: absolute;
        right: -20px;
        top: 25px;
        font-size: 12px;
      }
    }
  }
}


.app-main__h5 {
  width: 100%;
  height: calc(100% - 60px);
}
</style>
