<template>
  <common-header />
  <div class="content">
    <div class="main">
      <div class="header">
        <div>修改密码</div>
      </div>
      <div class="formContent" v-loading="loading">
        <el-form :model="formline" ref="formline" :rules="rules" size="large" label-position="top" class="demo-ruleForm" v-if="!loading">

          <el-form-item label="原始密码" prop="user_password_old">
            <el-input v-model="formline.user_password_old" placeholder="请输入原始密码" show-password />
          </el-form-item>
          <el-form-item label="新密码" prop="user_password_new">
            <el-input v-model="formline.user_password_new" placeholder="请输入新密码" show-password />
          </el-form-item>
          <el-form-item label="确认新密码" prop="commitPwd">
            <el-input v-model="formline.commitPwd" placeholder="请确认新密码" show-password />
          </el-form-item>

          <el-form-item>
            <div class="btnDiv">
              <el-button type="primary" @click="submitForm('formline')">修 改</el-button>
              <el-button @click="goBack()">关 闭</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { modify_pwd } from "./api";
import CommonHeader from "@/components/CommonHeader/index.vue";
export default {
  name: "index",
  components: {
    CommonHeader,
  },
  data() {
    return {
      https: window.GLOBAL_CONFIG.api,
      wholeData: {},
      formline: {
        user_password_old: "",
        user_password_new: "",
        commitPwd: "",
      },
      user_id: "",
      rules: {
        user_password_old: [
          { required: true, message: "请输入原始密码", trigger: "submit" },
        ],
        user_password_new: [
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
        commitPwd: [
          { required: true, message: "请确认新密码", trigger: "blur" },
        ],

        loading: true,
      },
    }

  },
  methods: {
    modifyPwd() {
      let data = {
        user_id: this.$route.query.id,
      };

      modify_pwd(data).then((res) => {
        if (res.code == 1) {
          this.wholeData = res.data;
          for (let key in this.formline) {
            this.formline[key] = res.data[key];
          }

          this.loading = false;
        }
      });
    },
    goBack() {
      this.$router.go(-1);
    },
    // 提交
    submitForm(formName) {
      var reg_pwd = /(?=.*[a-z_])(?=.*\d)(?=.*[^a-z0-9_])[\S]{8,}/i;
      // var reg_pwd = /^(?![0-9]+$)(?![a-zA-Z]+$)(?=.*?[#?!@$?%^&*-])[0-9A-Za-z]{8,}$/
      if (this.formline.user_password_old == this.formline.user_password_new) {
        return this.$message.error("新旧密码不能一样");
      } else if (
        this.formline.commitPwd !== this.formline.user_password_new
      ) {
        return this.$message.error("两次新密码不一致，请修改");
      }
      if (this.formline.user_name == this.formline.user_password_new) {
        return this.$message.error("用户名和密码不能相同");
      }
      if (!reg_pwd.test(this.formline.user_password_new)) {
        // return this.$message.error("密码必须是8位以上的数字字母混合,允许密码包含特殊符号");
      }
      let id = this.$route.query.id;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            user_password_new: this.formline.user_password_new,
            user_password_old: this.formline.user_password_old,
          };
          Object.assign(data, { user_id: id });
          modify_pwd(data).then((res) => {
            if (res.code == 1) {
              this.$message({
                message: "修改成功！",
                type: "success",
              });
              window.localStorage.removeItem('userInfo')
              setTimeout(() => {
                window.location.href = '/'
              }, 1200)

            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          });
        }
      });
    },

  },
  mounted() {
    this.modifyPwd();
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  min-width: 1400px;
  margin: 0 auto;
  background-image: url("@/assets/img/zhjy/xq_bg.png");
  background-repeat: no-repeat;
}
.main {
  width: 1400px;
  margin: 0 auto;
  background: #fcfeff;
  padding: 40px;
  margin-top: 15px;
  background: #fcfeff;
  border-radius: 10px;
  box-shadow: 0px 10px 24px 0px rgba(161, 153, 168, 0.18);
}
.header {
  margin-bottom: 30px;
  .title {
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: center;
    color: #050026;
  }
  .pwd {
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-decoration: underline;
    text-align: center;
    color: #00a3ff;
  }
}
.formContent {
  width: 575px;
  margin: auto;
  .el-form-item::v-deep {
    &.is-required {
      .el-form-item__label {
        &::before {
          display: none;
        }
        &::after {
          content: "*";
          color: #f35421;
          margin-left: 4px;
        }
      }
    }
    .el-form-item__label {
      color: #949494;
      font-size: 14px;
      position: relative;
    }
    .el-form-item__content {
      .el-select {
        width: 100%;
      }
      .el-input {
        width: 100%;
        .el-input__wrapper {
          width: 100%;
          box-shadow: none;
          background: #f9f9f9;
          border-radius: 6px;
        }
      }
      .el-textarea {
        .el-textarea__inner {
          box-shadow: none;
          background: #f9f9f9;
          border-radius: 6px;
          // color: #d0d0d0;
        }
      }
      // .el-checkbox.read {
      //   .el-checkbox__inner {
      //     border-radius: 50%;
      //   }
      // }
      .el-input__inner {
        // color: #d0d0d0;
      }
    }
  }
  .must {
    display: flex;
    align-items: center;
    margin-bottom: 22px;
    .label {
      color: #949494;
      font-size: 14px;
      margin-right: 15px;
      &::after {
        content: "*";
        color: #f35421;
        margin-left: 4px;
      }
    }
    .uploadDiv::v-deep {
      flex: 1;
      .el-upload--picture-card {
        width: 96px;
        height: 96px;
        border-radius: 50%;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .el-upload-list--picture-card .el-upload-list__item {
        display: none;
      }
    }
  }
  .btnDiv {
    text-align: center;
    width: 100%;
    .el-button {
      background: #f4f4f4;
      border: none;
      width: 160px;
      height: 50px;
      color: #41387f;
      font-family: PingFangSC, PingFangSC-Semibold;
    }
    .el-button--primary {
      background: #00a3ff;
      margin-right: 80px;
      color: #fff;
    }
  }
}
</style>

