<template>
  <div class="Header">
    <div class="H_content com-container">
      <div class="image">
        <img src="../../assets/img/logo_base.png" alt=""/>
      </div>
      <div class="right">
        <el-menu :default-active="$store.state.activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="/home">首页</el-menu-item>
          <el-menu-item index="/active">活动中心</el-menu-item>
        </el-menu>
        <div class="noLogin" v-if="!isLogin">
          <span
            @mouseenter="onMouserEnter(false)"
            :class="isHover ? '' : 'is-hover'"
            @click="toLogin"
          >登录 | 注册</span>
<!--          <span-->
<!--            @mouseenter="onMouserEnter(true)"-->
<!--            :class="isHover ? 'is-hover' : ''"-->
<!--            @click="toRegister"-->
<!--          > 注册</span>-->
        </div>
        <div class="alreadyLogin" v-else>
          <el-dropdown @command="handleCommand" trigger="click">
            <div class="el-dropdown-link">
              <img src="@/assets/img/default.svg" class="img_user"/>
              <span class="phone">{{ phone }}</span>
              <i class="el-icon-arrow-down el-icon--right"></i>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1" @click="toCenter">
                <i class="el-icon-user"></i>个人中心
              </el-dropdown-item>
              <el-dropdown-item command="2" @click="logout">
                <i class="el-icon-switch-button"></i>退出
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {logout} from "r/index/login";

  export default {
    name: "Header",
    data() {
      return {
        isHover: true,
        isLogin: false,
        phone: '',
      };
    },
    created() {
      this.isLogin = !!localStorage.getItem("index-token-all");
      this.phone = localStorage.getItem("index-phone-all") || "";
    },
    methods: {
      // 导航栏操作
      handleSelect(key, keyPath) {
        this.$router.push(key);
      },
      // 下拉菜单操作
      handleCommand(command) {
        if (command == 2) {
          this.logout();
        }
        if (command == 1) {
          this.toCenter();
        }
      },
      // 去个人中心
      toCenter() {
        this.$router.replace("/signUpList");
      },
      // 去注册
      toRegister() {
        this.$router.push("/baseRegister" );
      },
      // 去登录页
      toLogin() {
        this.$router.push("/baseLogin");
      },
      // 退出登录
      async logout() {
        const confirmResult = await this.$confirm(`确认退出登录？`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          closeOnClickModal: false,
          type: "warning",
        }).catch((err) => err);
        if (confirmResult !== "confirm") {
          return this.$message.info("您取消了退出");
        }

        // 清除所有缓存
        window.localStorage.clear();
        this.isLogin = false;
        this.$message.success('退出成功');
        await logout({});

      },
      onMouserEnter(val) {
        this.isHover = val;
      },
    },
  };
</script>
<style lang="scss" scoped>
  @import "a/scss/common";

  .Header {
    font-family: PingFang SC;
    height: 80px;
    background-color: #ffffff;
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12);

    .H_content {
      height: 100%;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;

      .image img {
        // width: 318px;
        height: 62px;
      }

      .right {
        display: flex;
        flex-flow: row;
        align-items: center;

        ::v-deep .el-menu {
          margin-right: 100px;
          border: 0;

          .el-menu-item {
            height: 44px;
            line-height: 44px;
            padding: 0 5px;
            margin: 18px 20px;
            color: #666666;
            font-size: 15px;
            font-family: "PingFang SC";

            &:hover {
              font-weight: bold;
              color: var(--all_color);
            }

            &.is-active {
              font-weight: bold;
              color: var(--all_color);
              border-bottom-width: 3px;
              border-bottom-color: var(--all_color);
            }
          }
        }

        .noLogin {
          flex: 1;

          span {
            font-size: 15px;
            font-weight: 500;
            color: #666666;
            line-height: 21px;
            padding: 10px 36px;
            border-radius: 4px;
            border: 2px solid transparent;

            &:last-child {
              margin-left: 10px;
            }

            &.is-hover {
              cursor: pointer;
              color: var(--all_color);
              border-color: var(--all_color);
            }
          }
        }

        .alreadyLogin {
          flex: 1;

          span {
            padding: 0 !important;
          }

          ::v-deep .el-dropdown {
            height: 80px;

            .el-dropdown-link {
              height: 80px;
              display: flex;
              flex-flow: row;
              align-items: center;

              .img_user {
                width: 34px;
                height: 34px;
                background-color: #d8d8d8;
                border-radius: 50%;
              }

              .phone {
                margin: 0 10px 0 12px;
              }
            }

            &:hover {
              cursor: pointer;
            }
          }
        }
      }
    }
  }
</style>
