<template>
  <div class="min-h-screen bg-gray-50 rounded-lg">
    <!-- 顶部背景区域 -->
    <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">
                <h2 class="text-xl font-semibold text-gray-800 mb-1 mt-4">
                  {{ userInfo?.showName }}
                </h2>
                <p v-if="!+(route.params.isReal as string)" class="text-gray-500 text-sm mb-2">
                  {{ userInfo?.signature }}
                </p>
                <!-- <el-button type="warning" size="small" plain @click="handleEdit">
                  <el-icon>
                    <IEpEdit />
                  </el-icon>
                  修改资料
                </el-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="handleOpenArticle(item)"
                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">
                  <el-link type="primary" link>
                    {{ articleTypeListOptions.find((i) => i.value === item.type)?.label || '--' }}
                  </el-link>
                </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>
  </div>
</template>

<script lang="tsx" setup>
import { hasOfficialAccount, getOtherUserData, getOtherUserPostData } from '@/api'
import type { OfficialAccountItemDto } from '@/api/user/types'
import dayjs from 'dayjs'
import { usePageSearch } from '@/hooks'
import { ArticleTypeEnum, articleTypeListOptions } from '@/constants'
import type { OtherUserInfoDto } from '@/api/otherUserPage/types'

const route = useRoute()

const { list, total, searchParams, goToPage, changePageSize } = usePageSearch(
  getOtherUserPostData,
  {
    defaultParams: {
      createUserId: route.params.userId as string,
      isReal: +(route.params.isReal as string),
    },
  },
)

const officialAccountList = ref<OfficialAccountItemDto[]>([])
const getIsOfficial = async () => {
  const { data } = await hasOfficialAccount()
  console.log(data)
  officialAccountList.value = data
}
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
})

const handleOpenArticle = (item: any) => {
  if (item.type === ArticleTypeEnum.VIDEO) {
    window.open(`/videoDetail/${item.id}`)
  } else {
    window.open(`/articleDetail/${item.id}`)
  }
}

onMounted(() => {
  getIsOfficial()
})
</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>
