<template>
  <van-popup
    v-model="show"
    overlay-class="password-overlay"
    class="password-popup"
    position="top"
    @closed="onClosed"
  >
    <div class="password" v-if="!isSuccess">
      <van-form ref="form" class="form" validate-trigger="onChange" @submit="onSubmit">
        <h2 class="password-title">修改密码</h2>
        <van-field
          v-model="ruleForm.account"
          name="account"
          placeholder="请输入手机号/邮箱"
          :border="false"
          :rules="[
            { required: true, message: '请输入手机号/邮箱' },
            { message: '手机号/邮箱格式错误' }
          ]"
        />
        <van-field
          v-model="ruleForm.code"
          name="code"
          placeholder="请输入验证码"
          :border="false"
          :rules="[{ required: true, message: '请输入验证码' }]"
        >
          <template slot="button">
            <countdown-button @click.native="onSendCode" ref="countdown"></countdown-button>
          </template>
        </van-field>
        <van-field
          v-model="ruleForm.password"
          name="password"
          type="password"
          placeholder="6-20个字符，只能数字/字母/标点符号"
          :border="false"
          :rules="[{ required: true, message: '请输入密码' }]"
        />
        <van-field
          v-model="ruleForm.passwordR"
          type="password"
          name="passwordR"
          placeholder="再次确认密码"
          :border="false"
          :rules="[
            { required: true, message: '请输入确认密码' },
            {
              trigger: 'onBlur',
              validator: validatePass,
              message: '两次输入密码不一致'
            }
          ]"
        />
        <div style="margin: 16px 0">
          <van-button block native-type="submit" class="password-button">立即更改</van-button>
        </div>
      </van-form>
    </div>
    <div class="password-success" v-else>
      <span class="password-success__icon"></span>
      <span class="password-success__text">密码修改成功</span>
      <van-button block class="password-button" @click="onClosed">立即登录</van-button>
    </div>
  </van-popup>
</template>

<script>
import * as api from '@/api/account'
import CountdownButton from '@/components/CountdownButton.vue'

export default {
  components: { CountdownButton },
  props: {
    value: { type: Boolean, default: false }
  },
  data() {
    return {
      show: this.value,
      isSuccess: false,
      ruleForm: {
        account: '',
        code: '',
        password: '',
        passwordR: ''
      }
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(value) {
        this.show = value
      }
    }
  },
  methods: {
    onClosed() {
      this.isSuccess = false
      this.$emit('input', false)
    },
    onSubmit() {
      this.resetPasswordRequest()
    },
    // 发送验证码
    onSendCode() {
      this.$refs.form.validate('account').then(response => {
        if (!response) {
          // 开始倒计时
          this.$refs.countdown.start()
          this.sendCodeRequest()
        }
      })
    },
    // 验证码
    sendCodeRequest() {
      api
        .sendResetPasswordCode({ account: this.ruleForm.account })
        .then(response => {
          if (response.code === 0) {
            this.$notify({ type: 'success', message: '验证码发送成功' })
          } else {
            // 停止计时
            this.$refs.countdown.stop()
            this.$notify(response.msg)
          }
        })
        .catch(error => {
          // 停止计时
          this.$refs.countdown.stop()
          error.response && this.$notify(error.response.data.message)
        })
    },
    // 重置密码
    resetPasswordRequest() {
      const data = Object.assign({}, this.ruleForm, {
        service: 'h5.ezijing.com'
      })
      api
        .resetPassword(data)
        .then(response => {
          if (response.code === 0) {
            this.isSuccess = true
          } else {
            this.$notify(response.msg)
          }
        })
        .catch(error => {
          error.response && this.$notify(error.response.data.message)
        })
    },
    // 确认密码校验
    validatePass(value) {
      return value === this.ruleForm.password
    }
  }
}
</script>

<style lang="scss">
.password-popup {
  margin: 30px auto;
  right: 0;
  max-width: 690px;
  width: calc(100vw - 60px);
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
}
.password {
  min-height: 440px;
  padding: 0 20px;
}
.password-title {
  padding: 30px 16px 10px;
  font-size: 18px;
  color: #333;
  text-align: center;
}
.password-overlay {
  background-color: transparent;
}
.password-button {
  background: linear-gradient(
    180deg,
    rgba(255, 155, 150, 1) 0%,
    rgba(206, 62, 58, 1) 100%
  );
  color: #fff;
  border: 0;
}
.password-success {
  display: flex;
  min-height: 440px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30px;
}
.password-success__icon {
  display: inline-block;
  width: 100px;
  height: 100px;
  // background: url('~@/assets/img/icon_success.png') no-repeat;
  background-size: contain;
}
.password-success__text {
  display: block;
  margin: 40px 0 55px;
  font-size: 24px;
  color: #333;
}
</style>
