<template>
  <el-container class="full-page">
    <div class="content">
      <!--      <el-header height="50px">
              <h5 class="title">{{ $t('resetPSD.title') }}</h5>
            </el-header>-->
      <el-main>
        <el-form
          :model="pwdForm"
          :rules="pwdRules"
          ref="pwdForm"
          label-width="200px"
          status-icon
          class="pwdForm"
          label-position="top"
        >
          <el-form-item :label="$t('resetPSD.oldPsd') + ':'" prop="old">
            <el-input
              type="password"
              show-password
              :placeholder="$t('common.input')"
              v-model="pwdForm.old"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('resetPSD.newPsd') + ':'" prop="new">
            <el-input
              type="password"
              show-password
              :placeholder="$t('common.input')"
              v-model="pwdForm.new"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('resetPSD.repeat') + ':'"
            prop="newRepeat"
            label-width="120"
          >
            <el-input
              type="password"
              show-password
              :placeholder="$t('common.input')"
              v-model="pwdForm.newRepeat"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="submitForm()"
              :disabled="confirm"
            >{{ $t('common.save') }}
            </el-button
            >
            <el-button @click="back()">{{
                $t('common.cancel')
              }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </div>
  </el-container>
</template>

<script>
import uc from '@/api/uc.js'

export default {
  name: 'ResetPwdView',
  data() {
    const validateNew = (rule, value, callback) => {
      if (value === '') {
        callback(new Error(this.$t('common.input')))
      }
      let re
      let config = this.pwdStrategy
      if (config.enable) {
        let pwdRule = config.pwdRule
        let pwdLength = config.pwdLength
        if (pwdRule) {
          if (value.length < pwdLength) {
            callback(new Error('新密码长度至少为' + pwdLength))
          }
          if (pwdRule === 1) {
            callback()
          } else if (pwdRule === 2) {
            re = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z])')
            if (!re.test(value)) {
              callback(new Error('新密码必须包含数字、字母'))
            } else {
              callback()
            }
          } else if (pwdRule === 3) {
            re = new RegExp(
              '(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9])'
            )
            if (!re.test(value)) {
              callback(
                new Error('新密码必须包含数字、字母、特殊字符')
              )
            } else {
              callback()
            }
          } else if (pwdRule === 4) {
            re = new RegExp(
              '(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^a-zA-Z0-9])'
            )
            if (!re.test(value)) {
              callback(
                new Error(
                  '新密码必须包含数字、大小写字母、特殊字符'
                )
              )
            } else {
              callback()
            }
          } else {
            callback()
          }
        }
      } else {
        if (value.length < 6) {
          callback(new Error(this.$t('resetPSD.length')))
        } else {
          callback()
        }
      }
    }
    const validateold = (rule, value, callback) => {
      if (value === '') {
        callback(new Error(this.$t('common.input')))
      } else {
        callback()
      }
    }
    const validateNewReapeat = (rule, value, callback) => {
      if (value === '') {
        callback(new Error(this.$t('common.input')))
      } else if (value !== this.pwdForm.new) {
        callback(new Error(this.$t('resetPSD.notSame')))
      } else {
        callback()
      }
    }
    return {
      pwdForm: {
        old: '',
        new: '',
        newRepeat: ''
      },
      pwdRules: {
        old: [{validator: validateold, trigger: 'blur'}],
        new: [{validator: validateNew, trigger: 'blur'}],
        newRepeat: [{validator: validateNewReapeat, trigger: 'blur'}]
      },
      pwdStrategy: {},
      account: '',
      confirm: false,
      type: 'settings' // settings 用户主动设置   login 首次登录强制设置
    }
  },
  mounted() {
    console.log(this.$route.params, this.$route.query)
    let account = JSON.parse(sessionStorage.getItem('currentUser')).account
    console.log(account)
    if (account) {
      this.account = account
    }
    uc.getDefaultPwdStrategy().then((data) => {
      if (data) {
        let form = data
        if (form.enable === 1) {
          form.enable = true
        } else {
          form.enable = false
        }
        this.pwdStrategy = form
      }
    })
  },
  methods: {
    submitForm() {
      this.$refs['pwdForm'].validate((valid) => {
        if (valid) {
          if (this.account === '') {
            this.$message.warning(this.$t('resetPSD.relogin'))
            return
          }
          this.confirm = true
          this.$http
            .post('${uc}/api/user/v1/user/modifiUserPsd', {
              account: this.account,
              oldPwd: this.pwdForm.old,
              newPwd: this.pwdForm.new
            })
            .then((resp) => {
              let data = resp.data
              if (data && data.state) {
                this.$message.success(
                  this.$t('resetPSD.success')
                )
                this.confirm = false
                this.$router.push({
                  path: this.$route.query.redirect
                    ? this.$route.query.redirect
                    : '/login'
                })
              } else {
                this.confirm = false
              }
            })
        } else {
          this.$message.warning(this.$t('resetPSD.check'))
        }
      })
    },
    back() {
      if (this.$route.query.type === 'settings') {
        this.$router.go(-1)
        delete this.$route.query.type
      } else {
        this.$store.dispatch('login/logoutAndCleanUp').then(() => {
          this.$router.push({
            path: '/login'
          })
        })
      }
    },
    warning() {
      this.$notify({
        title: '警告',
        message: '该密码不符合密码策略，请重置密码',
        type: 'warning'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';

.full-page {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.content {
  width: 100%;
  height: 100%;
  background-color: $--system-module-color1;
  border-radius: 12px;
}

.pwdForm {
  width: 600px;
  margin: auto;
}

.el-main .el-form {
  padding: 20px;
}

.el-container {
  border-radius: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-header {
  display: flex;
  align-items: center;
  border-bottom: 1px solid $--system-border-color1;
  padding: 25px;
}

.title {
  font-size: 16px;
  color: $--color-white;
}
</style>
