<script setup lang="ts">
definePage({
  style: {
    'navigationBarTitleText': '',
    'navigationStyle': 'default',
    'backgroundColor': '#ffffff',
    'navigationBarBackgroundColor': '#ffffff',
    'app-plus': {
      bounce: 'none',
    },
  },
})

const showPwd = ref(false)
const showCPwd = ref(false)
const isAgreed = ref(false)

const locale = uni.getLocale()

const isCh = computed(() => locale === 'zh-Hans')

function toSignIn() {
  uni.navigateBack({ delta: 1 })
}
onMounted(() => {
  console.log(locale)
})
</script>

<template>
  <view class="register-container">
    <view class="register-title">
      <view>{{ $t('register.title') }}</view>
      <view>{{ $t('register.desc') }}</view>
    </view>
    <view class="register-content">
      <view v-if="isCh" class="register-input">
        <input :placeholder="$t('register.phonePH')">
      </view>
      <view v-if="isCh" class="register-input">
        <input :placeholder="$t('register.captchaPH')">
        <view class="get-code">
          {{ $t('register.getCaptcha') }}
        </view>
      </view>
      <view v-if="!isCh" class="register-input">
        <input :placeholder="$t('register.emailPH')">
      </view>
      <view class="register-input">
        <input :placeholder="$t('register.passwordPH')" :password="!showPwd">
        <image
          class="suffix"
          :src="showPwd ? '/static/icons/visible.svg' : '/static/icons/invisible.svg'"
          mode="scaleToFill"
          @click="showPwd = !showPwd"
        />
      </view>
      <view v-if="!isCh" class="register-input">
        <input :placeholder="$t('register.confirmPasswordPH')" :password="!showCPwd">
        <image
          class="suffix"
          :src="showCPwd ? '/static/icons/visible.svg' : '/static/icons/invisible.svg'"
          mode="scaleToFill"
          @click="showCPwd = !showCPwd"
        />
      </view>
      <view class="register-tips">
        {{ $t('register.tips') }}
        <view @click="toSignIn">
          {{ $t('register.toSign') }}
        </view>
      </view>

      <view class="btn-wrapper">
        <view class="register-btn" :class="{ ch: isCh }" :disabled="!isAgreed">
          {{ $t('register.signUp') }}
        </view>
      </view>
      <view class="user-agreement">
        <view class="selection-box">
          <image
            :src="isAgreed ? '/static/images/me/selected.png' : '/static/images/me/unselected.png'"
            mode="scaleToFill"
            @click="isAgreed = !isAgreed"
          />
        </view>
        <text class="agreement-text">
          {{ $t('agreeDesc1') }}
          <text class="agreement-link">
            {{ $t('Terms of Service') }}
          </text>
          {{ $t('agreeDesc2') }}
          <text class="agreement-link">
            {{ $t('Privacy Policy') }}
          </text>
        </text>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.register-container {
  background-color: #fff;
  padding-top: 62rpx;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .register-title {
    display: flex;
    flex-direction: column;
    row-gap: 16rpx;
    padding: 0 64rpx;
    & > view {
      &:nth-child(1) {
        font-size: 48rpx;
        font-weight: 500;
        color: #24272c;
      }

      &:nth-child(2) {
        font-size: 28rpx;
        color: #aaaaaa;
      }
    }
  }
  .register-content {
    display: flex;
    flex-direction: column;
    padding: 0 64rpx;
    flex: 1;
    margin-top: 116rpx;

    .register-input {
      padding: 40rpx 32rpx 40rpx 0;
      border-bottom: 1rpx solid #e7e7e7;
      display: flex;
      .suffix {
        width: 48rpx;
        height: 48rpx;
        margin-right: 32rpx;
      }
      input {
        flex: 1;
        font-size: 32rpx;
        color: #24272c;
      }
      .get-code {
        font-size: 28rpx;
        color: #0070d5;
        padding-left: 30rpx;
        border-left: 1rpx solid #dcdfe6;
      }
    }

    .register-tips {
      display: flex;
      justify-content: flex-end;
      font-size: 28rpx;
      padding: 16rpx;
      margin-top: 12rpx;
      color: #999999;

      view {
        color: #0070d5;
        margin-left: 12rpx;
      }
    }

    .btn-wrapper {
      margin-top: 80rpx;
      .register-btn {
        width: 100%;
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        text-align: center;
        font-size: 32rpx;
        letter-spacing: 4rpx;
        color: #ffffff;
        background-color: #0070d5;
        border-radius: 80rpx;

        &.ch {
          letter-spacing: 8rpx;
        }
      }
    }

    .user-agreement {
      display: inline-flex;
      column-gap: 16rpx;
      justify-content: center;
      align-items: center;
      margin-top: 32rpx;
      word-break: break-word;
      .selection-box {
        width: 40rpx;
        height: 40rpx;
        flex-shrink: 0;
        flex-grow: 0;
        image {
          width: 40rpx;
          height: 40rpx;
        }
      }

      .agreement-text {
        font-size: 24rpx;
        color: #666666;
        display: inline;
      }
      .agreement-link {
        display: inline;
        color: #0070d5;
      }
    }
  }
}
</style>
