<template>
  <div class="login-wrapper">
    <div class="login-container">
      <div class="login-main">
        <van-tabs v-model:active="appStore.ownApp">
          <van-tab title="水利督察" name="1"></van-tab>
          <van-tab title="水利稽查" name="2"></van-tab>
        </van-tabs>
        <van-form @submit="handleLogin">
          <van-cell-group>
            <van-field v-model="form.phone" label="手机号码" placeholder="请输入手机号码"
              :rules="[{ required: true, message: '请填写手机号码' }]" />

            <van-field v-model="form.captcha" label="图片验证码" placeholder="请输入验证码"
              :rules="[{ required: true, message: '请填写验证码' }]">
              <template #button>
                <van-image width="100" height="40" :src="captchaImage" @click="refreshCaptcha" />
              </template>
            </van-field>

            <van-field v-model="form.smsCode" label="短信验证码" placeholder="请输入短信验证码"
              :rules="[{ required: true, message: '请填写短信验证码' }]">
              <template #button>
                <van-button size="small" type="primary" :disabled="countDown > 0" @click="sendSmsCode">
                  {{ countDown > 0 ? `${countDown}秒后重试` : '获取验证码' }}
                </van-button>
              </template>
            </van-field>
          </van-cell-group>

          <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
              登录
            </van-button>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onBeforeUnmount, onMounted, nextTick } from 'vue'
import { showToast } from 'vant'
import { setToken } from '@/utils/auth'
import { useAppStore } from '@/stores/app'
import { useUserStore } from '@/stores/user'
import { loginWithMessage, getCaptchaImage } from '@/api/login'
import { useRouter } from 'vue-router';

const appStore = useAppStore()
const userStore = useUserStore()
const router = useRouter()

// 表单数据
const form = ref({
  phone: '13960760931',
  captcha: '336699',
  smsCode: '336699'
})

// 图片验证码
const captchaImage = ref(null)
const imgcodeid = ref(null)
const countDown = ref(0)
let countTimer = null

function refreshCaptcha() {
  getCaptchaImage().then(async res => {
    await nextTick();
    imgcodeid.value = res.data.imgCodeId;
    captchaImage.value = "data:image/jpg;base64," + res.data.img;
  })
}

function sendSmsCode() {
  if (!form.value.phone) {
    showToast('请输入手机号码')
    return
  }
  if (!form.value.captcha) {
    showToast('请输入图片验证码')
    return
  }
  // 倒计时
  countDown.value = 60
  countTimer = setInterval(() => {
    countDown.value--
    if (countDown.value <= 0) {
      clearInterval(countTimer)
    }
  }, 1000)
  sendMessage(form.value.phone, imgcodeid.value, form.value.captcha).then((res) => {
    if (!res.success) {
      showToast(res.message);
    }
  })

}



// 处理登录
function handleLogin() {
  if (!form.value.phone || !form.value.captcha || !form.value.smsCode) {
    showToast('请填写完整信息')
    return
  }
  userStore.Login(form.value.phone, form.value.captcha, form.value.smsCode).then(res =>{
    router.push('/')
  })
}

onMounted(() => {
  refreshCaptcha()
})

// 组件卸载时清除定时器
onBeforeUnmount(() => {
  if (countTimer) clearInterval(countTimer)
})
</script>
<style lang="scss" scoped>
.login-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('@/assets/images/login_background.png');

  .login-container {
    padding: 16px;

    .login-main {
      border-radius: 10px;
      background-color: #fff;
      padding-bottom: 10px;
      overflow: hidden;
    }

  }

}
</style>