<template>
  <div class="user-header rounded row items-center" :style="{ background: userTheme?.bg }">
    <el-avatar :size="64" :src="userInfo.photo" shape="square" 
    :style="{ BackgroundColor: userTheme?.color }" 
    style="font-size: 36px;font-weight: bold;"></el-avatar>
    <div class="q-ml-lg text-white col">
      <div class="" style="font-size: 20px;">{{ userInfo.nickname }}</div>
      <!-- <div class="q-mt-sm text-info">个人账号ID：{{ userInfo.cardno??'8027970449819221090' }}</div> -->
    </div>
    <div class="text-white">{{ userTheme?.desc }}</div>
    <div :style="{'background':vipTheme.color}" v-if="userTheme?.name=='FREE'" @click="()=>orderVisible=true" class="text-white pingfangr q-ml-lg rounded cusor-pointer q-py-md q-px-lg no-select">解锁专业版</div>
    <!-- <div :style="{'background':vipTheme.color}" v-if="1==2" class="text-white pingfangr q-ml-lg rounded cusor-pointer q-py-md q-px-lg no-select">续费VIP</div> -->
    <!-- <div :style="{'background':enTheme.color}" v-if="userTheme?.name=='FREE'" class="text-white pingfangr q-ml-lg rounded cusor-pointer q-py-md q-px-lg no-select">升级为企业</div> -->
  </div>

  <div class="q-mt-xl">
    <div class="user-label text-grey-8">我的权益</div>
    <div class="row">
      <el-card class="user-card q-mr-lg" shadow="never">
        <div class="row items-center">
          <div class="col">
            <span class="title">行程设计</span>
            <div class="text-small text-info q-mt-sm">会员可以无限制创建行程</div>
          </div>
          <el-button type="info" class="normal">开通会员</el-button>
        </div>
        <div style="font-size: 14px;" class="row items-center q-mt-lg">
          <span class="text-grey-8">当前已创建：</span>
          <span class="text-dark q-ml-md cursor-pointer" @click="goSpace">{{TravelDesign.tripCount}}个行程</span>
          <IconRight :size="20"></IconRight>
          <div class="col"></div>
          <template v-if="!userInfo.iv && !userInfo.it">
            <span class="text-grey-8">还可创建：</span>
            <span class="text-dark q-ml-md">{{1-TravelDesign.tripCount<0?0:(1-TravelDesign.tripCount)}}个行程</span>
          </template>
        </div>
      </el-card>
      <el-card class="user-card" shadow="never">
        <div class="row items-center">
          <div class="col">
            <span class="title">授权模板</span>
            <div class="text-small text-info q-mt-sm">会员可以使用平台全部预设模板</div>
          </div>
          <!-- <el-button type="info" class="normal">开通会员</el-button> -->
        </div>
        <div style="font-size: 14px;" class="row items-center q-mt-lg">
          <span class="text-grey-8">当前模板可用范围：</span>
          <span class="text-dark q-ml-md cursor-pointer">{{ !userInfo.iv && !userInfo.it?'免费模板':'全部平台模板' }}</span>
        </div>
      </el-card>
    </div>
  </div>
  <div class="q-mt-xl">
    <div class="user-label text-grey-8">更多权益</div>
    <div class="row">
      <el-card class="user-card" shadow="never">
        <div class="row items-center">
          <div class="col">
            <span class="title">存储空间</span>
            <div class="text-small text-info q-mt-sm">会员可以使用平台全部预设模板</div>
          </div>
          <el-button type="info" class="normal">会员尊享{{TravelDesign.CloudTotal}}{{TravelDesign.CloudTotalUnit}}空间</el-button>
        </div>
        <div style="font-size: 14px;" class="q-mt-xl">
          <el-progress :percentage="TravelDesign.storagePercent" />
        </div>
      </el-card>
      <el-card class="user-card q-mx-lg" shadow="never">
        <div class="row items-center">
          <div class="col">
            <span class="title">旅行资料库</span>
            <div class="text-small text-info q-mt-sm">会员可以使用平台全部旅行资料库</div>
          </div>
        </div>
        <div style="font-size: 14px;" class="q-mt-xl">
          <div style="font-size: 14px;" class="row items-center q-mt-lg">
            <span class="text-grey-8">当前资料库数据：</span>
            <span class="text-dark q-ml-md cursor-pointer">10W+</span>
          </div>
        </div>
      </el-card>
      <el-card class="user-card col column flex-center cursor-pointer" shadow="never">
        <div class="row items-center flex-center">
          <div class="text-info" style="font-size: 13px;">查看更多会员特权 </div>
          <IconRight :size="16" class="q-ml-md"></IconRight>
        </div>
      </el-card>
    </div>
  </div>
  <div class="q-mt-xl">
    <div class="user-label text-weight-bold" style="font-size: 16px;">快速管理</div>
    <div class="q-mt-lg row">
      <el-card class="enter-card col" shadow="never">
        <div class="title">快速开票</div>
        <div class="text-small q-mt-md q-mb-lg text-grey-8">开票入口及开票进度查询</div>
      </el-card>
      <el-card class="enter-card col q-mx-lg" shadow="never">
        <div class="title">团队共享协作</div>
        <div class="text-small q-mt-md q-mb-lg text-grey-8">与团队共享内容，文件规范存放，多人协同编辑</div>
      </el-card>
      <el-card class="enter-card col q-mx-lg" shadow="never">
        <div class="title">团队成员管理</div>
        <div class="text-small q-mt-md q-mb-lg text-grey-8">邀请团队成员，团队私有模板管理</div>
      </el-card>
      <el-card class="enter-card col q-mr-lg" shadow="never">
        <div class="title">常见问题</div>
        <div class="text-small q-mt-md q-mb-lg text-grey-8">帮助中心：查看常见问题及使用指南</div>
      </el-card>
    </div>
  </div>
  <OrderReview v-if="orderVisible" :default-type="1" @close="()=>orderVisible=false"></OrderReview>
</template>

<script lang="ts" setup>
import { ENT_USER_THEME, VIP_USER_THEME } from "@/configs/customer";
import { useUserStore } from "@/store";
import { storeToRefs } from "pinia";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ApiResult } from "@/configs/axios";
import OrderReview from '@/views/components/Order/Review.vue'
import UserServices from "@/services/UserService";

const useUser = useUserStore()
const { userInfo } = storeToRefs(useUser)
const userTheme = useUser.getUserTheme
const orderVisible = ref(false)
const vipTheme = VIP_USER_THEME
const enTheme = ENT_USER_THEME
const TravelDesign = ref({} as any)
const router = useRouter();
const goSpace = () => {
  router.push({
      path:`/space/3`
  })
}

const getDataStatistics = async () => {
  const response = await UserServices.getPPTUserStatic();
  if(response.data.resultCode == ApiResult.SUCCESS){
    TravelDesign.value = response.data.data
  }
}

const testMethod = async ()=>{
  var cmd="";
  var postMsg={
     
  }
  if(cmd&&cmd!=''){
    // const response = await UserServices.TestMethodAsync(cmd,postMsg);
    // console.log("testMethod",response);
  }
 
}
testMethod()
getDataStatistics()
</script>

<style scoped>
.user-header {
  padding: 16px 24px;
  position: relative;
  font-size: 14px;
  color:#FFF;
  z-index: 1;
  width:100%;
  overflow: hidden;
}

.user-header::after {
  position: absolute;
  top: 0;
  right: -48px;
  bottom: -12px;
  z-index: -1;
  width: 100%;
  background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713496804000_500.png') no-repeat right center / contain;
  content: "";
  transform: scale(2);
  transform-origin: right center;
}
.user-label{
  font-size: 12px;
  margin-bottom: 8px;
}
.user-card {
  width: 33%;
  min-height: 112px;
}
.user-card .title,
.enter-card .title{
  font-size: 15px;
  font-weight: bold;
  color: #000;
}
</style>