<template>
  <div class="login">
    <van-tabs v-model:active="TabActiveName">
      <van-tab title="账号登录" name="a"></van-tab>
      <!-- <van-tab title="手机号登录" name="b"></van-tab> -->
    </van-tabs>
    <van-form @submit="onSubmit" class="form" v-show="TabActiveName == 'a'">
      <van-field v-model="form.userName" name="userName" label="用户名" placeholder="用户名" left-icon="manager"
        label-width="50px" :rules="[{ required: true, message: '请填写用户名' }]" />
      <van-field v-model="form.password" type="password" name="password" label="密码" placeholder="密码" left-icon="lock"
        label-width="50px" :rules="[{ required: true, message: '请填写密码' }]" />
      <van-field name="radio" label="人员类型" left-icon="manager">
        <template #input>
          <van-radio-group v-model="form.type" direction="horizontal">
            <van-radio name="01">民警</van-radio>
            <van-radio name="02">辅警</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit" :loading="isLoading" loading-type="spinner"
          loading-text="登录中...">登录</van-button>
      </div>
    </van-form>
    <van-form @submit="onSubmit" class="form" v-show="TabActiveName == 'b'">
      <van-field v-model="form.phone" name="phone" label="手机号" placeholder="手机号" left-icon="manager" label-width="50px"
        :rules="[{ required: true, message: '请填写手机号' }]" />
      <van-field v-model="form.code" center clearable label="短信验证码" placeholder="请输入短信验证码" left-icon="lock"
        :rules="[{ required: true, message: '请输入短信验证码' }]">
        <template #button>
          <van-button type="primary" :disabled="countdown > 0" @click="sendCode">
            {{ countdown > 0 ? `${countdown}s后重新发送` : '发送验证码' }}
          </van-button>
          <!-- <van-button size="small" type="primary">发送验证码</van-button> -->
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit" :loading="isLoading" loading-type="spinner"
          loading-text="登录中...">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import "vant/es/toast/style";
import Base64 from "base-64";
import { login, idCardlogin, getUserOrFjInfo } from "../../api/user.js";
import { computed, ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { Overlay, Toast } from "vant";
import axios from "axios";
const router = useRouter();
const store = useStore();
const TabActiveName = ref()
const count = ref(0);
const form = reactive({
  userName: "",
  password: "",
  type: "02"
});
const countdown = ref(0);
const isLoading = ref(false);
onMounted(() => {
  _idCardlogin();
});
//身份证登录
function _idCardlogin() {
  try {
    let userinfo = JSON.parse(bridge.getLocation());
    Toast.loading({
      message: "登录中...",
      forbidClick: true,
      loadingType: "spinner",
      overlay: true,
      duration: 0,
    });
    isLoading.value = true;
    form.userName = userinfo.app_sfzh;
    idCardlogin({ idCardNo: userinfo.app_sfzh })
      .then((res) => {
        const token = res.jwtToken;
        _getUserInfo(res.userId, res.idEntityCard, res.deptList[0].deptName, res.deptList);
        store.commit("setToken", token);
      })
      .catch((err) => {
        Toast.clear();
        isLoading.value = false;
      });
  } catch (error) { }
}
const sendCode = async () => {
  // 发送短信验证码的逻辑
  // 比如调用API发送短信
  // console.log('发送验证码给', form.value.phone);

  // 模拟计时器
  countdown.value = 60;
  const intervalId = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--;
    } else {
      clearInterval(intervalId);
    }
  }, 1000);
};
//手动登录
const onSubmit = (e) => {
  isLoading.value = true;
  Toast.loading({
    message: "登录中...",
    forbidClick: true,
    loadingType: "spinner",
    overlay: true,
    duration: 0,
  });
  login({
    kaptcha: "",
    userName: e.userName.trim(),
    password: Base64.encode(e.password.trim()),
    type: form.type
  })
    .then((res) => {
      const token = res.jwtToken;
      _getUserInfo(res.userId, res.idEntityCard, res.deptList[0].deptName, res.deptList);
      store.commit("setToken", token);
    })
    .catch((err) => {
      Toast.clear();
      isLoading.value = false;
    });
};
//获取用户信息
function _getUserInfo(id, sfzh, deptName, deptList) {
  getUserOrFjInfo({ id, sfzh }).then((res) => {
    let { userName, id, idEntityCard, mobile, inDustRialId, sex } = res;
    let userinfo = {
      deptName,
      userName,
      deptList,
      id,
      idEntityCard,
      mobile,
      inDustRialId,
      sex,
    };
    store.commit("userStatus", userinfo);
    //获取用户上次访问的首页
    let path = getStorage("homeUrl");
    setTimeout(() => {
      isLoading.value = false;
      router.replace("/Home");
      Toast.clear();
    }, 1e3);
  });
}
</script>

<style lang="scss" scoped>
.login {
  width: 90%;
  margin: 0 auto;
  margin-top: 20vh;
}

.form {
  margin-top: 10%;
  background-color: #fff;
  overflow: hidden;
}
</style>
