<template>
  <div class="form-div">
    <ElForm
      :model=" verificationForm"
      :rules="verificationRules"
      size="medium"
      class="login-form"
      auto-complete="on"
      label-position="left"
    >
      <template v-if="step === 1">
        <ElFormItem>
          <ElInput
            v-model="verificationForm.phoneNum"
            type="text"
            placeholder="请输入用户名或手机号"
          />
        </ElFormItem>
        <div>
          <PuzzleVerification
            v-model="showPuzzle"
            :style="{ display: showPuzzle ? 'block' : 'none' }"
            block-type="puzzle"
            :on-success="handleSuccess"
          />
        </div>
      </template>

      <template v-if="step === 2">
        <ElFormItem>
          <ElInput
            v-model="verificationForm.message"
            type="text"
            placeholder="请输入短信验证码"
          >
            <el-button slot="append">
              发送验证码
            </el-button>
          </ElInput>
        </ElFormItem>
      </template>

      <template v-if="step === 3">
        <ElFormItem>
          <ElInput
            v-model=" verificationForm.password"
            type="password"
            name="password"
            placeholder="请输入新密码"
          />
          <ElInput
            v-model=" verificationForm.newPassword"
            type="password"
            name="password"
            placeholder="请输入确认密码"
          />
        </ElFormItem>
      </template>
      <div class="button-div">
        <ElButton
          size="medium"
          type="primary"
          class="step-button"
          :disabled="disabled"
          @click="next"
        >
          下一步
        </ElButton>
        <ElButton
          size="medium"
          class="step-button"
          @click="$emit('cancel')"
        >
          取消
        </ElButton>
      </div>
    </ElForm>
  </div>
</template>

<script>
import PuzzleVerification from 'vue-puzzle-verification'
export default {
  name: 'ChangePassword',
  components: {
    PuzzleVerification
  },
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('密码不能小于 6 位'))
      } else {
        callback()
      }
    }
    return {
      step: 1,
      showPuzzle: false,
      verificationForm: {
        phoneNum: null,
        message: null,
        password: null,
        newPassword: null
      },
      verificationRules: {
        phoneNum: [{ required: true, trigger: 'blur', message: '请输入账号或手机号' }],
        message: [{ required: true, trigger: 'blur', message: '请输入短信验证码' }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
        newPassword: [{ required: true, trigger: 'blur', validator: validatePassword }]
      }
    }
  },
  computed: {
    disabled() {
      if (this.step === 1) {
        return !this.verificationForm.phoneNum
      } else if (this.step === 2) {
        return !this.verificationForm.message
      } else if (this.step === 3) {
        return !(this.verificationForm.password && this.verificationForm.newPassword)
      } else {
        return true
      }
    }
  },
  methods: {
    handleSuccess() {
      console.log('handleSuccess')
      this.step = 2
    },
    next() {
      if (this.step === 3) {
        console.log('finish')
      } else {
        if (this.step === 1 && !this.showPuzzle) {
          this.showPuzzle = true
          return
        }
        this.step = this.step + 1
      }
    }
  }
}
</script>

<style scoped lang="scss">
$bg: #2d3a4b;
$light_gray: #fff;
$cursor: #fff;
.form-div {
  display: flex;
  justify-content: center;
  width: 100%;
  .login-form {
    width: 300px;
  }
  .button-div {
    display: flex;
    .step-button {
      width:50%;
      margin-top:10px;
    }
  }
  ::v-deep {
    .el-input {
      margin-top: 15px;
    }
  }
}

</style>
