import { defineComponent, ref, onMounted, nextTick, watch, openBlock, createBlock, withCtx, createElementVNode, normalizeClass, unref, toDisplayString, createVNode, createElementBlock, Fragment, renderList, createCommentVNode } from "vue";
import "../../../../adapter-vue.mjs";
import { TUITranslateService, TUIStore, TUIChatService } from "@tencentcloud/chat-uikit-engine";
import closeIcon from "../../../../assets/icon/icon-close.svg.mjs";
import Icon from "../../../common/Icon.vue.mjs";
import Overlay from "../../../common/Overlay/index.vue.mjs";
import Avatar from "../../../common/Avatar/index.vue.mjs";
import FetchMore from "../../../common/FetchMore/index.vue.mjs";
import { isMobile } from "../../../../utils/env.mjs";
const _hoisted_1 = { class: "header" };
const _hoisted_2 = { class: "header-text" };
const _hoisted_3 = { class: "header-close-icon" };
const _hoisted_4 = { class: "read-status-counter-container" };
const _hoisted_5 = ["onClick"];
const _hoisted_6 = { class: "status-text" };
const _hoisted_7 = { class: "status-count" };
const _hoisted_8 = { class: "read-status-member-list" };
const _hoisted_9 = {
  key: 0,
  class: "empty-list-tip"
};
const _hoisted_10 = { class: "username" };
const _hoisted_11 = { class: "username" };
const _hoisted_12 = {
  key: 2,
  class: "fetch-more-container"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  props: {
    message: { default: () => ({}) }
  },
  emits: ["setReadReceiptPanelVisible"],
  setup(__props, { emit: __emit }) {
    const emits = __emit;
    const props = __props;
    let lastUnreadCursor = "";
    let lastReadCursor = "";
    const tabNameList = ["unread", "read"];
    const isListFetchCompleted = {
      unread: false,
      read: false,
      close: false
    };
    const isPullDownFetching = ref(false);
    const isPanelClose = ref(false);
    const isFirstLoadFinished = ref(false);
    const isStopFetchMore = ref(false);
    const currentTabName = ref("unread");
    const tabInfo = ref(generateInitalTabInfo());
    onMounted(async () => {
      await initAndRefetchReceiptInfomation();
      nextTick(() => {
        isFirstLoadFinished.value = true;
      });
    });
    watch(
      () => props.message.readReceiptInfo.readCount,
      () => {
        initAndRefetchReceiptInfomation();
      }
    );
    async function fetchGroupMessageRecriptMemberListByType(readType = "all") {
      const message = TUIStore.getMessageModel(props.message.ID);
      let unreadResult = {};
      let readResult = {};
      if (readType === "all" || readType === "unread") {
        unreadResult = await TUIChatService.getGroupMessageReadMemberList({
          message,
          filter: 1,
          cursor: lastUnreadCursor,
          count: 100
        });
        if (unreadResult) {
          lastUnreadCursor = unreadResult.data.cursor;
          if (unreadResult.data.isCompleted) {
            isListFetchCompleted.unread = true;
          }
        }
      }
      if (readType === "all" || readType === "read") {
        readResult = await TUIChatService.getGroupMessageReadMemberList({
          message,
          filter: 0,
          cursor: lastReadCursor,
          count: 100
        });
        if (readResult) {
          lastReadCursor = readResult.data.cursor;
          if (readResult.data.isCompleted) {
            isListFetchCompleted.read = true;
          }
        }
      }
      const { unreadCount: totalUnreadCount, readCount: totalReadCount } = message.readReceiptInfo;
      return {
        unreadResult: {
          count: totalUnreadCount,
          ...unreadResult.data
        },
        readResult: {
          count: totalReadCount,
          ...readResult.data
        }
      };
    }
    async function pullDownFetchMoreData() {
      if (isListFetchCompleted[currentTabName.value] || isPullDownFetching.value) {
        return;
      }
      isPullDownFetching.value = true;
      if (currentTabName.value === "unread" || currentTabName.value === "read") {
        const { unreadResult, readResult } = await fetchGroupMessageRecriptMemberListByType(currentTabName.value);
        checkStopFetchMore();
        try {
          tabInfo.value.unread.memberList = tabInfo.value.unread.memberList.concat(unreadResult.unreadUserInfoList || []);
          tabInfo.value.read.memberList = tabInfo.value.read.memberList.concat(readResult.readUserInfoList || []);
        } finally {
          isPullDownFetching.value = false;
        }
      }
    }
    async function initAndRefetchReceiptInfomation() {
      lastUnreadCursor = "";
      lastReadCursor = "";
      isStopFetchMore.value = false;
      isListFetchCompleted.unread = false;
      isListFetchCompleted.read = false;
      const { unreadResult, readResult } = await fetchGroupMessageRecriptMemberListByType("all");
      checkStopFetchMore();
      resetTabInfo("read", readResult.count, readResult.readUserInfoList);
      resetTabInfo("unread", unreadResult.count, unreadResult.unreadUserInfoList);
      resetTabInfo("close");
    }
    function checkStopFetchMore() {
      if (isListFetchCompleted.read && isListFetchCompleted.unread) {
        isStopFetchMore.value = true;
      }
    }
    function resetTabInfo(tabName, count, memberList) {
      tabInfo.value[tabName].count = count;
      tabInfo.value[tabName].memberList = memberList || [];
    }
    function generateInitalTabInfo() {
      return {
        read: {
          tabName: TUITranslateService.t("TUIChat.已读"),
          count: void 0,
          memberList: []
        },
        unread: {
          tabName: TUITranslateService.t("TUIChat.未读"),
          count: void 0,
          memberList: []
        },
        close: {
          tabName: TUITranslateService.t("TUIChat.关闭"),
          count: void 0,
          memberList: []
        }
      };
    }
    function toggleTabName(tabName) {
      currentTabName.value = tabName;
    }
    function closeReadReceiptPanel() {
      isPanelClose.value = true;
      setTimeout(() => {
        emits("setReadReceiptPanelVisible", false);
      }, 200);
    }
    return (_ctx, _cache) => {
      return openBlock(), createBlock(Overlay, {
        maskColor: "transparent",
        onOnOverlayClick: closeReadReceiptPanel
      }, {
        default: withCtx(() => [
          createElementVNode("div", {
            class: normalizeClass({
              "read-receipt-panel": true,
              "read-receipt-panel-mobile": unref(isMobile),
              "read-receipt-panel-close-mobile": unref(isMobile) && unref(isPanelClose)
            })
          }, [
            createElementVNode("div", _hoisted_1, [
              createElementVNode("div", _hoisted_2, toDisplayString(unref(TUITranslateService).t("TUIChat.消息详情")), 1),
              createElementVNode("div", _hoisted_3, [
                createVNode(Icon, {
                  size: "12px",
                  hotAreaSize: "8",
                  file: unref(closeIcon),
                  onOnClick: closeReadReceiptPanel
                }, null, 8, ["file"])
              ])
            ]),
            createElementVNode("div", _hoisted_4, [
              (openBlock(), createElementBlock(Fragment, null, renderList(tabNameList, (tabName) => {
                return createElementVNode("div", {
                  key: tabName,
                  class: normalizeClass({
                    "read-status-counter": true,
                    "active": tabName === unref(currentTabName)
                  }),
                  onClick: ($event) => toggleTabName(tabName)
                }, [
                  createElementVNode("div", _hoisted_6, toDisplayString(unref(tabInfo)[tabName].tabName), 1),
                  createElementVNode("div", _hoisted_7, toDisplayString(unref(tabInfo)[tabName].count === void 0 ? "" : unref(tabInfo)[tabName].count), 1)
                ], 10, _hoisted_5);
              }), 64))
            ]),
            createElementVNode("div", _hoisted_8, [
              unref(tabInfo)[unref(currentTabName)].count === 0 && unref(isFirstLoadFinished) ? (openBlock(), createElementBlock("div", _hoisted_9, " - " + toDisplayString(unref(TUITranslateService).t("TUIChat.空")) + " - ", 1)) : unref(isFirstLoadFinished) ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                unref(currentTabName) === "unread" ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(tabInfo)[unref(currentTabName)].memberList, (item) => {
                  return openBlock(), createElementBlock("div", {
                    key: item.userID,
                    class: "read-status-member-container"
                  }, [
                    createVNode(Avatar, {
                      class: "read-status-avatar",
                      useSkeletonAnimation: "",
                      url: item.avatar || ""
                    }, null, 8, ["url"]),
                    createElementVNode("div", _hoisted_10, toDisplayString(item.nick || item.userID), 1)
                  ]);
                }), 128)) : createCommentVNode("", true),
                unref(currentTabName) === "read" ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(tabInfo)[unref(currentTabName)].memberList, (item) => {
                  return openBlock(), createElementBlock("div", {
                    key: item.userID,
                    class: "read-status-member-container"
                  }, [
                    createVNode(Avatar, {
                      class: "read-status-avatar",
                      useSkeletonAnimation: "",
                      url: item.avatar
                    }, null, 8, ["url"]),
                    createElementVNode("div", _hoisted_11, toDisplayString(item.nick || item.userID), 1)
                  ]);
                }), 128)) : createCommentVNode("", true)
              ], 64)) : createCommentVNode("", true),
              unref(isFirstLoadFinished) ? (openBlock(), createElementBlock("div", _hoisted_12, [
                createVNode(FetchMore, {
                  isFetching: unref(isPullDownFetching),
                  isTerminateObserve: unref(isStopFetchMore),
                  onOnExposed: pullDownFetchMoreData
                }, null, 8, ["isFetching", "isTerminateObserve"])
              ])) : createCommentVNode("", true)
            ])
          ], 2)
        ]),
        _: 1
      });
    };
  }
});
export {
  _sfc_main as default
};
