<script setup lang="ts">
import { computed } from 'vue'
import CustomIcon from '@/components/custom-icon/custom-icon.vue'
import { useUserStore } from '@/store/modules/user'
import { PersonalAppConfigState } from '@/store/types/personal-app-config'
import { formatDateTime } from '@/utils/date-formatter'

interface Props {
  agentApplicationConfig: PersonalAppConfigState
}

defineProps<Props>()

const emit = defineEmits<{
  backHomePage: []
  toCreateApplication: []
  toLogin: []
}>()

const userStore = useUserStore()

const useAvatar = computed(() => {
  return userStore.userInfo.avatarUrl || 'https://gsst-poe-sit.gz.bcebos.com/data/20240910/1725952917468.png'
})

const isLogin = computed(() => {
  return userStore.isLogin
})

function handleBackHomePage() {
  emit('backHomePage')
}

function handleToCreateApplication() {
  emit('toCreateApplication')
}

function handleToLogin() {
  emit('toLogin')
}
</script>

<template>
  <header class="flex h-[68px] w-full items-center justify-between border-b border-[#e8e9eb] bg-white px-5">
    <div class="flex items-center">
      <CustomIcon
        icon="weui:back-outlined"
        class="hover:text-theme-color mr-5 outline-none"
        @click="handleBackHomePage"
      />
      <img :src="agentApplicationConfig.baseInfo.agentAvatar" class="mr-5 h-10 w-10 rounded-md" />

      <div class="flex flex-col items-start justify-center">
        <span class="mb-1 line-clamp-1 max-w-[200px] break-all">{{ agentApplicationConfig.baseInfo.agentTitle }}</span>
        <div class="flex items-center text-xs text-[#84868c]">
          <img v-show="isLogin" :src="useAvatar" class="mr-2 h-5 w-5 rounded-full" />
          <p v-show="isLogin" class="mr-4 line-clamp-1 max-w-[120px] break-words break-all">
            {{ userStore.userInfo.nickName }}
          </p>
          <span>发布于 {{ formatDateTime(agentApplicationConfig.modifiedTime) }}</span>
        </div>
      </div>
    </div>

    <div>
      <NButton
        v-show="isLogin"
        type="primary"
        class="rounded-md! h-[32px]! w-[100px]!"
        @click="handleToCreateApplication"
        >创建应用</NButton
      >
      <NButton v-show="!isLogin" type="primary" class="rounded-md! h-[32px]! w-[100px]!" @click="handleToLogin">
        立即登录
      </NButton>
    </div>
  </header>
</template>
