<template>
  <div>
    <CInputGroup class="mb-3">
      <CInputGroupText>
        <CIcon icon="cil-user" />
      </CInputGroupText>
      <CFormInput
        placeholder="手机号"
        autocomplete="mobile"
        v-model="mobile"
      />
    </CInputGroup>
    <CRow class="mb-4">
      <CCol :xs="6">
        <CButton color="warning" @click="request_sms" class="px-4">发送验证码</CButton>
      </CCol>
    </CRow>
    <CInputGroup class="mb-3">
      <CInputGroupText>
        <CIcon icon="cil-user" />
      </CInputGroupText>
      <CFormInput
        placeholder="验证码"
        autocomplete="none"
        v-model="verify_code"
      />
    </CInputGroup>
    <CInputGroup class="mb-3">
      <CInputGroupText>
        <CIcon icon="cil-lock-locked" />
      </CInputGroupText>
      <CFormInput
        type="password"
        placeholder="新密码"
        autocomplete="current-password"
        v-model="new_password"
      />
    </CInputGroup>
    <CInputGroup class="mb-4">
      <CInputGroupText>
        <CIcon icon="cil-lock-locked" />
      </CInputGroupText>
      <CFormInput
        type="password"
        placeholder="重复输入新密码"
        autocomplete="current-password"
        v-model="repeat_password"
      />
    </CInputGroup>
    <CRow>
      <CCol :xs="6">
        <CButton color="primary" @click="reset_password" class="px-4">重置密码</CButton>
        <CButton color="secondary" @click="$router.go(-1)" class="mx-4">返回</CButton>
      </CCol>
    </CRow>
  </div>
</template>

<script>
export default {
  name: 'ResetPassword',
  props: [],
  components: {
  },
  data: function () {
    return {
      mobile: '',
      verify_code: '',
      new_password: '',
      repeat_password: '',
    };
  },
  computed: {
  },
  methods: {
    request_sms: function() {
      this.$root.api_post('/api/v1/request-password-reset/', {
        mobile: this.mobile,
      });
    },
    reset_password: function() {
      this.$root.api_post('/api/v1/reset-password/', {
        mobile: this.mobile,
        verify_code: this.verify_code,
        password: this.new_password,
      });
    },
  },
  mounted() {
  },
}
</script>

<style scoped>
</style>
