<template>
  <div class="head-index">
    <img class="logo" :src="iconUrl" @click="toHome" />{{$store.state.userName}}
    <div class="fl-r">
      <!-- <el-button round size="mini" class="edit-btn"  @click="dialogUpdate=true">修改密码 </el-button> -->
      <el-dropdown>
        <el-button round size="mini" class="edit-btn">工具管理
          <i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="linkObj.show=true">生成工具</el-dropdown-item>
          <el-dropdown-item @click.native="userObj.show=true">清除缓存</el-dropdown-item>
          <el-dropdown-item @click.native="dialogUpdate=true">修改密码</el-dropdown-item>
          <el-dropdown-item @click.native="logOut">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-dialog title="修改密码" :visible.sync="dialogUpdate" center width="400px">
      <el-form ref="ruleForm2" label-width="80px" :model="ruleForm2" :rules="rules2">
        <el-form-item label="原密码" prop="oldPass">
          <el-input type="password" v-model="ruleForm2.oldPass"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="pass">
          <el-input type="password" v-model="ruleForm2.pass"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="ruleForm2.checkPass"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogUpdate = false">取 消</el-button>
        <el-button type="primary" @click="changePass">确 定</el-button>
      </span>
    </el-dialog>

    <clear-cache :userObj="userObj" />
    <get-link :linkObj="linkObj" />
  </div>
</template>
<script>
import clearCache from "./other/clearCache";
import getLink from "./other/getLink";
import { logoutApi, editAdminPasswordApi } from "../../service/api";
import iconUrl from "../../assets/logos.png";
import cookie from "../../util/cookie";
import md5 from "js-md5";
export default {
  name: "headIndex",
  data() {
    var validateOldPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else {
        if (this.ruleForm2.checkPass !== "") {
          this.$refs.ruleForm2.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm2.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      userObj: {
        title: "清除缓存",
        show: false
      },
      linkObj: {
        title: "生成工具",
        show: false
      },
      iconUrl: iconUrl,
      dialogUpdate: false,
      rules2: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        oldPass: [{ validator: validateOldPass, trigger: "blur" }]
      },
      ruleForm2: {
        oldPass: "",
        checkPass: "",
        pass: ""
      }
    };
  },
  components: {
    clearCache,
    getLink
  },
  methods: {
    logOut() {
      this.$confirm("确定退出系统?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          logoutApi().then(() => {
            cookie.delete("cc_token");
            this.$store.dispatch("setToken", "");
            this.$store.dispatch("setUserName", "");
            window.location.href = "/#/login";
          });
        })
        .catch(() => {});
    },
    changePass() {
      this.$refs["ruleForm2"].validate(valid => {
        if (valid) {
          let json = {
            passwd_new: md5(this.ruleForm2.pass),
            passwd_old: md5(this.ruleForm2.oldPass)
          };
          editAdminPasswordApi(json).then(res => {
            this.$alert("修改成功,请重新登录", "成功", {
              confirmButtonText: "确定",
              callback: action => {
                logoutApi().then(() => {
                  cookie.delete("cc_token");
                  this.$store.dispatch("setToken", "");
                  this.$store.dispatch("setUserName", "");
                  window.location.href = "/#/login";
                });
              }
            });
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    toHome() {
      this.$router.push({ name: "first" });
    }
  }
};
</script>

<style scoped lang="less">
@import "../../util/public";
.head-index {
  height: 100%;
  line-height: 60px;
  .logo {
    height: 50px;
    vertical-align: middle;
    margin-right: 20px;
    position: relative;
    top: -5px;
  }
}
.btn-div {
  text-align: center;
}
.edit-btn {
  margin-left: 10px;
}
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>