<!-- 修改密码（登录时）  -->
<template>
  <view>
    <!-- 标题栏 -->
    <view class="head-box ss-m-b-60">
      <view class="head-title ss-m-b-20 head-title-animation text-bold">修改密码</view>
      <view class="head-subtitle">您目前的登录密码为初始密码，为了您的账号安全，请对您的密码进行修改。</view>
    </view>

    <!-- 表单项 -->
    <uni-forms
      ref="changePasswordRef"
      v-model="state.model"
      :rules="state.rules"
      validateTrigger="bind"
      labelWidth="140"
      labelAlign="center"
    >
			<uni-forms-item name="reNewPassword" label="手机号">
			  <uni-easyinput
			    type="number"
			    placeholder="请输入手机号"
			    v-model="state.model.mobile"
			    :inputBorder="false"
					maxlength="11"
			  >
			  </uni-easyinput>
			</uni-forms-item>
			
      <uni-forms-item name="reNewPassword" label="新密码">
        <uni-easyinput
          type="password"
          placeholder="请输入新密码"
          v-model="state.model.newPassword"
          :inputBorder="false"
					maxlength="16"
        >
        </uni-easyinput>
      </uni-forms-item>

      <uni-forms-item name="reNewPassword" label="确认密码">
        <uni-easyinput
          type="password"
          placeholder="请重新输入新密码进行确认"
          v-model="state.model.ackPassword"
          :inputBorder="false"
					maxlength="16"
        >
          <template v-slot:right>
            <button class="ss-reset-button login-btn-start" @tap="changePasswordSubmit">
              确认
            </button>
          </template>
        </uni-easyinput>
      </uni-forms-item>
    </uni-forms>

    <button class="ss-reset-button type-btn" @tap="closeAuthModal">
      取消修改
    </button>
  </view>
</template>

<script setup>
  import { ref, reactive, unref } from 'vue';
  import { ackPassword, newPassword, mobile } from '@/sheep/validate/form';
  import { closeAuthModal, getSmsCode, getSmsTimer } from '@/sheep/hooks/useModal';
  import UserApi from '@/sheep/api/member/user';

  const changePasswordRef = ref(null);

  // 数据
  const state = reactive({
    model: {
      mobile: '', // 手机号
      newPassword: '', // 密码
			ackPassword: '', // 密码
    },
    rules: {
			mobile,
      newPassword,
			ackPassword
    },
  });

  // 更改密码
  async function changePasswordSubmit() {
    // 参数校验
    const validate = await unref(changePasswordRef)
      .validate()
      .catch((error) => {
        console.log('error: ', error);
      });
    if (!validate) {
      return;
    }
    // 发起请求
    const { code } = await UserApi.updateUserPasswordReset(state.model);
    if (code !== 0) {
      return;
    }
    // 成功后，只需要关闭弹窗
    closeAuthModal();
  }
</script>

<style lang="scss" scoped>
  @import '../index.scss';
	
	.text-bold {
		font-weight: bold;
	}
</style>
