<template>
  <div class="app-container">
      <el-form ref="form" :model="form" :rules="rules" size="small" style="display: inline-block;">
        <el-form-item label="原密码" prop="originalPassword">
          <el-input v-model="form.originalPassword" type="password" auto-complete="on" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="新密码" prop="password">
          <el-input v-model="form.password" type="password" auto-complete="on" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="确认新密码" prop="confirmPass">
          <el-input v-model="form.confirmPass" type="password" auto-complete="on" style="width: 370px;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="loading" type="primary" @click="doSubmit">提交</el-button>
      </div>
  </div>
</template>

<script>
import store from '@/store'
import { updatePass } from '@/api/user'
import { COMPOSITION_TYPE } from '@/utils/options'
import { querySafety } from '@/api/systemSafety.js'
export default {
  name: '修改密码',
  data() {
    const confirmPass = (rule, value, callback) => {
      if (value) {
        if (this.form.password !== value) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      } else {
        callback(new Error('请再次输入密码'))
      }
    }
    return {
      loading: false,
      dialog: true,
      title: '修改密码',
      form: { originalPassword: '', password: '', confirmPass: '' },
      rules: {
        originalPassword: [
          { required: true, message: '请输入旧密码', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          // { pattern: /^(?![A-Za-z]+$)(?![A-Z\d]+$)(?![A-Z\W]+$)(?![a-z\d]+$)(?![a-z\W]+$)(?![\d\W]+$)\S{8,12}$/, message: '密码应由大小写数字特殊符号的任意三种投资组合，且长度在8~12之间', trigger: 'blur' }
          // { pattern: new RegExp(this.$store.state.user.systemSafety.regexPattern), message: `密码应由${this.getComposition()}组成，长度不得低于${this.$store.state.user.systemSafety.passwordMin}位且不能与前${this.$store.state.user.systemSafety.passwordSame}次密码相同`, trigger: 'blur' }
        ],
        confirmPass: [
          { required: true, validator: confirmPass, trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    // await this.querySafetyFn()
    // if (!this.$store.state.user.systemSafety || !this.$store.state.user.systemSafety.regexPattern) {
    //     return this.$message.warning('请先设置密码规则')
    // }
  },
  async activated(){
    // await this.querySafetyFn()
    // if (!this.$store.state.user.systemSafety || !this.$store.state.user.systemSafety.regexPattern) {
    //     return this.$message.warning('请先设置密码规则')
    // }
  },
  methods: {
    cancel() {
      this.resetForm()
    },
    async querySafetyFn(){
      const res = await querySafety()
      if(res.code === 0) {
        this.$store.commit('SET_SYSTEM_SAFETY', res.data)
      }
    },
    doSubmit() {
      this.$refs['form'].validate(async(valid) => {
        if (valid) {
          this.loading = true
          const res = await updatePass({ originalPassword: this.form.originalPassword, password: this.form.password })
          this.loading = false
          if (res.code === 0) {
            this.resetForm()
            this.$notify({
              title: '密码修改成功，请重新登录',
              type: 'success',
              duration: 1500
            })
            localStorage.setItem('isExpire', 0)
            setTimeout(() => {
              store.dispatch('LogOut')
            }, 1500)
          }
        } else {
          return false
        }
      })
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
      this.form = { oldPass: '', newPass: '', confirmPass: '' }
    },
    getComposition() {
      const composition = this.$store.state.user.systemSafety.passwordComposition.split(',')
      const arr = composition.map(item => {
        return COMPOSITION_TYPE[Number(item)]
      })
      return arr.join('、')
    }
  }
}
</script>

<style scoped>
</style>
