<template>
  <div class="Header">
    <div class="H_content flex">
      <div class="cc flex">
        <div class="image">
          <img src="@/assets/img/南开logo@2x.png" alt="" />
        </div>
        <div class="right">
          <el-dropdown @command="handleCommand">
            <span 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>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
import { logout } from "r/index/login";
export default {
  name: "Header",
  data() {
    return {
      phone: window.localStorage.getItem("phone"),
    };
  },
  methods: {
    handleCommand(command) {
      if (command == 1) {
        this.logout();
      }
    },
    //  退出
    async logout() {
      const confirmResult = await this.$confirm(`确认退出登录？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
        type: "warning",
      }).catch((err) => err);
      if (confirmResult !== "confirm")
        return this.$message.info("您取消了退出");

      await logout({});
      // if (res.code !== 200) return this.$message.error(res.message);
      // 清除本地的 token
      window.localStorage.clear();
      this.$store.state.token = "";
      // 使用编程式导航跳转到登录页面
      this.$router.replace({ name: "index-login" });
    },
  },
};
</script>
<style  lang="scss" scoped>
.flex {
  display: flex;
}
.Header {
  font-family: PingFangSC-Medium, PingFang SC;
  height: 80px;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12);
  .H_content {
    justify-content: center;
    .cc {
      width: 100%;
      justify-content: space-around;
      align-items: center;
      div {
        flex-direction: column;
      }
    }
  }

  .image img {
    width: 318px;
    height: 62px;
  }
  .right {
    .el-dropdown {
      float: right;
      &:hover {
        cursor: pointer;
      }
      .img_user {
        width: 34px;
        height: 34px;
        background-color: #d8d8d8;
        border-radius: 50%;
        float: left;
        margin: 15px 0 0 0;
      }
      .phone {
        margin: 0 10px 0 12px;
      }
    }
  }
  ::v-deep .el-dropdown-menu__item {
    min-width: 124px !important;
  }
  ::v-deep .el-dropdown-item {
    display: inline-block;
  }

  ::v-deep .el-dropdown-menu__item:hover {
    color: #ffffff;
    background-color: #563279;
  }

  ::v-deep .el-message-box {
    width: 1000px !important;
    .el-message-box__header {
      .el-message-box__title {
        color: red !important;
      }
    }
    .el-button--primary {
      color: #fff;
      background-color: #563279;
      border-color: #563279;
    }
  }
}
</style>
