<template>
  <div class="com-form-find-password-step-two">
    <el-form label-position="top" label-width="80px" :model="user">
      <el-form-item label="电子邮箱">
        <el-input
          v-model="user.email"
          placeholder="请输入您注册账户时的电子邮箱"
          :disabled="true"
        ></el-input>
      </el-form-item>
      <el-form-item label="账户密码">
        <el-input
          v-model="user.password"
          type="password"
          placeholder="请输入您的账户新密码"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input
          v-model="user.repassword"
          type="password"
          placeholder="请再次输入您的账户新密码"
        ></el-input>
      </el-form-item>
      <el-form-item v-if="captcha.enable" label="验证码">
        <div v-if="captcha.type == 'audio'">
          <el-row :gutter="15">
            <el-col :span="20">
              <audio controls="controls" :src="captcha.captcha"></audio>
            </el-col>
            <el-col :span="4">
              <el-tooltip placement="top" content="刷新语音验证码">
                <el-button
                  icon="el-icon-refresh"
                  class="btn-audio-refresh"
                  @click="loadCaptcha"
                ></el-button>
              </el-tooltip>
            </el-col>
          </el-row>
        </div>
        <div v-else>
          <el-tooltip placement="right" content="点击可刷新验证码">
            <img :src="captcha.captcha" class="pointer" @click="loadCaptcha" />
          </el-tooltip>
        </div>
        <el-input v-model="user.captcha" placeholder="请输入验证码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          class="btn-block"
          icon="el-icon-check"
          @click="execFindPassword"
          :loading="loading"
          :disabled="disabled"
          >立即提交</el-button
        >
        <nuxt-link to="/register" title="" class="el-link el-link--default"
          >注册账户</nuxt-link
        >
        <nuxt-link
          to="/login"
          title="登录账户"
          class="el-link el-link--default float-right"
          >登录账户</nuxt-link
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getUserCaptcha, findPasswordStepTwo } from '~/api/user'
export default {
  name: 'FormFindPasswordStepTwo',
  props: {
    redirect: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      user: {
        email: '',
        token: '',
        password: '',
        repassword: '',
        captcha: '',
        captcha_id: '',
      },
      captcha: {
        enable: false,
      },
      loading: false,
      disabled: false,
    }
  },
  created() {
    this.user.token = this.$route.query.token
    this.user.email = this.$route.query.email
    this.loadCaptcha()
  },
  methods: {
    async execFindPassword() {
      this.loading = true
      const user = { ...this.user }
      if (user.password !== user.repassword) {
        this.$message.error('两次输入的密码不一致')
        this.loading = false
        return
      }
      delete user.repassword
      const res = await findPasswordStepTwo(user)
      if (res.status === 200) {
        this.$message.success('设置成功，请用新密码重新登录')
        this.$router.push('/login')
        this.disabled = true
      } else {
        this.$message.error(res.data.message || '请求失败')
      }
      this.loading = false
    },
    async loadCaptcha() {
      const res = await getUserCaptcha({ type: 'find_password', t: Date.now() })
      if (res.data.enable) {
        // 启用了验证码
        this.user = {
          ...this.user,
          captcha_id: res.data.id,
        }
        this.captcha = res.data
      }
    },
  },
}
</script>
<style scoped>
.btn-audio-refresh {
  vertical-align: -webkit-baseline-middle;
}
</style>
