<template>
  <van-image width="100%" height="100%" :src="logo_image" />
  <div class="login-header">
    <van-row align="center">
      <van-col span="8" />
      <van-col span="8" class="title">
        <p>登&nbsp;录</p>
      </van-col>
      <van-col span="8" />
    </van-row>
  </div>
  <div class="login-section">
    <van-config-provider :theme-vars="loginTheme">
      <van-form ref="form" @submit="onSubmit">
        <van-cell-group inset style="border: 1px solid #EAEAEA;">
          <van-field v-if="use_widget" ref="refPhone" v-model="phone" name="phone" label="手机号" placeholder="手机号"
            readonly clickable :rules="[{ validator, message: '请输入正确手机号' }]" @touchstart.stop="showKeyboard" />
          <van-field v-else v-model="phone" name="validator" label="手机号" placeholder="手机号"
            :rules="[{ validator, message: '请输入正确手机号', trigger: 'onBlur' }]" />
          <van-field v-model="code" center clearable name="code" type="digit" label="短信验证码" placeholder="请输入短信验证码"
            :formatter="formatter" :rules="[{ required: true, message: '请填写验证码' }]">
            <template #button>
              <van-button v-if="countDown.current.value.total === limitSeconds" size="small" type="primary"
                :disabled="disabled" @click="sendCode">
                <span>发送验证码</span>
              </van-button>
              <van-button v-else size="small" type="primary" :disabled="disabled">
                <span>{{ countDown.current.value.seconds }} 秒重新发送</span>
              </van-button>
            </template>
          </van-field>
        </van-cell-group>
      </van-form>
    </van-config-provider>
  </div>
  <div class="btn" @click="submit">
    登&nbsp;录
  </div>

  <van-number-keyboard v-model="phone" :show="keyboard_show" :maxlength="11" @blur="keyboardBlur" />

  <!-- 图片滑块验证 -->
  <image-slider-verify :is-show="sliderShow" @done="handleConfirm" @on-close="handleClose" />
</template>

<script setup>
import Cookies from 'js-cookie'
import ImageSliderVerify from '@/components/ImageSliderVerify/index.vue'
import { loginTheme } from '@/theme-vars.js';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router'
import logo_image from '@images/denglu-top@2x.png'
import { useLogin } from '@/composables/useLogin';

const { phone, code, onSubmit, use_widget, validator, keyboardBlur, disabled, keyboard_show, refPhone, showKeyboard, form, submit, formatter, limitSeconds, countDown, sendCode, } = useLogin();
const $router = useRouter();

// TAG: 开发环境测试数据
if (import.meta.env.DEV) {
  phone.value = import.meta.env.VITE_ID
  code.value = import.meta.env.VITE_PIN
}

onMounted(() => {
  // 判断微信授权状态，进入页面时未授权需要授权跳转
  if (!Cookies.get('PHPSESSID')) {
    $router.replace({
      path: '/auth',
      query: {
        href: location.hash,
        userType: 'b'
      }
    });
  }
})

// 滑块验证成功后回调
const sliderShow = ref(false);
const handleConfirm = (val) => {
  sliderShow.value = false
  console.warn('验证成功');
}
const handleClose = () => {
  sliderShow.value = false
}
const imageVerify = () => {
  sliderShow.value = true;
}
</script>

<style lang="less" scoped>
body {
  --van-button-primary-background: white;
}

.login-header {
  margin-bottom: 1rem;

  .title {
    text-align: center;
    margin-top: 2vh;

    p {
      font-size: 2.5vh;
      margin: 1vh;
    }
  }
}

.login-section {

  // background-color: #FAFAFA;
}
.btn {
  margin: 16px;
  background-color: @base-color;
  text-align: center;
  color: @base-font-color;
  font-size: 2.25vh;
  padding: 1.5vh;
  border-radius: 5px;
}
</style>