<template>
  <div class="top">
    <div class="top_wrap">
      <!-- 上层 -->
      <div class="logo_wrap clearfix">
        <!-- logo -->
        <div class="logo">
          <img src="@/assets/img_3.png" alt />
        </div>
        <!-- 公司名称 -->
        <div class="company_name">
          全球移民与置业评估系统
          <!-- International Immigration
          <br />& Asset Allocation Assessed System-->
        </div>
        <!-- 个人信息 -->
        <div class="person_msg clearfix" @mouseenter="showChoice()" @mouseleave="closeChoice()">
          <div class="avatar">
            <img :src="avatar" alt />
          </div>
          <div class="name">{{name}}</div>
          <div class="bot_arrow">
            <img :src="isTop?imgArrow1:imgArrow2" alt />
          </div>
          <!-- 修改密码 退出 -->
          <div class="show_wrap" v-show="!isTop">
            <div class="show_groups">
              <!-- 修改密码 -->
              <div class="change_pwd" @click="dialogPwdVisible = true">更改密码</div>
              <!-- 退出 -->
              <div class="logout" @click="loginOut()">退出</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 修改密码弹窗 -->
      <div class="pwd_dialog">
        <el-dialog :visible.sync="dialogPwdVisible" width="500px">
          <div class="dialog_title_contract">更改密码</div>
          <!-- 输入框 -->
          <div class="input_group">
            <el-form ref="form" :model="form" :rules="rules">
              <el-form-item prop="oldPwd">
                <el-input class="input_single" v-model="form.oldPwd" placeholder="请输入原密码"></el-input>
              </el-form-item>
              <el-form-item prop="newPwd">
                <el-input class="input_single" v-model="form.newPwd" placeholder="请输入新密码"></el-input>
              </el-form-item>
              <el-form-item prop="repeatPwd">
                <el-input class="input_single" v-model="form.repeatPwd" placeholder="请再次输入"></el-input>
              </el-form-item>
            </el-form>
            <div class="pwd_btn layout flex_row justify_around align_center">
              <div class="pwd_l_btn" @click="changePwd('form')">确定</div>
              <div class="pwd_r_btn" @click="dialogPwdVisible = false">取消</div>
            </div>
          </div>
        </el-dialog>
      </div>
      <!-- nav -->
      <div class="nav_wrap">
        <ul class="layout align_left flex_row">
          <li
            @click="choiceNav(index)"
            class="nav_li"
            :class="{active_li:isActive == index}"
            v-for="(item,index) in navList"
            :key="index"
          >{{item}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { Message } from "element-ui";
import { post } from "../../api/http.js";
export default {
  props: ["activeIndex"],
  data() {
    // 旧密码
    var validateOldPass = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入原密码"));
      } else {
        callback();
      }
    };
    // 新密码
    var validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入新密码"));
      } else {
        callback();
      }
    };
    // 确认密码
    var validatePass2 = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请再次输入"));
      } else if (value !== this.form.newPwd) {
        callback(new Error("两次密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      navList: ["首页", "我的客户", "工作报告", "个人中心"],
      // 选中的按钮
      isActive: 0,
      // 个人信息箭头
      isTop: true,
      imgArrow1: require("@/assets/bot.png"),
      imgArrow2: require("@/assets/top.png"),
      // 修改密码弹窗
      dialogPwdVisible: false,
      token: "",
      // 个人信息
      avatar: "",
      name: "",
      // 重置密码
      form: {
        oldPwd: "",
        newPwd: "",
        repeatPwd: ""
      },
      // 验证密码
      rules: {
        oldPwd: [
          {
            required: true,
            validator: validateOldPass,
            trigger: "blur"
          }
        ],
        newPwd: [
          {
            required: true,
            validator: validatePass,
            trigger: "blur"
          }
        ],
        repeatPwd: [
          {
            required: true,
            validator: validatePass2,
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    //   选择nav
    choiceNav(index) {
      this.isActive = index;
      switch (index) {
        case 0:
          this.$router.push({ path: "/index" });
          break;
        case 1:
          this.$router.push({ path: "/myClient" });
          break;
        case 2:
          this.$router.push({ path: "/workReport" });
          break;
        case 3:
          this.$router.push({ path: "/mine" });
          break;
      }
    },
    // 显示弹窗
    showChoice() {
      this.isTop = false;
    },
    // 弹窗消失
    closeChoice() {
      this.isTop = true;
    },
    // 修改密码
    changePwd(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let url = "/api/user/update_password";
          let params = {
            past_password: this.form.oldPwd,
            now_password: this.form.newPwd,
            repeat_password: this.form.repeatPwd
          };
          post(url, params).then(res => {
            this.dialogPwdVisible = true;
            this.$message({
              showClose: true,
              message: "修改成功",
              type: "success"
            });
          });
        }
      });
    },
    // 退出登录
    loginOut() {
      let url = "/api/user/login_out";
      post(url).then(res => {
        this.$message({
          showClose: true,
          message: "退出成功",
          type: "success"
        });
        localStorage.removeItem("token");
        localStorage.removeItem("avatar");
        localStorage.removeItem("type");
        this.$router.push({
          path: "/"
        });
      });
    },
    // 获取个人信息
    getUserInfor() {
      let url = "/api/user/member";
      post(url).then(res => {
        this.avatar = res.avatar;
        this.name = res.name;
        // type 1:业务员 2:代理商
        localStorage.setItem("type", res.type);
      });
    }
  },
  mounted() {
    this.isActive = this.activeIndex;
    this.token = localStorage.getItem("token");
    this.getUserInfor();
  }
};
</script>
<style>
/* 修改密码弹窗 */
.pwd_dialog .el-dialog {
  margin-top: 42vh !important;
}
.pwd_dialog .el-dialog__header {
  display: none;
}
.pwd_dialog .el-dialog__body {
  padding: 0 !important;
}
</style>
<style  scoped>
.top {
  border-bottom: 1px solid #999;
}
/* 内容 */
.top_wrap {
  width: 1200px;
  margin: 0 auto;
  height: 162px;
  position: relative;
}
/* logo */
.logo {
  float: left;
  width: 61px;
  height: 60px;
  margin-top: 26px;
  margin-right: 20px;
}
/* 公司名称 */
.company_name {
  float: left;
  color: #6a6a6a;
  font-size: 22px;
  text-align: left;
  margin-top: 40px;
  line-height: 32px;
}
/* 个人信息 */
.person_msg {
  float: right;
  color: #6a6a6a;
  font-size: 22px;
  margin-top: 13px;
  position: relative;
}
.avatar {
  float: left;
  width: 66px;
  height: 66px;
}
.avatar img {
  border-radius: 50%;
}
.name {
  float: left;
  margin: 22px 20px 0;
}
.bot_arrow {
  float: left;
  width: 23px;
  /* height: 13px; */
  margin-top: 24px;
}
/* 修改密码 退出 */
.show_wrap {
  padding-top: 20px;
  position: absolute;
  left: 0;
  bottom: -145px;
}
.show_groups {
  width: 289px;
  height: 135px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 2px 0px 5px 1px rgba(0, 0, 0, 0.2);
  color: #666;
  font-size: 20px;
}
/* 修改密码 */
.change_pwd {
  width: 100%;
  height: 67px;
  line-height: 67px;
  text-align: center;
  border-bottom: 1px solid #e2e2e2;
}
.change_pwd:hover,
.logout:hover {
  background-color: #526aa6;
  opacity: 0.8;
  color: #fff;
}
.logout {
  width: 100%;
  height: 67px;
  line-height: 67px;
  text-align: center;
}

/* 修改密码弹窗 */
/* 头部 */
.dialog_title_contract {
  color: #fff;
  background-color: #526aa6;
  padding-left: 30px;
  height: 40px;
  line-height: 40px;
  text-align: left;
  font-size: 18px;
}
/* 输入框 */
.input_group {
  padding: 14px 20px;
}
.input_single {
  /* margin-bottom: 25px; */
  font-size: 14px;
}
/* 按钮 */
.pwd_btn {
  margin: 40px auto 15px;
}
.pwd_l_btn {
  width: 120px;
  height: 38px;
  background: rgba(82, 106, 166, 1);
  border-radius: 3px;
  text-align: center;
  line-height: 38px;
  color: #fff;
  font-size: 16px;
}
.pwd_l_btn:hover {
  opacity: 0.8;
}
.pwd_r_btn {
  width: 118px;
  height: 36px;
  border: 1px solid rgba(153, 153, 153, 1);
  border-radius: 3px;
  text-align: center;
  line-height: 38px;
  color: #999;
  font-size: 16px;
}
.pwd_r_btn:hover {
  opacity: 0.8;
  border-color: #526aa6;
}
/* nav */
.nav_wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  /* margin-top: 21px; */
}
.nav_li {
  font-size: 20px;
  color: #333;
  padding: 0 20px 16px;
  border-bottom: 3px solid #fff;
}
.active_li {
  color: #526aa6;
  border-color: #526aa6;
}
</style>