<template>
  <ai-detail class="changePwd">
    <template slot="title">
      <ai-title title="修改密码" isShowBottomBorder>
      </ai-title>
    </template>
    <template slot="content">
      <ai-card title="修改密码">
        <template #content>
          <el-form class="ai-form" ref="form" :model="form" label-width="110px" label-position="right">
            <el-form-item label="旧密码" prop="oldPwd" style="width: 100%!important" :rules="[{ required: true, message: '请输入旧密码', trigger: 'blur' }]">
              <el-input v-model="form.oldPwd" size="small" type="password" style="width: 50%" placeholder="请输入旧密码"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPwd" style="width: 100%!important" :rules="[{ required: true, message: '请输入新密码', trigger: 'blur' }]">
              <el-input v-model="form.newPwd" size="small" type="password" style="width: 50%" placeholder="请输入新密码"></el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="newPwd2" style="width: 100%!important" :rules="[{ required: true, message: '请输入确认新密码', trigger: 'blur' }]">
              <el-input v-model="form.newPwd2" size="small" type="password" style="width: 50%" placeholder="请输入确认新密码"></el-input>
            </el-form-item>
          </el-form>
        </template>
      </ai-card>
    </template>
    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">提交</el-button>
    </template>
  </ai-detail>
</template>

<script>
  export default {
    name: 'ChangePwd',

    data () {
      const validatorPhone = function (rule, value, callback) {
        if (value === '') {
          callback(new Error('请输入手机号'))
        } else if (!/^1\d{10}$/.test(value)) {
          callback(new Error('手机号格式错误'))
        } else {
          callback()
        }
      }
      const validatorPwd = function (rule, value, callback) {
        if (value === '') {
          callback(new Error('请输入新密码'))
        } else if (value.length < 8 || value.length > 16) {
          callback(new Error('密码长度不能小于8位大于16位'))
        } else {
          callback()
        }
      }
      return {
        form: {
          code: '',
          newPwd: '',
          phone: '',
          oldPwd: '',
          newPwd2: ''
        },
        validatorPwd,
        validatorPhone,
        timer: null,
        time: 60,
        isSend: false,
        isStart: false
      }
    },

    created () {
    },

    methods: {
      confirm () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            if (this.form.newPwd !== this.form.newPwd2) {
              return this.$message.error('新密码和确认密码不一致')
            }

            this.$http.post(`/api/malluser/updatePwd`, null, {
              params: {
                ...this.form
              }
            }).then(res => {
              if (res.code == 0) {
                this.$message.success('密码修改成功，请重新登录')
                setTimeout(() => {
                  this.$store.commit('SignOut', true)
                }, 600)
              }
            })
          }
        })
      },

      cancel () {
        this.$router.push('/')
      },

      getCode () {
        if (this.isSend) {
          return this.$message.error('验证码已发送')
        }

        if (!/^1[0-9]{10,10}$/.test(this.form.phone)) {
          return this.$message.error('请输入正确到手机号')
        }

        this.isSend = true
        this.$http.post(`/user/sendCode?phone=${this.form.phone}`).then(res => {
          if (res.code === 0) {
            this.$message.success('验证码发送成功')
            this.isStart = true
            this.timer = setInterval(() => {
              if (this.time === 0) {
                this.isSend = false
                this.isStart = false
                this.time = 60
                clearInterval(this.timer)

                return false
              }

              this.time = this.time - 1
            }, 1000)
          }
        }).catch(() => {
          this.isSend = false
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  .changePwd {
  }
</style>
