<template>
  <div class="w-full">
    <van-sticky :offset-top="50">
      <div class="w-full text-xl font-semibold px-16 h-48 flex justify-start items-center bg-white">
        <span
          @click="showPopover = true"
          v-if="showPopover"
          class="iconfont icon-plus text-[#FF9300]"
          style="font-size: 24px"
        ></span>
        <span v-else class="iconfont icon-plus text-black" style="font-size: 24px"></span>

        <van-popover
          v-model:show="showPopover"
          placement="bottom"
          theme="dark"
          :offset="[5,20]"
          :actions="actionsList"
          @select="onSelect"
        >
          <template #reference>
            <span :class="`${showPopover ? 'text-[#FF9300]' : 'text-black-3'}`">添加</span>
          </template>
        </van-popover>
      </div>
    </van-sticky>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <div style="height: calc(100vh - 100px)" class="w-full">
        <van-list
          ref="messageBoxRef"
          class="flex-1 overflow-y-auto flex flex-col"
          :finished="true"
          finished-text=""
        >
          <div
            @click="
              onChatPage('/profile/system-message', {
                groupId: chatList[0]?.groupId
              })
            "
            class="w-full relative h-82 flex justify-start items-center px-16"
          >
            <van-badge
              v-if="chatList[0]?.unreadMessageCount"
              v-bind="messageNumber(chatList[0]?.unreadMessageCount)"
              max="99"
            >
              <div
                class="w-48 h-48 bg-[#0052D9] rounded-full overflow-hidden flex justify-center items-center"
              >
                <img
                  class="w-24 h-24 shrink-0 object-cover"
                  src="~/assets/img/chat/remind.svg"
                  alt=""
                />
              </div>
            </van-badge>

            <div
              v-else
              class="w-48 h-48 bg-[#0052D9] rounded-full overflow-hidden flex justify-center items-center"
            >
              <img
                class="w-24 h-24 shrink-0 object-cover"
                src="~/assets/img/chat/remind.svg"
                alt=""
              />
            </div>

            <div class="h-48 w-245 shrink-0 ml-12 flex flex-wrap items-start">
              <h1 class="line-clamp-1 w-full text-base text-black-3 font-semibold mb-4">
                {{ chatList[0]?.groupName }}
              </h1>
              <p class="line-clamp-1 h-20 text-sm text-black-6 leading-3xl">
                {{
                  chatList[0]?.lastMessage
                    ? messageContentParse(chatList[0]?.lastMessage?.messageContent)
                    : ''
                }}
              </p>
            </div>

            <div class="w-35 h-48 shrink-0">
              <p class="text-black/[0.6] text-sm text-end">
                {{
                  chatList[0]?.lastMessage
                    ? createTimeSplit(chatList[0]?.lastMessage?.createTime)
                    : ''
                }}
              </p>
            </div>
            <div class="absolute bottom-0 right-0 w-[96%] h-1 border-b-[1px]"></div>
          </div>
          <!-- navigateTo('/follow?listType=fans') -->
          <div
            @click="
              onChatPage('/follow', {
                listType: 'fans',
                groupId: chatList[1]?.groupId
              })
            "
            class="w-full relative h-82 flex justify-start items-center px-16"
          >
            <van-badge
              v-if="chatList[1]?.unreadMessageCount"
              v-bind="messageNumber(chatList[1]?.unreadMessageCount)"
              max="99"
            >
              <div
                class="w-48 h-48 bg-[#FF9300] rounded-full overflow-hidden flex justify-center items-center"
              >
                <img
                  class="w-24 h-24 shrink-0 object-cover"
                  src="~/assets/img/chat/user.svg"
                  alt=""
                />
              </div>
            </van-badge>

            <div
              v-else
              @click="navigateTo('/follow?listType=fans')"
              class="w-48 h-48 bg-[#FF9300] rounded-full overflow-hidden flex justify-center items-center"
            >
              <img
                class="w-24 h-24 shrink-0 object-cover"
                src="~/assets/img/chat/user.svg"
                alt=""
              />
            </div>

            <div class="h-48 w-245 shrink-0 ml-12 flex flex-wrap items-start">
              <h1 class="line-clamp-1 w-full text-base text-black-3 font-semibold mb-4">
                {{ chatList[1]?.groupName }}
              </h1>
              <p class="line-clamp-1 h-20 text-sm text-black-6 leading-3xl">
                {{
                  chatList[1]?.lastMessage
                    ? messageContentParse(chatList[1]?.lastMessage?.messageContent)
                    : ''
                }}
              </p>
            </div>

            <div class="w-35 h-48 shrink-0">
              <p class="text-black/[0.6] text-sm text-end">
                {{
                  chatList[1]?.lastMessage
                    ? createTimeSplit(chatList[1]?.lastMessage?.createTime)
                    : ''
                }}
              </p>
            </div>
            <div class="absolute bottom-0 right-0 w-[96%] h-1 border-b-[1px]"></div>
          </div>

          <div
            @click="
              onChatPage('/profile/interaction-message', {
                groupId: chatList[2]?.groupId
              })
            "
            class="w-full relative h-82 flex justify-start items-center px-16"
          >
            <van-badge
              v-if="chatList[2]?.unreadMessageCount > 0"
              v-bind="messageNumber(chatList[2]?.unreadMessageCount)"
              max="99"
            >
              <div
                class="w-48 h-48 bg-[#FF476A] rounded-full overflow-hidden flex justify-center items-center"
              >
                <img
                  class="w-24 h-24 shrink-0 object-cover"
                  src="~/assets/img/chat/weixin-shake.svg"
                  alt=""
                />
              </div>
            </van-badge>

            <div
              v-else
              class="w-48 h-48 bg-[#FF476A] rounded-full overflow-hidden flex justify-center items-center"
            >
              <img
                class="w-24 h-24 shrink-0 object-cover"
                src="~/assets/img/chat/weixin-shake.svg"
                alt=""
              />
            </div>

            <div class="h-48 w-245 shrink-0 ml-12 flex flex-wrap items-start">
              <h1 class="line-clamp-1 w-full text-base text-black-3 font-semibold mb-4">
                {{ chatList[2]?.groupName }}
              </h1>
              <p class="line-clamp-1 h-20 text-sm text-black-6 leading-3xl">
                {{
                  chatList[2]?.lastMessage
                    ? messageContentParse(chatList[2]?.lastMessage?.messageContent)
                    : ''
                }}
              </p>
            </div>

            <div class="w-35 h-48 shrink-0">
              <p class="text-black/[0.6] text-sm text-end">
                {{
                  chatList[2]?.lastMessage
                    ? createTimeSplit(chatList[2]?.lastMessage?.createTime)
                    : ''
                }}
              </p>
            </div>
            <div class="absolute bottom-0 right-0 w-[96%] h-1 border-b-[1px]"></div>
          </div>

          <!-- 置顶绘画列表  "-->
          <div v-if="isTopList?.length && activeNames" class="w-full">
            <template v-for="(item, index) in isTopList" :key="item?.id">
              <template v-if="index > 2">
                <!-- 群聊会话 -->
                <ProfileNewsGroupChat
                  v-if="item?.noticeType == 2"
                  :item-data="{
                    ...item,
                    updateTime: item?.lastMessage
                      ? createTimeSplit(item?.lastMessage?.updateTime)
                      : ''
                  }"
                  @on-chat-page="goDetails('group', item)"
                  @on-no-bother="noBother(item)"
                  @on-is-top="onIsTop(item)"
                  @on-conv-delete="onIsShow(item)"
                />

                <!-- 单聊会话 -->
                <ProfileNewsSingleChat
                  v-if="item?.noticeType == 1"
                  :item-data="{
                    ...item,
                    updateTime: item?.lastMessage
                      ? createTimeSplit(item?.lastMessage?.updateTime)
                      : ''
                  }"
                    @on-chat-page="goDetails('single', item)"
                    @on-no-bother="noBother(item)"
                    @on-is-top="onIsTop(item)"
                    @on-conv-delete="onIsShow(item)"
                />
              </template>
              <template v-else></template>
            </template>
          </div>

          <div
            v-if="isTopList.length >= 6"
            @click="activeNames = !activeNames"
            class="flex justify-between items-center h-20 -mt-20 w-full p-16 box-border"
          >
            <div class="shrink-0 flex items-center">
              <van-icon name="bars" size="16" class="mr-5" />
              <span class="text-sm">{{ collapseTitle }}</span>
            </div>
            <div class="w-16 h-16 shrink-0">
              <van-icon name="arrow" size="16" />
            </div>
          </div>

          <!-- 不置顶的会话列表 -->
          <template v-for="(item, index) in pinnedList" :key="item?.id">
            <ProfileNewsGroupChat
              v-if="item?.noticeType == 2"
              :item-data="{
                ...item,
                updateTime: item?.lastMessage ? createTimeSplit(item?.lastMessage?.updateTime) : ''
              }"
              @on-chat-page="goDetails('group', item)"
              @on-no-bother="noBother(item)"
              @on-is-top="onIsTop(item)"
              @on-conv-delete="onIsShow(item)"
            />
            <ProfileNewsSingleChat
              v-if="item?.noticeType == 1"
              :item-data="{
                ...item,
                updateTime: item?.lastMessage ? createTimeSplit(item?.lastMessage?.updateTime) : ''
              }"
                @on-chat-page="goDetails('single', item)"
                @on-no-bother="noBother(item)"
                @on-is-top="onIsTop(item)"
                @on-conv-delete="onIsShow(item)"
            />
          </template>
        </van-list>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import comments from '~/assets/img/chat/comments-white.svg'
import plaza from '~/assets/img/chat/guangchang.svg'
import userAdd from '~/assets/img/chat/user-add.svg'

import { messageContentParse } from '~/utils/detalTime.js'
import { XYWebSocket } from '~/utils/XYWebSocket.ts'

const actionsList = [
  { text: '创建群聊', icon: comments },
  { text: '群聊广场', icon: plaza },
  { text: '加入群聊', icon: plaza },
  { text: '添加用户', icon: userAdd }
]
const userInfoStore = useUserInfoStore()
const { userInfo } = storeToRefs(userInfoStore)

const chatsStore = useChatsStore();
const { chatList, chatListLoading } = storeToRefs(chatsStore)

const showPopover = ref(false)

const messagesNumber = ref(10)

// 不置顶列表
const pinnedList = computed(() => chatList.value.filter((el) => el.isTop != 1))

// 置顶列表
const isTopList = computed(() => chatList.value.filter((el) => el?.isTop == 1) ?? [])

// 个置顶聊天
const collapse_text = '折叠置顶聊天'

const activeNames = ref(true)
// collapse
const collapseTitle = ref(collapse_text)

// 刷新
const refreshing = ref(false)

useSeoMeta({
  title: '我的消息'
})

// 时间的转换
const createTimeSplit = (timer) => {
  if (timer) {
    return timer.split(' ')[1]
  }
}
// 下拉刷新
const onRefresh = () => {
  refreshing.value = true
  chatsStore.getChatList()
  refreshing.value = false
}

// 打扰和免打扰得
const noBother = (parmas) => {
  handleBoolean({ groupId: parmas.groupId, isNotDisturb: parmas.isNotDisturb })
}

// 是否置顶
const onIsTop = (parmas) => {
  handleBoolean({ groupId: parmas.groupId, isTop: parmas.isTop })
}

// 是否显示会话
const onIsShow = (parmas) => {
  handleBoolean({ groupId: parmas.groupId, isShow: parmas.isShow })
}

// 是否免打扰和 是否置顶 公共
const handleBoolean = async (body) => {
  try {
    let { data } = await request('/website/tourMember/updateSingleTourMember', {
      method: 'post',
      body
    })
    if (data) {
      chatsStore.getChatList()
    }
  } catch (error) {}
}

// 消息数量通知的展示  需要动态的展示
const messageNumber = (content) => {
  let messageNumberObj = {}

  if (content != null || content != undefined || content != '') {
    if (content <= 1) {
      messageNumberObj = {
        offset: [-5, 4],
        dot: true,
        content
      }
    }
    if (content > 1) {
      messageNumberObj = {
        offset: [-10, 7],
        content
      }
    }
  } else {
    content = 0
    messageNumberObj = {
      offset: [-5, 4],
      dot: true,
      content
    }
  }

  return messageNumberObj
}

// 跳转聊天页面
const onChatPage = async (path, query, itemParams) => {
  navigateTo({
    path,
    query
  })
  const res = await request('/website/tourMessage/updateRead', {
    query: {
      groupId: query.groupId
    }
  })
  await handleResponse(res, false)
  await chatsStore.getChatList()
}

// 选中的是那个页面
const onSelect = (action) => {
  if (action.text === '创建群聊') onChatPage('/chat/create-group', {})
  if (action.text === '群聊广场') onChatPage('/chat/group-square', {})
  if (action.text === '加入群聊') onChatPage('/scan', {})
  if (action.text === '添加用户') onChatPage('/chat/user-add', {})
}


const goDetails = (type, item) => {
  console.log(type, item, 'itemitem')
  switch (type) {
    case 'single': // 单聊消息
      readMessage(item.groupId)
      navigateTo({
        path: '/chat/single-chat', query: {
          getUserId: item?.toUserId,
          groupRemark: item?.groupRemark
        }
      })
      break;
    case 'group': // 群聊消息
      readMessage(item.groupId)
      navigateTo({
        path: '/chat/group-chat', query: {
          groupId: item?.groupId,
          groupRemark: item?.groupRemark
        }
      })
      break;
    default:

      break;
  }
}

const readMessage = async (groupId) => {
  const res = await request('/website/tourMessage/updateRead', {
    query: {
      groupId: groupId
    }
  })
  await handleResponse(res, false)
  await chatsStore.getChatList()
}

// 消息的内容转换
function messageShowName(messageContent) {
  try {
    let content = {}
    if (messageContent) {
      content = JSON.parse(messageContent)
      return content.showName
    } else {
      return ''
    }
  } catch (error) {
    console.log(error)
  }
}

onMounted(() => {
  chatsStore.getChatList()
  XYWebSocket.SocketEventsBus.on(XYWebSocket.SocketEvents.chatEvent, () => {
    chatsStore.getChatList()
  })
})

onUnmounted(() => {
  XYWebSocket.SocketEventsBus.off(XYWebSocket.SocketEvents.chatEvent)
})
</script>

<style lang="scss" scoped></style>
