<template>
  <div>
    <div class="hander">
      <div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>镇江管理后台</el-breadcrumb-item>
          <el-breadcrumb-item v-for="(item, index) in $route.meta" :key="index">
            {{ item }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="header-right">
        <el-avatar :src="squareUrl" :size="32"></el-avatar>
        <el-dropdown style="cursor: pointer;" trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            {{ username ? username : '用户' }}<i class="el-icon-caret-bottom el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="2">修改密码</el-dropdown-item>
            <el-dropdown-item command="1">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="content">
      <transition name="fade" mode="out-in">
        <router-view></router-view>
      </transition>
    </div>
    <el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item label="登录名" prop="loginName">
          <el-input v-model="ruleForm.loginName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="旧密码" prop="oldPass">
          <el-input v-model="ruleForm.oldPass"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPass">
          <el-input v-model="ruleForm.newPass"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { updatePassword } from "@/api/login";
export default {
  data() {
    return {
      username: "",
      dialogVisible: false,
      ruleForm: {
        loginName: localStorage.getItem('userName'),
        newPass: "",
        oldPass: "",
      },
      rules: {
        loginName: [
          { required: true, message: "请输入登录名", trigger: "blur" },
        ],
        newPass: [{ required: true, message: "请输入新密码", trigger: "blur" }],
        oldPass: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
      },
      squareUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01786557e4a6fa0000018c1bf080ca.png%401280w_1l_2o_100sh.png&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665133618&t=fde98110388a533f98b861b95969e91d"
    };
  },
  watch: {
    $route: {
      immediate: true,
      deep: true,
      handler(val) {
        val.meta[1] = localStorage.getItem('menuName')
      },
    },
  },
  methods: {
    handleCommand(command) {
      if (command == 1) {
        this.$confirm("确认退出登录?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          window.localStorage.clear();
          this.$router.push("/login");
          this.$message({
            type: "success",
            message: "退出成功!",
          });
        });
      } else {
        this.dialogVisible = true;
      }
    },
    // 取消
    handleClose() {
      this.ruleForm = {
        loginName: localStorage.getItem('userName'),
        newPass: "",
        oldPass: "",
      }
      this.dialogVisible = false;
    },
    // 提交
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(valid)
          console.log(this.ruleForm)
          updatePassword({ oldPassword: this.ruleForm.oldPass, newPassword: this.ruleForm.newPass }).then((res) => {
            console.log(res)
            if (res.success) {
              this.$message({
                type: "success",
                message: "修改密码成功，请重新登录!"
              })
              window.localStorage.clear();
              this.$router.push("/login");
            } else {
              this.$message({
                type: "error",
                message: res.msg || '修改密码失败，请联系管理员!',
              });
            }
          })
        }
      });
    },
  },
  created() {
    this.username = localStorage.getItem("userName");
  },
};
</script>
<style>
.el-breadcrumb__inner,
.el-breadcrumb__separator,
.el-breadcrumb__separator,
.el-dropdown-link,
.el-dropdown-selfdefine,
.el-avatar,
.el-avatar--icon,
.el-avatar--circle {
  color: #fff !important;
  font-size: 16px;
}
</style>
<style lang="stylus" scoped>
.hander {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 55px;
  border-bottom: 1px solid #ccc;
  background #4885ff;
  .el-avatar {
    width: 35px;
    height: 35px;
    margin-right: 10px;
  }
  .header-right {
    display: flex;
    align-items: center;
    .open {
      margin-right: 30px;
      font-size: 14px;
      color: #ff600f;
      cursor: pointer;
    }
  }
}
.content {
  padding: 20px;

  .fade-enter {
    opacity: 0;
  }
  .fade-enter-active {
    transition: opacity 1s;
  }
}
</style>
