<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"
      >
        <view class="flex flex-ai__center">
          <image
              class="head"
              :src="defaultAvatarIcon"
          />
          <view class="user-info">
            点击登录
          </view>
        </view>
      </view>
      <!-- 已登录 -->
      <view
          class="userinfo-box__inner"
          @click="toUserCenter"
          v-else
      >
        <view class="flex flex-ai__center">
          <image
              class="head"
              :src="user.avatar"
          />
          <view class="user-info">
            {{ user.nickname }}
          </view>
        </view>
        <view
            class="sign-box"
            @click.stop="goSignIn">
          <image :src="mySignIn" />
          签到
        </view>
      </view>
    </view>

    <!-- 账户信息 -->
    <view class="account-box">
      <template
          v-for="item in accountList"
          :key="item.id">
        <view
            v-if="user"
            class="account-item"
            @click.stop="handleJump(item)">
          <view class="count">
            {{ user[item.field] || 0 }}
          </view>
          <view class="title">
            {{ item.label }}
          </view>
        </view>
      </template>

    </view>

    <!-- VIP 信息 未激活 -->
    <view
        class="vip-box vip-none"
        @click="goMemberCenter"
        v-if="!memberLeverInfo.currentLevel">
      <view
          class="vip-box__inner flex flex-ai__center flex-jc__sb"
          :style="{backgroundImage:`url(${myVip1})`}">
        <image
            class="icon"
            :src="noneVip" />
        <view class="vip-text">
          开通享更多特权，省钱又省心
        </view>
        <view class="vip-button">
          立即激活
        </view>
      </view>
    </view>

    <!-- VIP 信息 激活 -->
    <view
        class="vip-box"
        @click="goMemberCenter"
        v-else>
      <view
          class="vip-box__inner "
          :style="{backgroundImage:`url(${myVip1})`}">
        <view class="flex flex-ai__center flex-jc__sb">
          <image
              class="icon"
              :src="memberLeverInfo.currentLevel.iconUrl" />
          <view class="vip-text flex flex-ai__center">
            {{ memberLeverInfo.currentLevel.levelName }}
            <view class="process">
              <view
                  class="schedule"
                  :style="{width: `${memberLeverInfo.needGrowthValue/memberLeverInfo.nextLevel.growthValue}%`}"></view>
            </view>
          </view>
          <view class="vip-button">
            查看权益 >
          </view>
        </view>
        <view class="tips">
          再获取{{ memberLeverInfo.needGrowthValue }}经验，可升级为{{ memberLeverInfo.nextLevel.levelName }}会员
        </view>
      </view>
    </view>
    <!-- 大卡片 -->
    <view class="big-card">
      <!-- order card -->
      <GridCard
          :list="orderIconList"
          :dot-info="orderUserCountData"
          title="我的订单"
          button-text="查看所有订单"
          @button-click="toAllOrder"
      />

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

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


  </view>
</template>


<script setup>
import { computed, 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 "@/root/user/components/GridCard.vue";
import { accountList, cardOneList, cardTwoList, orderIconList } from "@/root/user/index.data";
import { defaultAvatarIcon, mySignIn, myVip1, myVipNone, noneVip } from "@/utils/images";
import { useInterface } from "@/hooks/useInterface";
import { useJump } from "@/hooks/useJump";
import { getUserMemberLevel } from "@/api/member";

const mainStore = useMainStore()
const {user} = storeToRefs(mainStore);
const {push} = useRouter()
const {toast} = useInterface();
const {goSignIn, goMemberCenter} = useJump()
const orderUserCountData = ref(null)

const filterCardTwo = computed(() => {
  if (!user.value) return []
  // 判断是否又核销权限
  if (user.value.writeOffAuthority) {
    return cardTwoList
  } else {
    return cardTwoList.filter(item => item.label !== '订单核销')
  }
})

function toAllOrder() {
  if (!user.value) return toast({title: '请先登录'})
  push({url: '/pages/orderList/orderList'}, {data: {type: -1}})
}

function toUserCenter() {
  if (!user.value) return toast({title: '请先登录'})
  push({url: '/pages/userInfo/index'})
}

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

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

// =============================== 会员信息 ====================================
const memberLeverInfo = ref({
  currentGrowthValue: 0,
  currentLevel: null,
  needGrowthValue: 0,
  nextLevel: null
})

async function doGetUserMemberLevel() {
  memberLeverInfo.value = await getUserMemberLevel()
}

function handleJump(item) {
  if (!item.path) return toast({title: '暂未开放~'})
  if (typeof item.path === 'function') {
    item.path()
  }
}

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


</script>

<style
    lang="scss"
    scoped
>
.mine-container {
  background: linear-gradient(to bottom, #fff 0%, #fff 28%, #b0b0b0 40%, #fff 41%);

  .userinfo-box {
    @include usePadding(32, 0);
    width: 100%;
    margin: 50rpx 0 0 0;

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

      .head {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        border: 5rpx solid #fff;
      }

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

      .sign-box {
        @include useFlex(center, center);
        @include usePadding(16, 12);
        border: 1rpx solid #E5E5E5;
        font-weight: bold;
        font-size: 24rpx;
        border-radius: 50rpx;

        image {
          width: 40rpx;
          height: 40rpx;
        }
      }

      &.no-login {

      }
    }

  }

  .account-box {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 32rpx 0;

    .account-item {
      @include useFlex(center, center, column);
      font-weight: bold;
      font-size: 32rpx;
      color: #333;
      position: relative;


      &:after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1rpx;
        height: 50%;
        background: $tips-color;
      }

      &:last-child {
        &:after {
          width: 0;
        }
      }

      .title {
        color: $tips-color;
        font-size: 24rpx;
        font-weight: normal;
      }
    }
  }

  .vip-box {
    width: 100%;
    height: 132rpx;
    @include usePadding(32, 0);

    &__inner {
      @include usePadding(32, 25);
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-size: 100% 100%;

      .icon {
        width: 56rpx;
        height: 56rpx;
      }

      .vip-text {
        width: 60%;
        color: #FFF8E8;
        font-weight: bold;
        font-size: 28rpx;

        .process {
          flex-grow: 1;
          height: 10rpx;
          margin-left: 12rpx;
          border-radius: 10rpx;
          overflow: hidden;
          background: rgba(255, 255, 255, 0.1);
          position: relative;

          .schedule {
            height: 100%;
            background: #FFF8E8;
            border-radius: 10rpx;
            left: 0;
            top: 0;
          }
        }
      }

      .vip-button {
        @include usePadding(0, 10);
        color: #FFF8E8;
        font-size: 24rpx;
        border-radius: 8rpx;
      }

      .tips {
        margin-top: 10rpx;
        color: #FFF8E8;
        font-size: 20rpx
      }
    }
  }

  .vip-none {
    .vip-button {
      @include usePadding(24, 10);
      background: linear-gradient(45deg, #FAEECB, #F2D7A9);
      color: #272A3F;
      font-size: 24rpx;
      border-radius: 8rpx;
    }

  }

  .big-card {
    width: 100%;
    background: #f6f6f6;
    border-radius: 30rpx;
    @include usePadding(32, 32);

  }
}

</style>
