<template>
  <div class="app-container" style=" width: 400px;margin: 0 auto;padding-top:13%;">
    <el-form ref="dataForm" :rules="rules" :model="from" label-position="left" label-width="130px">
      <el-form-item label="旧密码:" prop="oldPassword" style="width: 380px;text-align: right;">
        <el-input v-model="from.oldPassword" placeholder="请输入旧密码" maxlength="50" />
      </el-form-item>
      <el-form-item label="新密码:" prop="password" style="width: 380px; text-align: right;">
        <el-input v-model="from.password" placeholder="请输入8-16位数字和字母的组合" maxlength="16" />
      </el-form-item>
      <el-form-item label="确认新密码:" prop="checkPassword" style="width: 380px; text-align: right;">
        <el-input v-model="from.checkPassword" placeholder="请输入8-16位数字和字母的组合" maxlength="16" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="width:1px;margin:0 auto;padding:40px 0 80px 0;">
      <el-button v-loading.fullscreen.lock="fullscreenLoading" type="primary" style="width: 100px;" @click="onSubmite()">保存</el-button>
    </div>
  </div>
</template>

<script>
import { changePassword } from '@/api/sys'
export default {
  data() {
    return {
      fullscreenLoading: false,
      from: {
        oldPassword: '',
        password: '',
        checkPassword: ''
      },
      rules: {
        oldPassword: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
        password: [
          { required: true, message: '请输入新的密码', trigger: 'blur' },
          { min: 8, max: 16, message: '密码长度在8到16个字符', trigger: 'blur' },
          {
            required: true,
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/,
            message: '密码组合应为8-16位数字和字母组合',
            trigger: 'blur'
          }
        ],
        checkPassword: [{ required: true, message: '请确认新的密码', trigger: 'blur' }]
      }
    }
  },
  computed: {
    organizeId() {
      return this.$store.getters.organizeId
    }
  },
  methods: {
    onSubmite() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (this.from.password === this.simplePwd) {
            this.$message({
              message: '提示：密码太过简单哦！',
              type: 'warning',
              duration: 3000
            })
            return
          }
          if (this.from.checkPassword !== this.from.password) {
            this.$message({
              message: '提示：新密码输入不一致哦,请重新确认新密码！',
              type: 'warning',
              duration: 3000
            })
            return
          }
          const Formobj = { organizeId: this.$store.getters.organizeId }
          const params = Object.assign(Formobj, this.from)
          this.fullscreenLoading = true
          changePassword(params).then(response => {
            this.$message({ message: response.msg, type: 'success', center: true })
            this.$store.dispatch('user/logout')
            this.$router.push('/login')
          }).catch(() => {
            setTimeout(() => {
              this.fullscreenLoading = false
            }, 2000)
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">

</style>
