<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;">
      <!-- {{userInfo.photo && userInfo.photo.includes("http")? "": userInfo.nickname[0]}} -->
    </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'" class="text-white pingfangr q-ml-lg rounded cusor-pointer q-py-md q-px-lg no-select">升级为VIP</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></div>
  </div>
</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";

const useUser = useUserStore()
const { userInfo } = storeToRefs(useUser)
const userTheme = useUser.getUserTheme

const vipTheme = VIP_USER_THEME
const enTheme = ENT_USER_THEME

</script>

<style>
.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;
}
</style>