<template>
  <div class="common-box">
    <!-- 我的信息 -->
    <el-tabs v-model="activeInfoName">
      <!-- 个人信息 -->
      <el-tab-pane label="个人信息" name="info">
        <el-form
          ref="dataForm"
          :rules="rules"
          :model="temp1"
          label-width="237px"
          class="grid-form-class"
        >
          <div class="form-body">
            <div class="flex-css">
              <el-form-item label="用户编码：" prop="loginId">
                <el-input v-model.trim="temp1.loginId" readonly></el-input>
              </el-form-item>
            </div>
            <div class="flex-css">
              <el-form-item label="用户名：" prop="userName">
                <el-input
                  placeholder="请输入用户名"
                  v-model.trim="temp1.userName"
                ></el-input>
              </el-form-item>
            </div>
            <div class="flex-css">
              <el-form-item label="联系方式：" prop="coninfo">
                <el-input
                  v-model.trim="temp1.coninfo"
                  placeholder="请输入联系方式"
                ></el-input>
              </el-form-item>
            </div>
            <div class="flex-css">
              <el-form-item label="邮箱号：" prop="email">
                <el-input
                  v-model.trim="temp1.email"
                  maxlength="40"
                  placeholder="请输入邮箱号"
                ></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form>

        <div class="foot-button" style="margin-top: 20px">
          <el-button type="primary" @click="handleClick()">提交</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="修改密码" name="fixPass">
        <el-form
          label-width="237px"
          class="grid-form-class"
          :model="form"
          :rules="passRules"
          ref="Form"
        >
          <div class="form-body">
            <div class="flex-css">
              <el-form-item label="原始密码" prop="initPwd">
                <el-input
                  v-model.trim="form.initPwd"
                  type="password"
                  placeholder="请输入原始密码"
                  :show-password="isshow"
                ></el-input>
              </el-form-item>
            </div>
            <div class="flex-css">
              <el-form-item label="新密码" prop="newPwd">
                <el-input
                  v-model.trim="form.newPwd"
                  type="password"
                  placeholder="请输入新密码"
                  :show-password="isshow"
                ></el-input>
              </el-form-item>
            </div>
            <div class="flex-css">
              <el-form-item label="确认新密码" prop="surePwd">
                <el-input
                  v-model.trim="form.surePwd"
                  type="password"
                  :show-password="isshow"
                  placeholder="请确认新密码"
                ></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form>
        <div class="foot-button" style="margin-top: 20px">
          <el-button type="primary" @click="handleSubmit">提交</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getInfo, QueryUserInfo, UserCentUpdt, fixdata } from "@/api/user";
import md5 from "md5";
import sha1 from "js-sha1";
export default {
  data() {
    var validatePass = async (rules, value, callback) => {
      const reg =
        /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*.\/,;'])[\da-zA-Z~!@#$%^&*.\/,;']{8,16}$/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error("必须包含数字、英文字母、特殊符号且8-16位"));
      }
    };
    var validatenewPass = async (rules, value, callback) => {
      const reg =
        /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[~!@#$%^&*.\/,;'])[\da-zA-Z~!@#$%^&*.\/,;']{8,16}$/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error("必须包含数字、英文字母、特殊符号且8-16位"));
      }
    };
    var validatesurePass = (rules, value, callback) => {
      if (value === this.form.newPwd) {
        callback();
      } else {
        callback(new Error("请保持两次输入一致"));
      }
    };
    return {
      // 个人信息的状态
      activeInfoName: "info",
      // 个人信息
      temp1: {
        userName: "",
        loginId: "",
        gend: "",
        coninfo: "",
        email: ""
      },
      rules: {
        userName: [
          {
            required: true,
            message: "用户名称不能为空",
            trigger: "blur"
          },
          {
            min: 2,
            max: 20,
            message: "用户名称长度必须介于 2 和 20 之间",
            trigger: "blur"
          }
        ],
        email: [
          {
            required: true,
            message: "邮箱不能为空",
            trigger: "blur"
          },
          {
            pattern: /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,
            message: "请输入正确的邮箱格式",
            trigger: "blur"
          }
        ],
        gend: [
          {
            required: false,
            message: "性别不能为空",
            trigger: "change"
          }
        ],
        coninfo: [
          {
            required: true,
            message: "联系方式不能为空",
            trigger: "blur"
          },
          {
            pattern: /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/,
            message: "请输入正确的格式",
            trigger: "blur"
          }
        ]
      },
      // 修改密码
      loginId: "",
      isshow: true,
      form: {},
      passRules: {
        initPwd: [
          {
            required: true,
            message: "请输入原始密码",
            trigger: "blur"
          },
          {
            validator: validatePass,
            trigger: "blur"
          }
        ],
        newPwd: [
          {
            required: true,
            message: "请输入新密码",
            trigger: "blur"
          },
          {
            validator: validatenewPass,
            trigger: "blur"
          }
        ],
        surePwd: [
          {
            required: true,
            message: "请确认新密码",
            trigger: "blur"
          },
          {
            validator: validatesurePass,
            trigger: "blur"
          }
        ]
      },
      yspass: "",
      newpass: "",
      surenewpass: ""
    };
  },

  created() {
    this.getInfoList();
  },

  methods: {
    handleSubmit() {
      this.$refs["Form"].validate((valid) => {
        if (valid) {
          this.$confirm("确认提交", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            if (this.form.initPwd) {
              this.yspass = this.form.initPwd;
              this.form.initPwd = md5(
                sha1(this.form.initPwd).toUpperCase()
              ).toUpperCase();
            }
            if (this.form.newPwd) {
              this.newpass = this.form.newPwd;
              this.form.newPwd = md5(
                sha1(this.form.newPwd).toUpperCase()
              ).toUpperCase();
            }
            if (this.form.surePwd) {
              this.surenewpass = this.form.surePwd;
              this.form.surePwd = md5(
                sha1(this.form.surePwd).toUpperCase()
              ).toUpperCase();
            }
            fixdata(this.form)
              .then((res) => {
                if (res.success == true) {
                  this.$message.success("修改密码成功");
                  this.form = {};
                  let aa = this.$store.getters.visitedViews;
                  let bb = this.$route.path;
                  let view = aa.filter(function (obj) {
                    return obj.path == bb;
                  });
                  this.$store.dispatch("tagsView/delView", view[0]);
                  this.$router.replace({ name: "Dashboard" });
                } else {
                  this.$message.error("修改密码失败");
                }
              })
              .catch(() => {
                this.form.initPwd = this.yspass;
                this.form.newPwd = this.newpass;
                this.form.surePwd = this.surenewpass;
              });
          });
        }
      });
    },
    // 获取个人信息列表
    getInfoList() {
      getInfo().then((response) => {
        let data = response.data.userContext;
        this.temp1.loginId = data.loginId;
        QueryUserInfo({ id: data.loginId }).then((res) => {
          this.temp1.userName = res.data.userName;
          this.temp1.gend = res.data.gend;
          this.temp1.coninfo = res.data.coninfo;
          this.temp1.email = res.data.email;
        });
      });
    },
    // 提交
    handleClick() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.$confirm("确认提交", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            UserCentUpdt(this.temp1)
              .then((res) => {
                this.$message.success("修改成功");
                localStorage.clear();
                this.$store.dispatch("user/resetToken");
                this.$router.push(`/login`);
              })
              .catch((e) => {});
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
