<template>
  <div class="change-password">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-position="top"
      label-width="150px"
      class="rule-form-orange"
    >
      <el-form-item label="获取验证码" style="width: 100%" class="form-required">
        <el-input v-model="ruleForm.passwordMobile" placeholder="请输入手机号码">
          <template #append>
            <verification-code :code="ruleForm.passwordMobile" module="passwordReset" type="phone" placeholder="请输入手机号码" />
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="验证码" style="width: 100%" class="form-required">
        <el-input
          v-model="ruleForm.passwordCode"
          placeholder="请输入验证码"
        />
      </el-form-item>
      <el-form-item label="新密码" style="width: 100%" class="form-required">
        <el-input
          v-model="ruleForm.newPassword"
          :type="passwordType"
          placeholder="请输入新密码"
        />
        <span class="show-pwd" @click="showPwdNewPassword">
          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
        </span>
      </el-form-item>
      <el-form-item label="请再次输入新密码" style="width: 100%" class="form-required">
        <el-input
          v-model="ruleForm.newPasswordAgain"
          :type="passwordTypeAgain"
          placeholder="请再次输入新密码"
        />
        <span class="show-pwd" @click="showPwdNewPasswordAgain">
          <svg-icon :icon-class="passwordTypeAgain === 'password' ? 'eye' : 'eye-open'" />
        </span>
      </el-form-item>
    </el-form>
    <div class="submit-btn">
      <el-button @click="() => { this.$parent.$parent.show = false }">关闭</el-button>
      <el-button type="primary" @click="passwordAdd">确定</el-button>
    </div>
  </div>
</template>

<script>
import { resetPassword } from '@/api/myAccount/myAccount'

export default {
  components: {
    VerificationCode: () => import('@/components/VerificationCode/index.vue')
  },
  data() {
    return {
      ruleForm: {
        resource: '',
        phoneMobile: '',
        phoneCode: '',
        passwordMobile: '',
        passwordCode: '',
        newPassword: '',
        newPasswordAgain: '',
        emailMobile: '',
        emailPhoneCode: '',
        email: '',
        emailCode: ''
      },
      rules: {},
      passwordType: 'password',
      passwordTypeAgain: 'password'
    }
  },
  methods: {
    showPwdNewPassword() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    showPwdNewPasswordAgain() {
      if (this.passwordTypeAgain === 'password') {
        this.passwordTypeAgain = ''
      } else {
        this.passwordTypeAgain = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    passwordAdd() {
      if (!this.ruleForm.passwordMobile) {
        this.$message.warning('请输入手机号码')
        return
      }
      if (!this.ruleForm.passwordCode) {
        this.$message.warning('请输入验证码')
        return
      }
      if (!this.ruleForm.newPassword) {
        this.$message.warning('请输入新密码')
        return
      }
      if (!this.ruleForm.newPasswordAgain) {
        this.$message.warning('请再次输入新密码')
        return
      }
      console.log(this.ruleForm)
      if (this.ruleForm.newPassword !== this.ruleForm.newPasswordAgain) {
        this.$message.warning('与新密码不一致请重新输入')
        return
      }
      const params = {
        mobile: this.ruleForm.passwordMobile,
        code: this.ruleForm.passwordCode,
        passWord: this.$md5(this.ruleForm.newPassword)
      }
      resetPassword(params).then(() => {
        this.$message.success('修改密码成功')
        this.$parent.$parent.show = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.change-password {
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 2px;
    font-size: 16px;
    color: #889aa4;
    cursor: pointer;
    user-select: none;
  }
}

</style>
