<script setup lang="ts">
import FfButton from '@/components/ffButton.vue'

definePage({
  style: {
    'navigationBarTitleText': '',
    'navigationStyle': 'default',
    'backgroundColor': '#ffffff',
    'navigationBarBackgroundColor': '#ffffff',
    'app-plus': {
      bounce: 'none',
    },
  },
})

const phone = ref('')
const pwd = ref('')
const captcha = ref('')
const showPwd = ref(false)
// 是否使用短信验证码登录
const isCaptcha = ref(false)
const isAgreed = ref(false)

const locale = uni.getLocale()
const isCh = computed(() => locale === 'zh-Hans')
const loginDisable = computed(() => {
  if (!isAgreed.value) {
    return true
  }
  if (isCaptcha.value) {
    if (captcha.value && phone.value) {
      return false
    }
    return true
  }
  else {
    if (phone.value && pwd.value) {
      return false
    }
    return true
  }
})

function toRegister() {
  uni.navigateTo({
    url: '/pages/me/auth/register',
  })
}

function toForgot() {
  uni.navigateTo({
    url: '/pages/me/auth/forgot',
  })
}

onMounted(() => {
  console.log(locale)
})
</script>

<template>
  <view class="login-container">
    <view class="login-title">
      <view>账号密码登录</view>
      <view>使用已经注册过的手机号登录</view>
    </view>
    <view class="login-content">
      <view class="login-input">
        <input v-model="phone" placeholder="请输入手机号">
      </view>
      <view v-if="isCaptcha && isCh" class="login-input">
        <input v-model="captcha" :placeholder="$t('forgot.captchaPH')">
        <view class="get-code">
          {{ $t('forgot.getCaptcha') }}
        </view>
      </view>
      <view v-else class="login-input">
        <input v-model="pwd" placeholder="请输入密码" :password="!showPwd">
        <image
          class="suffix"
          :src="showPwd ? '/static/icons/visible.svg' : '/static/icons/invisible.svg'"
          mode="scaleToFill"
          @click="showPwd = !showPwd"
        />
      </view>
      <view class="login-forgot" @click="toForgot">
        忘记密码?
      </view>

      <view class="btn-wrapper">
        <ff-button class="login-btn" :disabled="loginDisable">
          登录
        </ff-button>
        <view class="addition">
          <view @click="toRegister">
            立即注册
          </view>
          <view @click="isCaptcha = !isCaptcha">
            {{ isCaptcha ? '密码登录' : '短信登录' }}
          </view>
        </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>
        <view class="agreement-text">
          我已阅读并同意
          <view class="agreement-link">
            《用户服务协议》
          </view>
          和
          <view class="agreement-link">
            《隐私政策》
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.login-container {
  background-color: #fff;
  padding-top: 62rpx;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .login-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;
      }
    }
  }
  .login-content {
    display: flex;
    flex-direction: column;
    padding: 0 64rpx;
    flex: 1;
    margin-top: 116rpx;

    .login-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;
      }
    }

    .login-forgot {
      display: flex;
      justify-content: flex-end;
      font-size: 28rpx;
      color: #0070d5;
      padding: 16rpx;
      margin-top: 12rpx;
    }

    .btn-wrapper {
      margin-top: 80rpx;
      .addition {
        display: flex;
        font-size: 28rpx;
        color: #666666;
        text-align: center;
        margin-top: 34rpx;
        > view {
          flex: 1;

          &:first-child {
            color: #0070d5;
            border-right: 1rpx solid #dcdfe6;
          }
        }
      }
    }

    .user-agreement {
      display: flex;
      column-gap: 16rpx;
      justify-content: center;
      align-items: center;
      margin-top: auto;
      //   margin-bottom: 100rpx;
      position: absolute;
      bottom: 100rpx;
      .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: flex;
      }
      .agreement-link {
        color: #0070d5;
      }
    }
  }
}
</style>
