<template>
  <div class="w-full">
    <audio
      class="fixed top-0 left-0"
      ref="audioRef"
      :src="audioTips"
      style="opacity: 0; z-index: -1"
    ></audio>

    <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
    <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>

    <div
      @click="onChatPage('/profile/system-message', {})"
      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>

    <div
      @click="navigateTo('/follow?listType=fans')"
      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-[#0052D9] 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', {})"
      class="w-full relative h-82 flex justify-start items-center px-16"
    >
      <van-badge v-if="messagesNumber > 0" v-bind="messageNumber(messagesNumber)" 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="
              onChatPage('/chat/group', { userId: user.userId, groupId: item?.groupId })
            "
            @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="
              onChatPage('/chat/single', {
                sendUserId: userInfo.userId,
                groupId: item?.groupId,
                getUserId: item?.toUserId,
                groupRemark: item?.groupRemark
              })
            "
            @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 border items-center h-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="
          onChatPage('/chat/group', {
            userId: userInfo.userId,
            groupId: item?.groupId
          })
        "
        @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="
          onChatPage('/chat/single', {
            sendUserId: userInfo.userId,
            groupId: item?.groupId,
            getUserId: item?.toUserId,
            groupRemark: item?.groupRemark
          })
        "
        @on-no-bother="noBother(item)"
        @on-is-top="onIsTop(item)"
        @on-conv-delete="onIsShow(item)"
      />
    </template>
    <!-- </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'

const actionsList = [
  { text: '创建群聊', icon: comments },
  { text: '群聊广场', icon: plaza },
  { text: '加入群聊', icon: plaza },
  { text: '添加用户', icon: userAdd }
]
const userInfoStore = useUserInfoStore()
const { userInfo } = storeToRefs(userInfoStore)
// const uploadUrl = `${import.meta.env.VITE_APP_BASE_URL}/website/tourMessage/upload`
const chatStore = useChatStore()
const { messages, connectSta, chatList, curConversiton, onNewMessage } = storeToRefs(chatStore)

// 链接的状态
const wsConnect = computed(() => connectSta.value)

const chatLists = computed(() => chatList.value)

const audioRef = ref(null)

const finished = ref(false)

const error = ref(false)

const loading = ref(false)

const showPopover = ref(false)

const messagesNumber = ref(10)

// 置顶列表
const isTopList = computed(() => chatList.value.filter((el) => el.isTop != 1))
const pinnedList = computed(() => chatList.value.filter((el) => el?.isTop == 1) ?? [])
const pinnedSystemList = ref([]) //三个固定的消息

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

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

// 刷新
const refreshing = ref(false)

// 建立链接
// async function getUserInfo() {
//   const { data } = await request('/website/tourism/user/view')
//   chatStore.user = data
//   user.value = data
//   console.log(data, 'createConnection')

//   await chatStore.createConnection(data.pass)
//   chatStore.reqChatList()

//   console.log('用户信息：', chatStore.user)

//   // console.log('会话列表：', chatStore.chatList.value)
// }

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

// 时间的转换
const createTimeSplit = (timer) => {
  if (timer) {
    return timer.split(' ')[1]
  }
}
// 下拉刷新
const onRefresh = () => {
  refreshing.value = true
  chatStore.reqChatList()
  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) {
      chatStore.reqChatList()
    }
  } 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) => {
  const res = await request('/website/tourMessage/updateRead', {
    query: {
      groupId: query.groupId
    }
  })

  if (res && res?.success) {
    navigateTo({
      path,
      query
    })
  }
}

// 选中的是那个页面
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', {})
}

onMounted(() => {
  if (wsConnect == 0) {
    showToast('聊天网络连接中...')
  } else if (wsConnect == 1) {
    showToast(' 聊天正在连接中...')
  } else if (wsConnect == 3) {
    showToast(' 聊天连接已断开，请刷新页面重新连接，或稍后重试！')
  } else if (wsConnect == 2) {
  }
  chatStore.reqChatList()
  // chatStore.reqChatList()
})

// watch(
//   wsConnect,
//   async (newValue, oldValue) => {
//     console.log(newValue, 'wsConnect')
//     console.log(chatLists.value, 'chatLists')

//     if (newValue == 2) {
//       pinnedList.value = chatList.value.filter((el) => el.isTop != 1)
//       isTopList.value = chatList.value.filter((el) => el.isTop == 1)
//     }
//   },
//   { immediate: true }
// )
// watch(
//   chatList.value,
//   (newList, oldList) => {
//     // pinnedSystemList.value = newList.filter((el) => el.noticeType == 3)
//     pinnedList.value = newList.filter((el) => el.isTop != 1)
//     isTopList.value = newList.filter((el) => el.isTop == 1)

//     console.log(pinnedList.value, 'pinnedList')
//     console.log(isTopList.value, 'isTopList')
//     // console.log(newList, 'newList')
//     console.log(oldList, 'oldList')
//   },
//   { immediate: true }
// )
</script>

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