<template>
  <div class="login">
      <div class="login-bar">
          <div class="form-bar">
              <h3 class="title">请重置登录密码</h3>
              <el-form
                  ref="form"
                  :model="user"
                  :rules="rules"
              >
                  <el-form-item label="旧密码" prop="oldPassword">
                      <el-input
                          v-model="user.oldPassword"
                          placeholder="请输入旧密码"
                          type="password"
                          show-password
                      />
                  </el-form-item>
                  <el-form-item label="新密码" prop="newPassword">
                      <el-input
                          v-model="user.newPassword"
                          placeholder="请输入新密码"
                          type="password"
                          show-password
                      />
                  </el-form-item>
                  <el-form-item label="确认密码" prop="confirmPassword">
                      <el-input
                          v-model="user.confirmPassword"
                          placeholder="请确认新密码"
                          type="password"
                          show-password
                      />
                  </el-form-item>
                  <el-form-item>
                      <el-button type="primary" style="width: 48.5%;" @click="submit"
                          >确认修改</el-button
                      >
                      <el-button style="width: 48.5%;" @click="close">返回登录页</el-button>
                  </el-form-item>
              </el-form>
          </div>
      </div>
  </div>
</template>

<script>
  import { updateUserPwd } from '@/api/system/user'
  import { validPassword } from '@/utils/validate'

  export default {
      data() {
          const passwordRegex = (rule, value, callback) => {
              if (value.length < 8 || value.length > 20) {
                  callback(new Error('密码长度在 8 到 20 个字符'))
              } else if (!validPassword(value)) {
                  callback(
                      new Error('密码须包含数字、字母、特殊符号中的两种以上'),
                  )
              } else if (this.user.oldPassword === value) {
                  callback(new Error('新密码不能与旧密码相同'))
              } else {
                  callback()
              }
          }
          const equalToPassword = (rule, value, callback) => {
              if (this.user.newPassword !== value) {
                  callback(new Error('两次输入的密码不一致'))
              } else {
                  callback()
              }
          }
          return {
              user: {
                  oldPassword: undefined,
                  newPassword: undefined,
                  confirmPassword: undefined,
              },
              // 表单校验
              rules: {
                  oldPassword: [
                      {
                          required: true,
                          message: '旧密码不能为空',
                          trigger: 'blur',
                      },
                  ],
                  newPassword: [
                      {
                          required: true,
                          message: '新密码不能为空',
                          trigger: 'blur',
                      },
                      {
                          required: true,
                          validator: passwordRegex,
                          trigger: 'blur',
                      },
                  ],
                  confirmPassword: [
                      {
                          required: true,
                          message: '确认密码不能为空',
                          trigger: 'blur',
                      },
                      {
                          required: true,
                          validator: equalToPassword,
                          trigger: 'blur',
                      },
                  ],
              },
          }
      },
      methods: {
          submit() {
              this.$refs['form'].validate((valid) => {
                  if (valid) {
                      updateUserPwd(
                          this.user.oldPassword,
                          this.user.newPassword,
                      ).then((response) => {
                          this.$modal.msgSuccess('修改成功')
                          // 进入首页
                          this.$store.dispatch('LogOut').then(() => {
                              // location.href = '/login';
                              // location.href = '/gl/login';

                              location.href =
                                  process.env.NODE_ENV === 'production-nw'
                                      ? '/gl/login'
                                      : '/login'
                          })
                      })
                  }
              })
          },
          close() {
              this.$store.dispatch('LogOut').then(() => {
                  // location.href = '/login';
                  // location.href = '/gl/login';

                  location.href =
                      process.env.NODE_ENV === 'production-nw'
                          ? '/gl/login'
                          : '/login'
              })
          },
      },
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  .login {
      //display: flex;
      //justify-content: center;
      //align-items: center;
      position: relative;
      height: 100%;
      background-image: url('../assets/images/login.png');
      background-size: 100% 100%;
      //background: #1891FF;
  }

  .title {
      margin: 0px auto 30px auto;
      //text-align: center;
      color: #707070;
  }

  .login-bar {
      position: absolute;
      height: auto;
      top: 20%;
      left: 14%;
      width: auto;
      height: 500px;
      border-radius: 6px;
      display: flex;
      background: #fff;
      text-align: center;
      padding-top: 40px;
  }

  .form-bar {
      //height: 500px;
      width: 360px;
      background: #fff;
  }

  .login-form {
      //border-radius: 6px;
      //height: 100%;
      background: #ffffff;
      width: 400px;
      padding: 25px 25px 5px 25px;

      .el-input {
          height: 45px;

          input {
              height: 38px;
          }
      }

      .input-icon {
          height: 39px;
          width: 14px;
          margin-left: 2px;
      }
  }

  .login-tip {
      font-size: 13px;
      text-align: center;
      color: #bfbfbf;
  }

  .login-code {
      width: 33%;
      height: 38px;
      float: right;

      img {
          cursor: pointer;
          vertical-align: middle;
      }
  }

  .el-login-footer {
      height: 40px;
      line-height: 40px;
      position: fixed;
      bottom: 0;
      width: 100%;
      text-align: center;
      color: #fff;
      font-family: Arial;
      font-size: 12px;
      letter-spacing: 1px;
  }

  .login-code-img {
      height: 38px;
  }
</style>
