<template>
  <div>
    <div id="header">
      <div class="box">
        <div class="img"><img src="../assets/Logo3.png" /></div>
        <nav>
          <router-link active-class="active" to="/search">找家政</router-link>
          <!--  <router-link active-class="active" to="/loginView"
            >登录/注册</router-link
          >
          <router-link active-class="active" to="/percent" @click="toPercent"
            >个人中心</router-link
          > -->
          <router-link active-class="active" to="/UserHelp">帮助中心</router-link>
        </nav>
      </div>
      <!-- <div class="box">
        <input class="text" type="text" placeholder="请输入关键词~~~" name="search" v-model="parmas.introduction" />
        <input class="button" type="button" value="搜索" @click="searchServer" />
      </div> -->
      <div class="loginBox">
        <div v-if="!this.isLogin" @click="toLogin">
          <h2>登陆</h2>
        </div>
        <el-dropdown v-if="this.isLogin">
          <span class="el-dropdown-link">
            <img :src="this.avatar" class="avatar" />
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu :class="[selfbutton]">
              <el-dropdown-item :style="listStyle" @click="toPercent">个人中心</el-dropdown-item>
              <el-dropdown-item :class="[selfbutton]" :style="listStyle" @click="convertUserType">切换角色</el-dropdown-item>
              <el-dropdown-item :class="[selfbutton]" :style="listStyle" @click="logOut">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import { userInfo, Logout, checkToken, searchByIntroduction } from "@/api";
import { setCookie, delCookie } from "@/util/cookie";
import { mapMutations } from "vuex";
import popmessage from "@/components/tip/index.js";
export default {
  name: "TheHeader",
  data() {
    return {
      content: '',
      isLogin: false,
      avatar: "",
      isShow: true,
      listStyle: {
        padding: "6px 65px",
      },
      parmas: {
        pageNum: 1,
        pageSize: 5,
        nickName: "",
        salaryOrder: 0,
        categoryName: "不限",
        salary: 0,
        stay: 0,
        userType: 0,
        workArea: "",
        stay: '',
        serverType: "",
        introduction: ''
      },
      selfbutton: "self-button",
    };
  },
  created() {
    this.token = localStorage.getItem("token");
    if (this.token == "" || this.token == null || this.token == "undefined") {
      this.isLogin = false;
    } else {
      checkToken().then((response) => {
        if (response.data.code === 200) {
          userInfo().then((response) => {
            if (response.data.code === 200) {
              this.avatar = response.data.data.avatar;
              setCookie("userId", response.data.data.id);
              this.isLogin = true;
            }
          });
        } else if (response.data.code === 401) {
          this.isLogin = false;
          popmessage({ type: "warning", str: "登录信息错误" });
          this.$router.push("/loginView");
        }else {
          this.isLogin = false;
          popmessage({ type: "warning", str: "未登录" });
          this.$router.push("/loginView");
        }
      });
    }
  },

  methods: {
    ...mapMutations("SearchStore", ["setParmas", "setList", "setTotal"]),
    // 搜索框
    searchServer() {
      this.setParmas(this.parmas);
      let param = {
        introduction: this.parmas.introduction,
        pageSize: this.parmas.pageSize,
        pageNum: this.parmas.pageNum
      }
      searchByIntroduction(param).then((response) => {
        if (response.data.code == 200) {
          this.content = response.data.data.rows;
          this.setTotal(response.data.data.total);
          this.setList(this.content);
          // 跳转路由
          this.$router.push("./search");
        }
      });
    },
    //切换角色（登出并切换登录界面）
    convertUserType() {
      if (window.confirm("切换身份需要登出账号,确定要执行此操作吗？")) {
        // 用户点击了“确定”按钮
        Logout().then((res) => {
          if (res.data.code === 200) {
            localStorage.clear()
            delCookie("userId");
            this.isLogin = false;
            setTimeout(() => {
              this.$router.go(0);
            }, 300);
            popmessage({ type: "success", str: "退出成功" });
            this.$router.push("/loginView");
          }
        });
      } else {
        // 用户点击了“取消”按钮
      }
    },
    toPercent() {
      this.userType = localStorage.getItem("userType");
      if (this.userType == 1) {
        this.$router.push("/percent");
      } else if (this.userType == 2) {
        this.$router.push("/boss_per_cent");
      }
    },
    toLogin() {
      this.$router.push("/loginView");
    },
    logOut() {
      Logout().then(res => {
        if (res.data.code === 200) {
          localStorage.clear()
          delCookie("userId");
          setTimeout(() => {
            this.$router.go(0);
          }, 500);
          popmessage({ type: "success", str: "退出成功" });
          this.$router.replace("/introduce");
          this.isLogin = false;
        }
      })
    },
  },
};
</script>

<style lang="scss" scoped>
#header {
  position: -webkit-sticky;
  position: fixed;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.5rem;
  width: 100%;
  background-color: #40a46f;
  color: #ffffff;
  z-index: 2000;
}

.box {
  display: flex;
  align-items: center;
}

h1 {
  display: flex;
  align-items: center;
  font: normal 1.5556rem Cookie, Arial, Helvetica, sans-serif;
  padding: 0px 1.1111rem;
}

nav {
  display: flex;
  align-items: center;
  word-break: keep-all;
  white-space: nowrap;
  margin: 0px 1.8333rem;
  font: 0.8889rem Arial, Helvetica, sans-serif;
}

nav a {
  padding: 0 0.8333rem;
  width: 3.5rem;
  text-decoration: none;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: normal;
  opacity: 0.9;
}

nav a:hover {
  opacity: 1;
}

.active {
  color: #1b1d21;
  pointer-events: none;
  opacity: 1;
}

.text {
  height: 1.2222rem;
  font-size: 1rem;

  border: 1px solid #ccc;
  padding: 0.1667rem 0.8889rem;
  border-bottom-left-radius: 1.1111rem;
  border-top-left-radius: 1.1111rem;
}

.text:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(82, 168, 236, 0.6);
}

.button {
  width: 3rem;
  height: 1.6667rem;
  font-size: 0.7778rem;
  margin-right: 1.9444rem;
  border: 1px solid #fbce2d;
  background-color: #fbce2d;
  border-top-right-radius: 1.1111rem;
  border-bottom-right-radius: 1.1111rem;
  color: white;
}

img {
  height: 3rem;
  width: 100%;
}

.img {
  margin-left: 1.1111rem;
}

.loginBox h2 {
  font-size: 1.2rem;
  font-weight: 400;
  margin-right: 3rem;
  cursor: pointer;
}

.avatar {
  width: 100%;
  height: 100%;
}

/* 
.loginBox {
  position: relative;
  right: -20rem;
  cursor: pointer;
}

.avatarHead {
  width: 2.5rem;
  height: 2.5rem;
  background: #000000;
  border-radius: 1.5rem;
  overflow: hidden;
}
.list {
  background-color: rgb(93, 170, 100);
  position: relative;
  top: 3.5rem;
  left: 0rem;
}
.list ul {
  padding: 1rem;
  margin: 0;
  list-style: none;
  cursor: pointer;
}
.list ul li {
  padding-bottom: 0.5rem;
} */
.loginBox img {
  width: 100%;
  height: 100%;
}

.el-dropdown-link {
  overflow: hidden;
  width: 3rem;
  height: 3rem;
  border-radius: 2rem;
  margin-right: 2rem;
  background-color: #ccc;
}

.el-dropdown-menu__item {
  display: flex;
  align-items: center;
  white-space: nowrap;
  list-style: none;
  line-height: 22px;
  padding: 5px 56px;
  margin: 0;
  font-size: larger !important;
  color: var(--el-text-color-regular);
  cursor: pointer;
  outline: 0;
}

.self-button {
  font-size: larger !important;
}
</style>
