<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '登录',
  },
}
</route>
<script setup lang="ts">
  import { t } from '@/locale'
  const loginForm = ref({
    phone: '',
    password: '',
    code: '',
  })
  const showArea = ref(false) // 是否显示地区
  const areaData = ref([
    {
      index: 'A',
      data: ['阿坝', '阿拉善', '阿里', '安康', '安庆', '鞍山', '安顺', '安阳', '澳门'],
    },
    {
      index: 'B',
      data: [
        '北京',
        '白银',
        '保定',
        '宝鸡',
        '保山',
        '包头',
        '巴中',
        '北海',
        '蚌埠',
        '本溪',
        '毕节',
        '滨州',
        '百色',
        '亳州',
      ],
    },
    {
      index: 'C',
      data: [
        '重庆',
        '成都',
        '长沙',
        '长春',
        '沧州',
        '常德',
        '昌都',
        '长治',
        '常州',
        '巢湖',
        '潮州',
        '承德',
        '郴州',
        '赤峰',
        '池州',
        '崇左',
        '楚雄',
        '滁州',
        '朝阳',
      ],
    },
    {
      index: 'D',
      data: [
        '大连',
        '东莞',
        '大理',
        '丹东',
        '大庆',
        '大同',
        '大兴安岭',
        '德宏',
        '德阳',
        '德州',
        '定西',
        '迪庆',
        '东营',
      ],
    },
    {
      index: 'E',
      data: ['鄂尔多斯', '恩施', '鄂州'],
    },
    {
      index: 'F',
      data: ['福州', '防城港', '佛山', '抚顺', '抚州', '阜新', '阜阳'],
    },
    {
      index: 'G',
      data: ['广州', '桂林', '贵阳', '甘南', '赣州', '甘孜', '广安', '广元', '贵港', '果洛'],
    },
    {
      index: 'H',
      data: [
        '杭州',
        '哈尔滨',
        '合肥',
        '海口',
        '呼和浩特',
        '海北',
        '海东',
        '海南',
        '海西',
        '邯郸',
        '汉中',
        '鹤壁',
        '河池',
        '鹤岗',
        '黑河',
        '衡水',
        '衡阳',
        '河源',
        '贺州',
        '红河',
        '淮安',
        '淮北',
        '怀化',
        '淮南',
        '黄冈',
        '黄南',
        '黄山',
        '黄石',
        '惠州',
        '葫芦岛',
        '呼伦贝尔',
        '湖州',
        '菏泽',
      ],
    },
  ])
  const isFirst = ref(false) // 是否第一次登录
  const selectGender = ref(1) // 选择性别 1男 2女
  const countdown = ref(0) // 倒计时
  const isCounting = ref(false) // 控制按钮状态
  let timer = null // 定时器

  const resetSendCode = () => {
    // 开始倒计时
    isCounting.value = true
    countdown.value = 59
    timer = setInterval(() => {
      countdown.value--
      if (countdown.value <= 0) {
        clearInterval(timer)
        isCounting.value = false // 重新启用按钮
      }
    }, 1000)
  }
  const handleClick = ({ index, city }) => {
    console.log(index, city)
  }

  const handleLogin = () => {
    // 去除空白校验未填字段
    for (const key in loginForm.value) {
      if (!loginForm.value[key].trim()) {
        uni.showToast({
          icon: 'none',
          title: '请输入' + key,
        })
        return
      }
    }
    uni.showToast({
      icon: 'none',
      title: '登录成功',
    })
    setTimeout(() => {
      toHome()
    }, 1000)
  }
  const toHome = () => {
    uni.switchTab({ url: '/pages/index/index' })
  }
  onUnload(() => {
    clearInterval(timer)
  })
</script>
<template>
  <view v-if="!isFirst" class="login-wrap">
    <view class="login-header">
      <view class="login-logo">
        <wd-img width="84rpx" height="84rpx" src="/static/images/login/login-logo.svg" />
      </view>
      <view class="login-title">
        <wd-img width="200rpx" height="36rpx" src="/static/images/login/login-title.svg"></wd-img>
      </view>
    </view>
    <view class="login-form">
      <view class="login-form-item">
        <view class="login-form-item-title">phone number</view>
        <view class="login-form-item-content">
          <view class="item-left" @click="showArea = true">
            <view class="phone-address">+86</view>
            <wd-img
              width="48rpx"
              height="48rpx"
              src="/static/images/login/login-right.svg"
            ></wd-img>
          </view>
          <wd-input class="item-right" v-model="loginForm.phone" placeholder="enter Your number" />
        </view>
      </view>
      <view class="login-form-item">
        <view class="login-form-item-title">code</view>
        <view class="login-form-item-content">
          <wd-input class="item-right code" v-model="loginForm.password" placeholder="enter code">
            <template #suffix>
              <view @click.stop="resetSendCode" v-if="!isCounting" class="code-send">send</view>
              <view v-else class="code-send base-send">
                {{ t('login.resend') }}({{ countdown }}s)
              </view>
            </template>
          </wd-input>
        </view>
      </view>
      <view class="login-form-item">
        <view class="login-form-item-title">graphic</view>
        <view class="login-form-item-content">
          <wd-input class="item-right code" v-model="loginForm.code" placeholder="enter">
            <template #suffix>
              <view class="verify-code">
                <wd-img
                  width="250rpx"
                  height="78rpx"
                  src="/static/images/login/test-code.svg"
                ></wd-img>
              </view>
            </template>
          </wd-input>
        </view>
      </view>
    </view>

    <view @click.stop="handleLogin" class="login-footer">Log in</view>
    <CommonIndexBar
      :areaData="areaData"
      @handleClick="handleClick"
      v-model="showArea"
      @close="showArea = false"
    />
  </view>
  <view v-else class="first-select-gender">
    <view @click.stop="toHome" class="top-header">{{ t('login.skip') }}</view>
    <view class="gender-content">
      <view class="gender-title">{{ t('login.title') }}</view>
      <view class="gender-tip">{{ t('login.tip') }}</view>
      <view @click="selectGender = 2" :class="['base', selectGender === 2 && 'base-active']">
        <view class="woman-img"></view>
        <view v-if="selectGender === 2" class="radio-icon"></view>
        <view v-else class="base-icon"></view>
        <view class="base-text">{{ t('login.woman') }}</view>
      </view>
      <view
        @click="selectGender = 1"
        :class="['base', 'base-man', selectGender === 1 && 'base-active']"
      >
        <view v-if="selectGender === 1" class="radio-icon"></view>
        <view v-else class="base-icon"></view>
        <view class="base-text">{{ t('login.man') }}</view>
        <view class="man-img"></view>
      </view>
    </view>
    <view @click="toHome" class="gender-footer">{{ t('cart.done') }}</view>
  </view>
</template>
<style lang="scss" scoped>
  :deep(.wd-cell.is-hover) {
    background: #ccc !important;
  }

  :deep(.wd-input__value) {
    box-sizing: border-box;
    height: 112rpx !important;
    padding: 32rpx;
    .uni-uni-input-placeholder .wd-input__placeholder {
      font-family: Inter;
      font-size: 32rpx;
      font-style: normal;
      font-weight: 400;
      line-height: 48rpx; /* 150% */
      color: var(--999, $shop-text-9);
      text-transform: capitalize;
      // .uni-input-input{

      // }
    }
  }
  .login-wrap {
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    padding: 128rpx 32rpx;
    background-image: url(@/static/images/login/login-bg.svg);
    background-size: cover;

    .login-header {
      display: flex;
      align-items: center;
      margin-bottom: 48rpx;
      .login-logo {
        margin-right: 20rpx;
      }
    }
    .login-form {
      &-item {
        margin-bottom: 40rpx;
        &-title {
          margin-bottom: 8rpx;
          font-family: 'PingFang SC';
          font-size: 28rpx;
          font-style: normal;
          font-weight: 400;
          line-height: 44rpx; /* 157.143% */
          color: var(--333, $shop-text-3);
          text-transform: capitalize;
        }
        &-content {
          display: flex;
          align-items: center;
          .item-left {
            box-sizing: border-box;
            display: flex;
            gap: 16rpx;
            align-items: center;
            padding: 32rpx;
            margin-right: 32rpx;
            font-family: Inter;
            font-size: 32rpx;
            font-style: normal;
            font-weight: 400;
            line-height: 48rpx; /* 150% */
            color: var(--333, $shop-text-3);
            text-transform: capitalize;
            background: $shop-white;
            border: 1.908rpx solid var(--f-2-f-2-f-2, $shop-bg-line);
            border-radius: 16rpx;
            .phone-address {
              margin-right: 16rpx;
            }
          }
          .code {
            width: 100% !important;
          }
          .item-right {
            flex: 1;
            height: 112rpx;
            background: $shop-white;
            border: 1.908rpx solid var(--f-2-f-2-f-2, $shop-bg-line);
            border-radius: 16rpx;

            &::after {
              height: 0 !important;
            }
          }
          .verify-code {
            display: flex;
            align-items: center;
          }
          .base-send {
            color: var(--999, $shop-text-9) !important;
          }
          .code-send {
            position: relative;
            font-family: Inter;
            font-size: 28rpx;
            font-style: normal;
            font-weight: 400;
            line-height: 44rpx; /* 157.143% */
            color: var(--ff-4-c-1-b, $shop-primary);
            text-transform: capitalize;
            &::before {
              position: absolute;
              top: 50%;
              left: -16rpx;
              display: block;
              width: 2rpx !important;
              height: 30.534rpx !important;
              content: '';
              background: var(--f-2-f-2-f-2, $shop-bg-line);
              transform: translateY(-50%);
            }
          }
        }
      }
    }
    .login-footer {
      box-sizing: border-box;
      display: flex;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 108rpx;
      padding: 32rpx 0rpx;
      margin-top: 64rpx;
      font-family: 'PingFang SC';
      font-size: 32rpx;
      font-style: normal;
      font-weight: 600; /* 150% */ /* 150% */
      line-height: 48rpx; /* 150% */
      color: $shop-white;
      text-align: center;
      background: var(
        --ff-4-c-1-bfc-7-b-1-c,
        linear-gradient(270deg, $shop-primary 0%, $shop-help 100%)
      );
      border-radius: 16rpx;
    }
  }
  .first-select-gender {
    box-sizing: border-box;
    padding: 0 32rpx;
    .top-header {
      height: 88rpx;
      margin-bottom: 80rpx;
      font-family: 'PingFang SC';
      font-size: 28rpx;
      font-style: normal;
      font-weight: 400;
      line-height: 88rpx; /* 157.143% */
      color: var(--ff-4-c-1-b, $shop-primary);
      text-align: right;
      text-transform: capitalize;
    }
    .gender-content {
      font-family: 'PingFang SC';
      font-style: normal;
      color: var(--333, $shop-text-3);
      .gender-title {
        font-size: 36rpx;
        font-weight: 600;
        line-height: 52rpx; /* 144.444% */
        color: var(--333, $shop-text-3);
        text-align: center;
        text-transform: capitalize;
      }
      .gender-tip {
        margin-top: 16rpx;
        margin-bottom: 120rpx;
        font-size: 28rpx;
        font-weight: 400;
        line-height: 44rpx; /* 157.143% */
        color: var(--666, $shop-text-6);
        text-align: center;
        text-transform: capitalize;
      }
      .base-man {
        justify-content: flex-end;
      }
      .base {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        width: 600rpx;
        height: 220rpx;
        padding: 0rpx 32rpx;
        margin: 0 auto;
        margin-bottom: 40rpx;
        font-family: 'PingFang SC';
        font-size: 48rpx;
        font-style: normal;
        font-weight: 600;
        line-height: 64rpx; /* 133.333% */
        color: var(--999, $shop-text-9);
        background: var(--f-2-f-2-f-2, $shop-bg-line);
        border-radius: 114rpx;

        .woman-img {
          flex-shrink: 0;
          width: 216rpx;
          height: 216rpx;
          margin-right: 52rpx;
          background-image: url(@/static/images/login/woman.svg);
          background-size: cover;
        }
        .radio-icon {
          flex-shrink: 0;
          width: 44rpx;
          height: 44rpx;
          background-image: url(@/static/images/cart/select.svg);
          background-size: cover;
          border-radius: 50%;
        }
        .base-icon {
          box-sizing: border-box;
          flex-shrink: 0;
          width: 42rpx;
          height: 42rpx;
          border: 4rpx solid #bbb;
          border-radius: 50%;
        }
        .man-img {
          flex-shrink: 0;
          width: 216rpx;
          height: 216rpx;
          margin-left: 90rpx;
          background-image: url(@/static/images/login/man.svg);
          background-size: cover;
        }
        .base-text {
          margin-left: 16rpx;
          font-family: 'PingFang SC';
          font-size: 48rpx;
          font-style: normal;
          font-weight: 600;
          line-height: 64rpx; /* 133.333% */
          color: var(--ff-4-c-1-b, $shop-primary);
        }
      }
      .base-active {
        background: #ffe6e0;
        border: 2rpx solid var(--ff-4-c-1-b, $shop-primary);
      }
    }
    .gender-footer {
      box-sizing: border-box;
      display: flex;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 84rpx;
      padding: 10rpx 66rpx;
      margin-top: 220rpx;
      font-family: 'PingFang SC';
      font-size: 32rpx;
      font-style: normal;
      font-weight: 600;
      line-height: 48rpx; /* 150% */
      color: $shop-white;
      text-align: center;
      text-transform: capitalize;
      background: var(
        --ff-4-c-1-bfc-7-b-1-c,
        linear-gradient(270deg, $shop-primary 0%, $shop-help 100%)
      );
      border-radius: 160rpx;
    }
  }
</style>
