<template>
  <div class="ml-19px w-100%">
    <ChannelHeader v-if="Object.keys(lunTanRes).length" v-model="lunTanRes"></ChannelHeader>
    <div class="mb-13px box-border flex flex-1 flex-col cursor-pointer gap-12px border border-[#EEEEEE] rounded-8px border-solid bg-[#FFFFFF] px-20px py-16px">
      <div
        v-for="(item, index) in pageRes.list"
        :key="index"
        class="flex justify-between border-b-1px border-b-[#eee] border-b-solid pb-8px"
        :class="{ 'border-b-0! pb-0px!': index === pageRes.list.length - 1 }"
        @click="handleClick(item.postsId)"
      >
        <div class="flex flex-1 items-center">
          <div class="ellipsis max-w-70% text-15px text-[#2d3137] font-normal">{{ item.postsTitle }}</div>
          <span class="ml-10px flex-shrink-0 text-13px color-#96999f">{{ item.likeNum || 0 }}人赞过</span>
          <span class="ml-10px flex-shrink-0 text-13px color-#96999f">{{ item.commentNum || 0 }}评论</span>
          <span class="ml-10px flex-shrink-0 text-13px color-#96999f">{{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}发布</span>
        </div>
        <div class="w-100px flex flex-shrink-0 items-center justify-end">
          <span class="ellipsis text-13px color-#96999f">{{ item.creatorName }}</span>
          <!-- 删除 -->
          <el-button v-if="false" type="danger" size="small" @click="handleDelete(item.postsId)">删除</el-button>
        </div>
      </div>
    </div>
    <el-pagination
      v-if="pageRes.list.length > 0"
      v-model:current-page="pageNo"
      :page-size="10"
      layout="prev, pager, next"
      :total="pageRes.total"
      @current-change="handleCurrentChange"
    />
    <!-- 暂无数据 -->
    <el-empty v-if="!pageRes.list.length" description="暂无数据"></el-empty>
  </div>
</template>

<script lang="ts" setup>
  import { TpageRes, ChannelRespVO } from '@/api/channel/types'
  import { postsDelete } from '@/api/channel/index'
  import ChannelHeader from './ChannelHeader.vue'
  import dayjs from 'dayjs'

  const emit = defineEmits(['updatePageNo'])

  const pageRes = defineModel<TpageRes>('modelValue', {
    required: true,
  })
  const lunTanRes = defineModel<ChannelRespVO>('lunTanRes', {
    required: true,
  })
  const pageNo = defineModel<number>('pageNo', {
    required: true,
  })

  // const handleTags = (tags: string) => {
  //   if (!tags) return []
  //   return tags.split(',')
  // }

  const handleCurrentChange = (current: number) => {
    emit('updatePageNo', current)
  }

  const handleDelete = (channelId: number) => {
    console.log(channelId)
    postsDelete({
      id: channelId,
    }).then((res) => {
      console.log(res)
    })
  }

  const handleClick = (channelId: number) => {
    // 新开窗口
    window.open(`/chat-detail?channelId=${channelId}`, '_blank')
  }
</script>

<style scoped></style>
