<script setup lang="ts">
import { computed } from 'vue'

type PayPwdMode = 'set' | 'change'

const props = defineProps<{
  t: (key: string) => string
  isSend: number
  payPwdMode: PayPwdMode
  showLoginPwdPopup: boolean
  showLoginPwdForgetPopup: boolean
  showPayPwdPopup: boolean
  showPayPwdForgetPopup: boolean
  loginPwdForm: { oldLoginPwd: string; newLoginPwd: string; confirmPwd: string }
  loginPwdForgetForm: { phone: string; captcha: string; newLoginPwd: string; confirmPwd: string }
  payPwdSetForm: { phone: string; captcha: string; payPwd: string; confirmPwd: string }
  payPwdChangeForm: { oldPayPwd: string; newPayPwd: string; confirmPwd: string }
  payPwdForgetForm: { phone: string; captcha: string; payPwd: string; confirmPwd: string }
}>()

const emit = defineEmits<{
  (e: 'update:showLoginPwdPopup', value: boolean): void
  (e: 'update:showLoginPwdForgetPopup', value: boolean): void
  (e: 'update:showPayPwdPopup', value: boolean): void
  (e: 'update:showPayPwdForgetPopup', value: boolean): void
  (e: 'submit-login-pwd'): void
  (e: 'submit-login-pwd-forget'): void
  (e: 'submit-pay-pwd-set'): void
  (e: 'submit-pay-pwd-change'): void
  (e: 'submit-pay-pwd-forget'): void
  (e: 'request-login-forget-code'): void
  (e: 'request-pay-set-code'): void
  (e: 'request-pay-forget-code'): void
}>()

const loginPwdPopupVisible = computed({
  get: () => props.showLoginPwdPopup,
  set: (value: boolean) => emit('update:showLoginPwdPopup', value),
})

const loginPwdForgetPopupVisible = computed({
  get: () => props.showLoginPwdForgetPopup,
  set: (value: boolean) => emit('update:showLoginPwdForgetPopup', value),
})

const payPwdPopupVisible = computed({
  get: () => props.showPayPwdPopup,
  set: (value: boolean) => emit('update:showPayPwdPopup', value),
})

const payPwdForgetPopupVisible = computed({
  get: () => props.showPayPwdForgetPopup,
  set: (value: boolean) => emit('update:showPayPwdForgetPopup', value),
})

function openLoginPwdForget() {
  emit('update:showLoginPwdPopup', false)
  emit('update:showLoginPwdForgetPopup', true)
}

function openPayPwdForget() {
  emit('update:showPayPwdPopup', false)
  emit('update:showPayPwdForgetPopup', true)
}
</script>

<template>
  <view>
    <wd-popup
      v-model="loginPwdPopupVisible"
      :close-on-click-modal="false"
      position="bottom"
      custom-class="ios-popup-mask"
    >
      <view class="ios-dialog">
        <view class="ios-dialog__header">
          <view class="ios-dialog__title">{{ t('navbar-change-password') }}</view>
          <view class="ios-dialog__close" @click="emit('update:showLoginPwdPopup', false)">×</view>
        </view>
        <view class="ios-dialog__body">
          <wd-input
            v-model.trim="loginPwdForm.oldLoginPwd"
            no-border
            show-password
            clearable
            :maxlength="20"
            :placeholder="t('pages-user.pay-password.input-placeholder.enter-old-password')"
          />
          <view class="ios-dialog__divider" />
          <wd-input
            v-model.trim="loginPwdForm.newLoginPwd"
            no-border
            show-password
            clearable
            :maxlength="16"
            :placeholder="t('pages-user.pay-password.input-placeholder.enter-new-password')"
          />
          <view class="ios-dialog__divider" />
          <wd-input
            v-model.trim="loginPwdForm.confirmPwd"
            no-border
            show-password
            clearable
            :maxlength="16"
            :placeholder="t('pages-user.pay-password.input-placeholder.enter-new-password-again')"
          />
          <view class="ios-dialog__link-row">
            <text class="ios-dialog__link" @click="openLoginPwdForget">
              {{ t('navbar-forget-password') }}?
            </text>
          </view>
        </view>
        <view class="ios-dialog__footer">
          <wd-button custom-class="ios-dialog__btn ios-dialog__btn--primary" block @click="emit('submit-login-pwd')">
            {{ t('common.confirm') }}
          </wd-button>
        </view>
      </view>
    </wd-popup>

    <wd-popup
      v-model="loginPwdForgetPopupVisible"
      :close-on-click-modal="false"
      position="bottom"
      custom-class="ios-popup-mask"
    >
      <view class="ios-dialog">
        <view class="ios-dialog__header">
          <view class="ios-dialog__title">{{ t('navbar-forget-password') }}</view>
          <view class="ios-dialog__close" @click="emit('update:showLoginPwdForgetPopup', false)">×</view>
        </view>
        <view class="ios-dialog__body">
          <wd-input :model-value="loginPwdForgetForm.phone" disabled disabledColor="transparent" no-border />
          <view class="ios-dialog__divider" />
          <wd-input
            v-model.trim="loginPwdForgetForm.captcha"
            style="color:#000 !important;"
            no-border
            clearable
            :maxlength="6"
            :placeholder="t('pages-user.pay-password.input-placeholder.enter-verification-code')"
          >
            <template #suffix>
              <wd-button :disabled="!!isSend" custom-class="ios-code-btn" @click="emit('request-login-forget-code')">
                {{ isSend ? isSend + 'S' : t('common.obtain') }}
              </wd-button>
            </template>
          </wd-input>
          <view class="ios-dialog__divider" />
          <wd-input
            v-model.trim="loginPwdForgetForm.newLoginPwd"
            style="color:#000 !important;"
            no-border
            show-password
            clearable
            :maxlength="20"
            :placeholder="t('pages-user.pay-password.input-placeholder.enter-new-password')"
          />
          <view class="ios-dialog__divider" />
          <wd-input
            v-model.trim="loginPwdForgetForm.confirmPwd"
            no-border
            show-password
            clearable
            :maxlength="20"
            :placeholder="t('pages-user.pay-password.input-placeholder.enter-new-password-again')"
          />
        </view>
        <view class="ios-dialog__footer">
          <wd-button custom-class="ios-dialog__btn ios-dialog__btn--primary" block @click="emit('submit-login-pwd-forget')">
            {{ t('common.confirm') }}
          </wd-button>
        </view>
      </view>
    </wd-popup>

    <wd-popup
      v-model="payPwdPopupVisible"
      :close-on-click-modal="false"
      position="bottom"
      custom-class="ios-popup-mask"
    >
      <view class="ios-dialog">
        <view class="ios-dialog__header">
          <view class="ios-dialog__title">
            {{ payPwdMode === 'set' ? t('navbar-set-payment-password') : t('navbar-change-payment-password') }}
          </view>
          <view class="ios-dialog__close" @click="emit('update:showPayPwdPopup', false)">×</view>
        </view>

        <view class="ios-dialog__body" v-if="payPwdMode === 'set'">
          <wd-input :model-value="payPwdSetForm.phone" disabled disabledColor="transparent" no-border />
          <view class="ios-dialog__divider" />
          <wd-input
            v-model.trim="payPwdSetForm.captcha"
            no-border
            clearable
            :maxlength="6"
            :placeholder="t('pages-user.pay-password.input-placeholder.enter-verification-code')"
          >
            <template #suffix>
              <wd-button :disabled="!!isSend" custom-class="ios-code-btn" @click="emit('request-pay-set-code')">
                {{ isSend ? isSend + 'S' : t('common.obtain') }}
              </wd-button>
            </template>
          </wd-input>
          <view class="ios-dialog__divider" />
          <wd-input
            v-model.trim="payPwdSetForm.payPwd"
            no-border
            show-password
            clearable
            :maxlength="6"
            :placeholder="t('pages-user.pay-password.input-placeholder.enter-new-password')"
          />
          <view class="ios-dialog__divider" />
          <wd-input
            v-model.trim="payPwdSetForm.confirmPwd"
            no-border
            show-password
            clearable
            :maxlength="6"
            :placeholder="t('pages-user.pay-password.input-placeholder.enter-new-password-again')"
          />
        </view>

        <view class="ios-dialog__body" v-else>
          <wd-input
            v-model.trim="payPwdChangeForm.oldPayPwd"
            no-border
            show-password
            clearable
            :maxlength="6"
            :placeholder="t('pages-user.pay-password.input-placeholder.enter-old-password')"
          />
          <view class="ios-dialog__divider" />
          <wd-input
            v-model.trim="payPwdChangeForm.newPayPwd"
            no-border
            show-password
            clearable
            :maxlength="6"
            :placeholder="t('pages-user.pay-password.input-placeholder.enter-new-password')"
          />
          <view class="ios-dialog__divider" />
          <wd-input
            v-model.trim="payPwdChangeForm.confirmPwd"
            no-border
            show-password
            clearable
            :maxlength="6"
            :placeholder="t('pages-user.pay-password.input-placeholder.enter-new-password-again')"
          />
          <view class="ios-dialog__link-row">
            <text class="ios-dialog__link" @click="openPayPwdForget">
              {{ t('navbar-forget-password') }}?
            </text>
          </view>
        </view>

        <view class="ios-dialog__footer">
          <wd-button
            custom-class="ios-dialog__btn ios-dialog__btn--primary"
            block
            @click="payPwdMode === 'set' ? emit('submit-pay-pwd-set') : emit('submit-pay-pwd-change')"
          >
            {{ t('common.confirm') }}
          </wd-button>
        </view>
      </view>
    </wd-popup>

    <wd-popup
      v-model="payPwdForgetPopupVisible"
      :close-on-click-modal="false"
      position="bottom"
      custom-class="ios-popup-mask"
    >
      <view class="ios-dialog">
        <view class="ios-dialog__header">
          <view class="ios-dialog__title">{{ t('navbar-forget-payment-password') }}</view>
          <view class="ios-dialog__close" @click="emit('update:showPayPwdForgetPopup', false)">×</view>
        </view>
        <view class="ios-dialog__body">
          <wd-input :model-value="payPwdForgetForm.phone" disabled disabledColor="transparent" no-border />
          <view class="ios-dialog__divider" />
          <wd-input
            v-model.trim="payPwdForgetForm.captcha"
            style="color:#000 !important;"
            no-border
            clearable
            :maxlength="6"
            :placeholder="t('pages-user.pay-password.input-placeholder.enter-verification-code')"
          >
            <template #suffix>
              <wd-button :disabled="!!isSend" custom-class="ios-code-btn" @click="emit('request-pay-forget-code')">
                {{ isSend ? isSend + 'S' : t('common.obtain') }}
              </wd-button>
            </template>
          </wd-input>
          <view class="ios-dialog__divider" />
          <wd-input
            v-model.trim="payPwdForgetForm.payPwd"
            no-border
            show-password
            clearable
            :maxlength="6"
            :placeholder="t('pages-user.pay-password.input-placeholder.enter-new-password')"
          />
          <view class="ios-dialog__divider" />
          <wd-input
            v-model.trim="payPwdForgetForm.confirmPwd"
            no-border
            show-password
            clearable
            :maxlength="6"
            :placeholder="t('pages-user.pay-password.input-placeholder.enter-new-password-again')"
          />
        </view>
        <view class="ios-dialog__footer">
          <wd-button custom-class="ios-dialog__btn ios-dialog__btn--primary" block @click="emit('submit-pay-pwd-forget')">
            {{ t('common.confirm') }}
          </wd-button>
        </view>
      </view>
    </wd-popup>
  </view>
</template>

<style scoped lang="scss">
.ios-dialog {
  width: 100vw;
  max-height: 88vh;
  background: #fff;
  border-radius: 40rpx 40rpx 0 0;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
}

.ios-dialog__header {
  height: 96rpx;
  padding: 0 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ios-dialog__title {
  text-align: center;
  font-size: 36rpx;
  line-height: 44rpx;
  color: #1c1c1e;
  font-weight: 600;
}

.ios-dialog__close {
  position: absolute;
  right: 28rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44rpx;
  line-height: 44rpx;
  color: #222;
}

.ios-dialog__body {
  margin: 0 24rpx 12rpx;
  background: #fff;
}

.ios-dialog__divider {
  display: none;
}

.ios-dialog__link-row {
  padding: 12rpx 8rpx 0;
  display: flex;
  justify-content: flex-end;
}

.ios-dialog__link {
  font-size: 34rpx;
  line-height: 34rpx;
  color: #3c3c43;
  font-weight: 500;
}

.ios-dialog__footer {
  padding: 210rpx 24rpx 24rpx;
}

:deep(.ios-dialog__btn) {
  height: 88rpx !important;
  border-radius: 999rpx !important;
  font-size: 34rpx !important;
  font-weight: 600 !important;
}

:deep(.ios-dialog__btn--primary) {
  background: #000 !important;
  color: #fff !important;
}

:deep(.ios-code-btn) {
  min-width: 92rpx !important;
  height: 52rpx !important;
  padding: 0 20rpx !important;
  border-radius: 16rpx !important;
  font-size: 26rpx !important;
  font-weight: 400 !important;
  line-height: 52rpx !important;
  background: #000 !important;
  color: #fff !important;
  border: none !important;
}

:deep(.ios-code-btn.is-disabled) {
  background: #8e8e93 !important;
  color: #fff !important;
  opacity: 1 !important;
}

:deep(.wd-input) {
  height: 84rpx !important;
  border: 1rpx solid #dedede !important;
  border-radius: 24rpx !important;
  padding: 0 24rpx !important;
  box-sizing: border-box !important;
  display: flex;
  align-items: center;
  margin-bottom: 14rpx;
}

:deep(.wd-input__inner) {
  flex: 1;
  min-width: 0;
  border: none !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

:deep(.wd-input__suffix) {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 12rpx;
}

:deep(.ios-popup-mask) {
  background: transparent !important;
}

:deep(.ios-popup-mask.wd-popup--bottom) {
  border-radius: 40rpx 40rpx 0 0 !important;
}
</style>
