<template>
  <div class="single-page h-full w-full" style="height: 100vh">
    <van-nav-bar @click-left="router.back()" @click-right="onClickRight">
      <template #left>
        <div>
          <van-icon name="arrow-left" color="black" size="18"/>
        </div>
      </template>
      <template #title>
        <div class="text-2xl text-black-3 text-semibold">
          <div class="inline-block w-220 line-clamp-1">
            {{ title }}
          </div>
          <!-- <span class="ml-7 iconfont icon-close-remind text-black-9" style="font-size: 16px"></span> -->
        </div>
      </template>
      <template #right>
        <van-icon name="ellipsis" color="black" size="18"/>
      </template>
    </van-nav-bar>
    <template v-if="showPage">
      <van-list
          ref="chatListRef"
          class="flex-1 overflow-y-auto px-12 flex flex-col"
          :finished="true"
          finished-text=""
      >
        <template v-for="(message, index) in currConversationChatList" :key="index">
          <ChatMessage :message="message"></ChatMessage>
        </template>
        <div v-if="false" class="text-[#979797] text-sm text-center mt-auto mb-10">
          {{ followStatus }}在对方关注或回复前，最多只能发送1条信息
        </div>
      </van-list>
      <!--  <van-pull-refresh v-model="refreshing" @refresh="loadMore" class="flex-1">
            </van-pull-refresh>-->
      <div class="h-70 w-full bg-[#fff]"></div>
      <div class="fixed bottom-0 left-0 right-0 w-full">
        <ChatInput :operates="['image']" @focus="scrollToBottom" @send="handleSendMessage"></ChatInput>
      </div>
    </template>
    <template v-else>
      <div class="flex-1 grid place-items-center text-black-9">
        <div v-if="pageLoading">创建会话中...</div>
        <div v-else class="grid place-items-center">
          <div v-if="groupId">创建成功</div>
          <div v-else class="grid place-items-center">
            <div class="mb-10">创建会话失败</div>
            <van-button size="small" @click="initGroupId">点击重试</van-button>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
<script setup>
import ChatMessage from './chat-message'
import ChatInput from "./chat-input";
import {findHyperlinks} from "~/pages/chat/chat-message/link-message/handle";
import {XYWebSocket} from "~/utils/XYWebSocket";

const route = useRoute()
const router = useRouter()

const chatsStore = useChatsStore();
const userInfoStore = useUserInfoStore();

const {userInfo} = storeToRefs(userInfoStore);
// 单聊的标题
const title = computed(() => route.query.groupRemark)

// 聊天列表
const chatListRef = ref(null);

const followStatus = ref(0)

const pageLoading = ref(true);
const getUserId = ref(route.query?.getUserId); // 消息接收者的用户id
const sendUserId = computed(() => userInfo?.value.pass) // 消息发送者：当前登录用户的加密id
const groupId = ref(null); // 会话ID
const showPage = computed(() => getUserId.value && groupId.value)

const initGroupId = async () => {
  try {
    if (!getUserId.value) return;
    pageLoading.value = true;
    const res = await chatsStore.getCurrConversationId(getUserId.value)
    await handleResponse(res)
    groupId.value = res.data;
    await getChatList('init')
  } catch (e) {

  } finally {
    pageLoading.value = false;
  }
}

let pageNum = ref(0)
const currConversationChatList = ref([]);
/**
 * 加载当前聊天信息
 * @param type init|more
 * @returns {Promise<void>}
 */
const getChatList = async (type = 'init') => {
  try {
    const page = type === 'init' ? 1 : pageNum.value + 1;
    const res = await chatsStore.getChatHistory({
      pageNum: page,
      pageSize: 10,
      groupId: groupId.value,
    })
    pageNum.value = page;
    await handleResponse(res);
    currConversationChatList.value = chatsStore.handleMessageList(res.data?.data)
    if (type === 'init') await scrollToBottom()
    await getFollowStatus()
  } catch (e) {
    console.error(e)
  } finally {

  }
}

// 发送文本消息
const sendTextMessage = async (text) => {
  try {
    if (!text) return
    let msg = {
      groupId: groupId.value,
      getUserId: getUserId.value,
      sendUserId: sendUserId.value,
      specialUserId: '',
      messageContent: text,
      messageType: 0,
      noticeType: 1,
      object: {
        id: getLocalId(),
        // TODO 聊天时候改了头像昵称 会出现找不到的情况
        headImageUrl: userInfo?.value.headImageUrl,
        showName: userInfo?.value.showName
      }
    }
    const isLink = !!findHyperlinks(text)
    if (isLink) msg.messageType = 4;
    currConversationChatList.value.push(msg)
    await scrollToBottom()
    await chatsStore.sendSocketMessage(msg)
    await getChatList('init')
  } catch (e) {
    console.log(e, '2')
  } finally {

  }
}

// 选择发送图片
const sendImageMessage = async (file) => {
  try {
    const formData = new FormData()
    formData.append('uploadFile', file)
    formData.append('asImage', true)
    formData.append('fieldName', 'messageContent')
    const {data} = await request('/website/tourMessage/upload', {
      method: 'post',
      body: formData
    })

    let msg = {
      groupId: groupId.value,
      getUserId: getUserId.value,
      sendUserId: sendUserId.value,
      specialUserId: '',
      messageContent: data.fileUrl,
      messageType: 1,
      noticeType: 1,
      object: {
        id: getLocalId()
      }
    }
    currConversationChatList.value.push(msg)
    await scrollToBottom()
    await chatsStore.sendSocketMessage(msg)
  } catch (e) {
    console.error(e, '??')
  } finally {

  }
}

const handleSendMessage = async ({type, messageContent}) => {
  try {
    switch (type) {
      case 'text':
        await sendTextMessage(messageContent)
        break;
      case 'image':
        await sendImageMessage(messageContent)
        break;

      default:

        break;
    }

  } catch (e) {

  } finally {

  }
}

const scrollToBottom = async () => {
  // 操作向上加载不滚动 TODO 判断用户是否有向上滑的操作更准确
  if (refreshing.value) return
  setTimeout(async () => {
    await nextTick(); // 确保DOM已经更新
    const listElement = chatListRef.value?.$el;
    if (listElement) {
      const scrollContainer = listElement;
      scrollContainer.scrollTop = scrollContainer.scrollHeight;
    }
  }, 200)
};

// 获取我与对方的关注情况
const getFollowStatus = async () => {
  const query = {
    userId: getUserId.value
  }
  const {data: status = 0} = await request('/website/tourGroup/isFollow', {query})
  followStatus.value = status
}


// 加载更多
const refreshing = ref(false)
const loadMore = async () => {
  try {
    refreshing.value = true
    await getChatList('more')
  } catch (e) {
  } finally {
    refreshing.value = false
  }
}

const onClickRight = () => {
  navigateTo({
    path: '/chat/set-single',
    query: {
      toUserId: route.query.getUserId
    }
  })
}


// 本地生成一个唯一消息id
function getLocalId() {
  const random = Math.floor(Math.random() * 10000)
  return Date.now() + '' + random
}

onMounted(() => {
  initGroupId()
  XYWebSocket.SocketEventsBus.on(XYWebSocket.SocketEvents.chatEvent, async (chat) => {
    console.log(chat, '单聊页面消息订阅')
    const isCurrGroupId = chat.groupId && chat.groupId === groupId.value;
    const isOtherUserMessage = chat.sendUserId && chatsStore.isRealMessage(chat.sendUserId)
    if (isCurrGroupId && isOtherUserMessage) {
      currConversationChatList.value.push(chat)
      await scrollToBottom()
    }
  })
})

watchEffect(() => {

})

// 用户删除消息
const delMessage = (messageId) => {
  showConfirmDialog({
    width: 260,
    message: '是否删除这条消息?',
    confirmButtonColor: '#FF9300'
  })
      .then(async () => {
        const res = await request('/website/tourMessage/delMessage', {
          method: 'post',
          body: {
            messageId: [messageId]
          }
        })

        if (res && res?.success) {
        }
      })
      .catch(() => {
      })
}

definePageMeta({
  layout: false
})
</script>
<style lang="scss" scoped>
.single-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
</style>
