<template>
  <view class="mine-container">

    <Header :show-return="false">我的</Header>
    <!-- user info -->
    <view class="userinfo-box">
      <!-- 未登录 -->
      <view
          class="userinfo-box__inner no-login"
          v-if="!(user && user.id)"
          @click="toLogin"
      >
        <image
            class="head"
            src="@/static/icon/user/mine.png"
        />
        <view class="user-info">
          点击登录
        </view>
      </view>
      <!-- 已登录 -->
      <view
          class="userinfo-box__inner"
          @click="toUserCenter"
          v-else
      >
        <image
            class="head"
            :src="user.avatar"
        />
        <view class="user-info">
          {{ user.nickname }}
        </view>
      </view>
    </view>

    <!-- order card -->
    <GridCard
        :list="orderIconList"
        :dot-info="orderUserCountData"
        title="我的订单"
        button-text="查看所有订单"
        @button-click="toAllOrder"
    ></GridCard>

    <!-- footprint card -->
    <GridCard
        :list="cardOneList"
        :dot-info="orderUserCountData"
    ></GridCard>

    <GridCard
        :list="cardTwoList"
        :dot-info="orderUserCountData"
    ></GridCard>

  </view>

</template>


<script setup>
import { ref } from 'vue'
import Header from '@/components/Header/index.vue'

import { orderUserCount } from '@/api/order'
import { onShow } from '@dcloudio/uni-app'
import { useMainStore } from '@/store/store'
import { useRouter } from "@/hooks/useRouter";
import { storeToRefs } from "pinia";
import GridCard from "@/pages/user/components/GridCard.vue";
import { cardOneList, cardTwoList, orderIconList } from "@/pages/user/index.data";

const mainStore = useMainStore()
const {user} = storeToRefs(mainStore);
const {push} = useRouter()
const orderUserCountData = ref(null)

function toAllOrder() {
  push({url: '/pages/orderList/orderList'}, {data: {type: -1}})
}

function toUserCenter() {
  push({url: '/pages/userInfo/index'})
}

function toLogin() {
  push({url: '/pages/login/guid'})
}

const handleOrderUserCount = async () => {
  orderUserCountData.value = await orderUserCount()
}


onShow(() => {
  mainStore.getUserInfo()
  handleOrderUserCount()

  if (user && user.id) {
  }
})


</script>

<style
    lang="scss"
    scoped
>
.mine-container {
  @include usePadding(40, 0);

  .userinfo-box {
    width: 100%;
  }

  .userinfo-box {
    margin: 50rpx 0;

    &__inner {
      @include useFlex(space start, center);

      .head {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
      }

      .user-info {
        @include useFlex(space start, center);
        padding-left: 30rpx;
        font-size: 34rpx;
      }

      &.no-login {

      }
    }

  }

}

//.user-card {
//  padding: 50rpx 0;
//
//  button {
//    border: 0;
//    background: none;
//
//    &:after {
//      display: none;
//    }
//  }
//}
//
//.avatar-box {
//  display: flex;
//  align-items: center;
//
//  .avatar {
//    width: 120rpx;
//    height: 120rpx;
//    background: #FFFFFF;
//    border-radius: 50%;
//    opacity: 1;
//    margin: 0 30rpx;
//  }
//
//  .avatar-name {
//    font-size: 34rpx;
//    color: #333333;
//  }
//}
</style>
