<script setup lang="ts">
let pageTitle: any = ref("用户中心");
useHead(() => ({
  title: pageTitle.value,
}));
import { ArrowRight } from "@element-plus/icons-vue";
import { useLogin } from "~/api/login/loginService";
import type msgListQuery from "~/api/msg/msgQuery";
import { useMsg } from "~/api/msg/msgService";
import { useOrder } from "~/api/order/orderService";
import { useSpu } from "~/api/spu/spuService";
const { getOrderSummary } = useOrder();
const { getPresaleNotifySummary } = useSpu();
const { getMsgList, getMsgSummary } = useMsg();
import type msgType from "~/domain/Msg";
import { type msgSummaryType } from "~/domain/Msg";
import { type orderSummaryType } from "~/domain/Order";
import { DefaultQuery, pageSizes } from "~/domain/query";
import { type MonitorSummary } from "~/domain/Monitor";
import { useMonitor } from "~/api/monitor/monitorService";
import { useAll } from "~/api/pubAll/service";
const { getUserStatistics, UserScorePage, getUserInfo } = useAll();
const route = useRoute();
const summaryData: Ref<MonitorSummary> = ref({} as MonitorSummary);
const user = useUserStore();
let infoNum: any = ref({});
const defaultQuery = () => {
  const q = new DefaultQuery({}) as msgListQuery;
  q.pageSize = 3;
  return q;
};
const JFList: any = ref([]);

async function getUserStatisticsFun() {
  const res: any = await getUserStatistics();
  if (res.httpCode == 200) {
    infoNum.value = res.data;
  }
}
async function UserScorePageFun() {
  const res: any = await UserScorePage({
    data: { alterType: 0, endTime: "", startTime: "" },
    pageNum: 1,
    pageSize: 5,
  });
  if (res.httpCode == 200) {
    JFList.value = res.data.records;
  }
}

function setNumber(i: any) {
  if (i > 99) {
    return "99+";
  } else {
    return i;
  }
}

const userInfo: any = useCookie("userInfo");
let loading = ref(true);
onMounted(() => {
  if (user.value?.userInfo?.id) {
    user.value.userInfo = userInfo.value;
    loading.value = false;
    getUserInfoFun();
    getUserStatisticsFun();
    UserScorePageFun();
  } else {
    return navigateTo({
      path: "/login",
      query: { redirect: route.fullPath },
    });
  }
});
async function getUserInfoFun() {
  let res: any = await getUserInfo();
  if (res.httpCode == 200) {
    user.value.userInfo = res.data;
  }
}
function linkTo(type: string) {
  // return
  // navigateTo({
  //   path: "/admin/monitor",
  //   query: {
  //     type: type,
  //   },
  // });
}
const tokenKey: any = useCookie("tokenKey");
async function linkToMsg() {
  if (!user.value.isLogin) return;
  navigateTo("/home/message");
}
async function linkToSet() {
  if (!user.value.isLogin) return;
  navigateTo("/home/setting");
}
</script>
<template>
  <div class="admin-boxs-bg">
    <div class="admin-wrap user-wrap" v-loading="loading">
      <template v-if="user?.userInfo?.id">

        <div class="account-box">
          <div class="account-wrap">
            <div class="headImg">
              <NuxtImg v-if="user.userInfo.headImg" :src="user.userInfo.headImg" placeholder="/img/loading.png" />
            </div>
            <div class="aa">
              <p class="ml12 fs14" style="font-weight: bold;">{{ user.userInfo.name }}</p>
              <p class="ml12 fs12" style="">{{user.userInfo.level==1?'铜牌会员':user.userInfo.level==2?'银牌会员':user.userInfo.level==3?'黄金会员':user.userInfo.level==4?'白金会员':user.userInfo.level==5?'钻石会员':'皇冠会员'}}（当前经验值：{{user.userInfo.empiricalPoint}}）</p>
            </div>
          </div>
          <div class="btn-wrap">
            <img @click="linkToMsg" src="@/assets/img/message.png">
            <img src="@/assets/img/ico/setting.svg" @click="linkToSet" />
          </div>
        </div>

        <div class="order-wrap bleak-wrap">
          <h3 class="user-title mb15_i">
            <span>我的订单</span>
            <NuxtLink to="/home/order/list">
              全部
              <el-icon>
                <ArrowRight />
              </el-icon>
            </NuxtLink>
          </h3>
          <div class="bleak-con">
            <ul class="bleak-ul">
              <li class="bleak-li">
                <NuxtLink :to="{path:'/home/order/list',query:{type:'waitout'}}">
                  <div class="number">
                    <img src="@/assets/img/user/order_1.png" loading="lazy" placeholder="/img/loading.png">
                    <span v-if="infoNum.unPayNum">{{setNumber(infoNum.unPayNum)}}</span>
                  </div>
                  <p class="bleak-text">待付款</p>
                </NuxtLink>
              </li>
              <li class="bleak-li">
                <NuxtLink :to="{path:'/home/order/list',query:{type:'preout'}}">
                  <div class="number">
                    <img src="@/assets/img/user/order_2.png" loading="lazy" placeholder="/img/loading.png">
                    <span v-if="infoNum.unPayNum">缺少</span>
                  </div>
                  <p class="bleak-text">待审核</p>
                </NuxtLink>
              </li>
              <li class="bleak-li">
                <NuxtLink :to="{path:'/home/order/list',query:{type:'exception'}}">
                  <div class="number">
                    <img src="@/assets/img/user/order_3.png" loading="lazy" placeholder="/img/loading.png">
                    <span v-if="infoNum.unDeliverNum">{{setNumber(infoNum.unDeliverNum)}}</span>
                  </div>
                  <p class="bleak-text">未发货</p>
                </NuxtLink>
              </li>
              <li class="bleak-li">
                <NuxtLink :to="{path:'/home/order/list',query:{type:'cancel'}}">
                  <div class="number">
                    <img src="@/assets/img/user/order_4.png" loading="lazy" placeholder="/img/loading.png">
                    <span v-if="infoNum.unReceiveNum">{{setNumber(infoNum.unReceiveNum)}}</span>
                  </div>
                  <p class="bleak-text">待收货</p>
                </NuxtLink>
              </li>
            </ul>
          </div>
        </div>

        <div class="monitor-wrap bleak-wrap">
          <h3 class="user-title">
            <span>我的资产</span>
          </h3>
          <div class="bleak-con">
            <ul class="bleak-ul">
              <li class="bleak-li mb1_i" @click="linkTo('priceDecreaseOn')">
                <p class="bleak-text jj">优惠券</p>
                <h3>{{summaryData.priceDecreaseOnCount!=undefined?summaryData.priceDecreaseOnCount:'0'}}</h3>
              </li>
              <li class="bleak-li mb1_i" @click="linkTo('priceIncreaseLaterOn')">
                <p class="bleak-text jjsj">积分</p>
                <h3>{{JFList[0]?.totalScore || 0}}</h3>
              </li>
              <li class="bleak-li mb1_i" @click="linkTo('stockSellout')">
                <p class="bleak-text ysq">采购晶</p>
                <h3>{{summaryData.stockSelloutCount!=undefined?summaryData.stockSelloutCount:'0'}}</h3>
              </li>
              <li class="bleak-li mb1_i" @click="linkTo('stockLowOn')">
                <p class="bleak-text kcbz">预付余额</p>
                <h3>{{summaryData.stockLowCount!=undefined?summaryData.stockLowCount:'0'}}</h3>
              </li>
            </ul>
          </div>
        </div>
        <div class="fw-wrap bleak-wrap">
          <h3 class="user-title mb15_i">
            <span>更多服务</span>
          </h3>
          <div class="bleak-con">
            <ul class="bleak-ul bleak-more">
              <li class="bleak-li">
                <NuxtLink :to="{path:'/home/Inquiry'}">
                  <div class="number">
                    <img src="@/assets/img/user/user_more_1.png" loading="lazy" placeholder="/img/loading.png">
                  </div>
                  <p class="bleak-text">我的询价</p>
                </NuxtLink>
              </li>
              <li class="bleak-li">
                <NuxtLink :to="{path:'/home/order/bom'}">
                  <div class="number">
                    <img src="@/assets/img/user/user_more_1.png" loading="lazy" placeholder="/img/loading.png">
                  </div>
                  <p class="bleak-text">我的BOM</p>
                </NuxtLink>
              </li>
              <li class="bleak-li">
                <NuxtLink :to="{path:'/home/user/address'}">
                  <div class="number">
                    <img src="@/assets/img/user/user_more_2.png" loading="lazy" placeholder="/img/loading.png">
                  </div>
                  <p class="bleak-text">地址管理</p>
                </NuxtLink>
              </li>
              <li class="bleak-li">
                <NuxtLink :to="{path:'/home/collect'}">
                  <div class="number">
                    <img src="@/assets/img/user/user_more_3.png" loading="lazy" placeholder="/img/loading.png">
                  </div>
                  <p class="bleak-text">我的收藏</p>
                </NuxtLink>
              </li>
              <li class="bleak-li">
                <NuxtLink :to="{path:'/home/user/invoice'}">
                  <div class="number">
                    <img src="@/assets/img/user/user_more_4.png" loading="lazy" placeholder="/img/loading.png">
                  </div>
                  <p class="bleak-text">我的发票</p>
                </NuxtLink>
              </li>
              <!-- <li class="bleak-li">
              <NuxtLink :to="{path:'/home/support'}">
                <div class="number">
                  <img src="@/assets/img/user/user_more_5.png" loading="lazy" placeholder="/img/loading.png">
                </div>
                <p class="bleak-text">售后服务</p>
              </NuxtLink>
            </li> -->
              <!-- <li class="bleak-li">
              <NuxtLink :to="{path:'/admin/product/want',query:{type:'success'}}">
                <div class="number">
                  <img src="@/assets/img/user/user_more_6.png" loading="lazy" placeholder="/img/loading.png">
                </div>
                <p class="bleak-text">代付订单</p>
              </NuxtLink>
            </li> -->
              <li class="bleak-li">
                <NuxtLink :to="{path:'/about'}">
                  <div class="number">
                    <img src="@/assets/img/user/user_more_7.png" loading="lazy" placeholder="/img/loading.png">
                  </div>
                  <p class="bleak-text">关于合科泰</p>
                </NuxtLink>
              </li>
            </ul>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<style scoped lang="scss">
.admin-boxs-bg {
  background-color: #fff;
}
.user-wrap {
  padding: 0px 0px 66px 0px;
  background: linear-gradient(180deg, $mainColor, hsla(0, 0%, 100%, 0) 300px);
}
.account-box {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 12px;
  justify-content: space-between;
  height: 120px;
  .btn-wrap {
    display: flex;
    align-items: center;
    img {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      margin-left: 10px;
    }
  }
}
.account-wrap {
  display: flex;
  align-items: center;
  .aa {
    color: #fff;
  }
  p {
    line-height: 24px;
  }
  .headImg {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    img {
      width: 48px;
      height: 48px;
      object-fit: cover;
      border-radius: 50%;
    }
  }
}

.bleak-wrap {
  background: #fff;
  border-radius: 4px;
  padding: 18px 0px;
  margin: 12px;
  border: 1px solid #f4f4f4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  &.order-wrap,
  &.fw-wrap {
    margin-bottom: 0;
    padding-bottom: 0;
  }
  &.message-wrap {
    padding-bottom: 6px;
    .user-title {
      margin-bottom: 6px;
    }
  }
  .user-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 0 12px;
    height: 22px;
    align-items: center;
    span {
      font-weight: bold;
      font-size: 14px;
      i {
        color: #999999;
        font-size: 12px;
        font-style: unset;
        font-weight: 400;
        margin-left: 5px;
      }
    }
    a {
      display: flex;
      color: #666;
      align-items: center;
      font-size: 12px;
      height: 22px;
      .el-icon {
        margin-left: 2px;
        color: #888;
      }
    }
  }
}
.bleak-con {
  color: #333;
  .message-ul {
    padding: 0 15px;
  }
  .message-li {
    position: relative;
    .message-describe,
    h3 {
      overflow: hidden;
      text-overflow: ellipsis;
      word-wrap: break-word;
      word-break: break-all;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      color: #666;
      font-size: 12px;
      line-height: 20px;
    }
    h3 {
      -webkit-line-clamp: 1;
      font-size: 14px;
      margin-bottom: 4px;
      position: relative;
      line-height: 24px;
      font-weight: bold;
    }
    &.unread {
      h3 {
        color: #333;
      }
      &::before {
        position: absolute;
        content: "";
        width: 6px;
        height: 6px;
        background: $mainColor;
        border-radius: 50px;
        top: 9px;
        left: -2px;
      }
    }
  }
  .bleak-ul {
    display: flex;
    justify-content: flex-start;
  }
  .bleak-more {
    flex-wrap: wrap;
  }
  .bleak-li {
    text-align: center;
    width: 25%;
    min-width: 25%;
    position: relative;
    margin-bottom: 20px;
    h3 {
      line-height: 22px;
      font-size: 20px;
      font-weight: bold;
      margin-top: 10px;
    }
    .number {
      position: relative;
      width: 40px;
      margin: 0 auto 8px;
      img {
        width: 40px;
        height: 40px;
      }
      span {
        padding: 0 5px;
        height: 16px;
        color: #fff;
        background: $mainColor;
        position: absolute;
        font-size: 10px;
        border-radius: 30px;
        top: -6px;
        right: -8px;
        min-width: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .bleak-text {
      line-height: 22px;
      font-size: 14px;
      position: relative;
    }
  }
}
</style> 
