<template>
  <div class="min-h-screen bg-gray-50 rounded-lg relative">
    <BackButton />
    <!-- 顶部背景区域 -->
    <div
      class="box relative h-150px bg-gradient-to-r from-purple-400 via-pink-300 to-blue-300"
    ></div>

    <!-- 主要内容区域 -->
    <div class="relative -mt-20 p-6">
      <div class="flex gap-6">
        <!-- 左侧个人信息卡片 -->
        <div class="w-full">
          <!-- 个人信息卡片 -->
          <div class="bg-white rounded-lg shadow-sm p-6 mb-4">
            <div class="flex items-start gap-4">
              <el-avatar
                :size="80"
                :src="userInfo?.showAvatar"
                class="border-4 border-white shadow-lg"
              />
              <div
                class="flex-1 min-w-0 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
              >
                <div class="min-w-0">
                  <h2 class="text-xl font-semibold text-gray-800 mb-1 mt-4 sm:mt-1">
                    {{ userInfo?.showName }}
                  </h2>
                  <p v-if="!+(route.params.isReal as string)" class="text-gray-500 text-sm mb-0">
                    {{ userInfo?.signature }}
                  </p>
                </div>
                <button
                  v-if="canSendPrivateMessage"
                  type="button"
                  class="shrink-0 self-start sm:self-auto inline-flex items-center justify-center gap-1.5 px-4 py-2 text-sm font-medium text-blue-700 bg-blue-50/90 border border-blue-100 rounded-lg hover:bg-blue-100/80 hover:border-blue-200/80 active:scale-[0.98] transition-colors cursor-pointer"
                  @click="openSendMessage"
                >
                  <el-icon class="text-[15px] text-blue-600"><IEpChatDotRound /></el-icon>
                  私信
                </button>
              </div>
            </div>
          </div>

          <!-- 左侧菜单 ——个人菜单 -->
          <div class="bg-white rounded-lg shadow-sm mb-4">
            <div v-if="!list.length" class="flex flex-col items-center justify-center h-64">
              <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
                <el-icon class="text-2xl text-gray-300">
                  <IEpDocument />
                </el-icon>
              </div>
              <div class="text-gray-500 text-lg mb-2">暂无内容</div>
            </div>

            <div v-else class="space-y-4">
              <div
                @click="jumpToArticleDetailPage({ type: item.type, id: item.id })"
                v-for="item in list"
                :key="item.id"
                class="flex items-center p-2 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer px-6"
              >
                <div class="flex-1 min-w-0">
                  <div class="text-gray-900 font-medium truncate">
                    {{ item.title || '测试标题' }}
                  </div>
                  <div class="text-gray-500 text-sm mt-1 truncate">
                    <span class="mr-2">
                      {{ dayjs(item.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}
                    </span>
                    <span class="mr-2">评论 {{ item.collectionCount || 0 }}</span>
                    <span class="mr-2">点赞 {{ item.collectionCount || 0 }}</span>
                    <span class="mr-2">收藏 {{ item.collectionCount || 0 }}</span>
                  </div>
                </div>

                <div class="flex items-center text-gray-400 text-sm ml-4">
                  <span class="text-blue-600">
                    {{ articleTypeListOptions.find((i) => i.value === item.type)?.label || '--' }}
                  </span>
                </div>
                <!-- <el-divider /> -->
              </div>
              <!-- 分页 -->
              <div class="flex justify-end p-6">
                <el-pagination
                  v-model:current-page="searchParams.current"
                  v-model:page-size="searchParams.size"
                  :total="total"
                  @size-change="changePageSize"
                  @current-change="goToPage"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <SendMessageDialog ref="sendMessageDialogRef" />
  </div>
</template>

<script lang="tsx" setup>
import { getOtherUserData, getOtherUserPostData } from '@/api'
import dayjs from 'dayjs'
import { usePageSearch, useNavigation } from '@/hooks'
import { articleTypeListOptions, BooleanFlag } from '@/constants'
import type { OtherUserInfoDto } from '@/api/otherUserPage/types'
import BackButton from '@/components/common/BackButton/index.vue'
import SendMessageDialog from '@/components/common/SendMessageDialog/index.vue'
import { useUserStore } from '@/stores'
import { storeToRefs } from 'pinia'

const route = useRoute()
const { jumpToArticleDetailPage } = useNavigation()
const userStore = useUserStore()
const { userInfo: loginUser } = storeToRefs(userStore)

const sendMessageDialogRef = ref<InstanceType<typeof SendMessageDialog> | null>(null)

const targetUserId = computed(() => (route.params.userId as string) || '')

const routeIsRealFlag = computed(() =>
  +(route.params.isReal as string) === 1 ? BooleanFlag.YES : BooleanFlag.NO,
)

const canSendPrivateMessage = computed(() => {
  const id = targetUserId.value
  return !!id && id !== loginUser.value.userId
})

const openSendMessage = () => {
  sendMessageDialogRef.value?.open({
    receiverId: targetUserId.value,
    isReal: routeIsRealFlag.value,
  })
}
const { list, total, searchParams, goToPage, changePageSize, refresh } = usePageSearch(
  getOtherUserPostData,
  {
    defaultParams: {
      createUserId: route.params.userId as string,
      isReal: +(route.params.isReal as string),
    },
    immediate: false,
  },
)

const userInfo = ref<OtherUserInfoDto>({} as OtherUserInfoDto)
// onMounted(async () => {
//   const { data } = await getOtherUserData({
//     userId: route.params.userId as string,
//     isReal: +(route.params.isReal as string),
//   })
//   userInfo.value = data
// })

onActivated(async () => {
  const { data } = await getOtherUserData({
    userId: route.params.userId as string,
    isReal: +(route.params.isReal as string),
  })
  userInfo.value = data
  refresh()
})
</script>

<style scoped>
.box {
  background-image: url('http://soundasia.oss-cn-shenzhen.aliyuncs.com/OA/2022/10/13/1665643787806.jpg');
}

/* 如果需要额外的样式可以在这里添加 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
