<template>
    <div class="flex items-center justify-between bg-#fff p-32px b-rd-16px">
        <div class="flex items-center">
            <div class="bg-#EEEEEE b-rd-50% p-10px flex items-center" @click.prevent>
                <img class="w-20 h-20 rounded-full" v-if="userInfo?.photo" :src="userInfo?.photo" alt="" />
                <i-custom-user v-else class="w-40 h-40 c-primary" />
            </div>
            <div class="ml-22px">
                <div class="text-22px fw-bold text-#223354 mb-10px">
                    {{ userInfo?.FirstName || 'hezuo' }} {{ userInfo?.LastName || 'Partner' }}
                </div>
                <!-- 合作伙伴 当前账号状态-->
                <div class="py-4px px-10px inline-block text-center b-rd-200px text-12px bg-#eee">{{ userInfo?.email ||
                    'Review rejected' }}</div>
            </div>
            <div class="ml-32px py-8px px-12px b-#00DD99 text-#00DD99 text-18px b-1px b-solid b-rd-6px">
                <!-- 合作伙伴 身份 -->
                {{ userInfo?.email || 'sales representative' }}
            </div>
        </div>
        <div class="flex items-center ">
            <div class="mr-20px text-18px text-#767676">Last data refresh time：{{ userInfo?.last_refresh_time ||
                '2025-03-18 12:00:56' }}</div>
            <a-button type="primary" class="w-122px !p-unset !h-40px !b-rd-300px !text-18px text-#fff !fw-700"
                @click="refresh" size="large">Refresh</a-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()

const userInfo = computed(() => {
    return userStore.userInfo || {}
})
const refresh = () => {
    console.log('refresh')
}


</script>
<style scoped lang="less"></style>
