<script setup>
import { removeToken, isCheckedToday, delImg } from "../utils/wxtools";
import { useRouter } from "vue-router";
import { LoadUserInfoAPI, chkAPI } from "../services/auth";
import { ref } from "vue";
import { showNotify } from "vant";
const router = useRouter();

const user = ref({});

const loginOutHandle = () => {
  removeToken();
  router.push({
    name: "Home",
  });
};

//获取用户信息
const loadInfo = async () => {
  const res = await LoadUserInfoAPI();
  // console.log(res);
  user.value = res.result.userInfo;
};
loadInfo();

//签到
const checkIn = async () => {
  if (isCheckedToday) {
    showNotify({
      message: "今天已经签到过了哦",
      type: "primary",
    });
  } else {
    const res = await chkAPI();
    // console.log(res);
    loadInfo(); //重新获取积分数据
  }
};
</script>
<template>
  <div class="user">
    <van-notify />
    <div class="info">
      <img class="avatar" :src="delImg(user.avatar)" alt="" />
    </div>
    <h3>{{ user.nickName || user.userName }}</h3>
    <p style="text-align: center">积分：{{ user.score }}</p>

    <van-button
      style="display: block; margin: 12px auto"
      type="primary"
      @click="checkIn"
      >签到</van-button
    >
    <van-cell-group>
      <van-cell title="我的订单" is-link :to="{ name: 'Order' }" />
      <van-cell title="我的积分" is-link :to="{ name: 'Integral' }" />
      <van-cell title="个人信息" is-link :to="{ name: 'UserInfo' }" />
      <van-cell title="修改密码" is-link :to="{ name: 'Password' }" />
    </van-cell-group>
    <van-button
      @click="loginOutHandle"
      class="btn"
      color="linear-gradient(to right, #ff6034, #ee0a24)"
      >退出登录</van-button
    >
  </div>
</template>
<style scoped lang="scss">
.user {
  background-color: #99996606;
  .info {
    background-color: rgb(119, 194, 160);
    padding-top: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 150px;

    .avatar {
      display: block;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      position: absolute;
      bottom: -30px;
    }
  }

  h3 {
    text-align: center;
    margin-top: 40px;
  }
  .btn {
    display: block;
    width: 200px;
    height: 50px;
    margin: 0 auto;
    margin-top: 20px;
  }
}
</style>
