<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    disableScroll: true
  }
}
</route>
<template>
  <view>
    <TopNavigation></TopNavigation>
    <view class="text-6 ml-4 pt-7 custom-color-black font-bold">请输入手机号</view>
    <view class="p-5">
      <wd-input
        v-model="password"
        :maxlength="20"
        class="mt-6"
        clearable
        placeholder="请输入新密码"
        placeholderClass="text-4 custom-color-grey"
        show-password
        size="large"
        @change="passwordChange"
      />
      <wd-input
        v-model="confirmPassword"
        :maxlength="20"
        class="mt-6"
        clearable
        placeholder="再次输入新密码"
        placeholderClass="text-4 custom-color-grey"
        show-password
        size="large"
        @change="confirmPasswordChange"
      />
    </view>
    <view class="bg-[#eeeff4] p-2 mx-5 rounded-2">
      <view class="p-2">
        <view class="text-3 color-[#525458]">密码为8-20位，至少含数字/字母/字符中的2种</view>
      </view>
    </view>
    <view class="p-5">
      <wd-button
        :block="true"
        :disabled="!(passwordPass && confirmPasswordPass && password === confirmPassword)"
        :round="false"
        size="large"
        @click="codeLogin"
      >
        提交
      </wd-button>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { passwordRegExp } from '@/constants/regular-expressions'

  const password = ref<string>('')
  const confirmPassword = ref<string>('')

  const passwordPass = computed(() => passwordRegExp.test(password.value))
  const confirmPasswordPass = computed(() => password.value === confirmPassword.value)

  const passwordChange = (value: string) => {
    password.value = value
  }

  const confirmPasswordChange = (value: string) => {
    confirmPassword.value = value
  }
</script>

<style scoped lang="scss"></style>
