"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const Vue = require("vue");
require("../../../../adapter-vue.js");
const TUIChatEngine = require("@tencentcloud/chat-uikit-engine");
const iconClose = require("../../../../assets/icon/icon-close.svg.js");
const Icon = require("../../../common/Icon.vue.js");
const index = require("../../../common/Overlay/index.vue.js");
const index$1 = require("../../../common/Avatar/index.vue.js");
const index$2 = require("../../../common/FetchMore/index.vue.js");
const env = require("../../../../utils/env.js");
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__ */ Vue.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 = Vue.ref(false);
    const isPanelClose = Vue.ref(false);
    const isFirstLoadFinished = Vue.ref(false);
    const isStopFetchMore = Vue.ref(false);
    const currentTabName = Vue.ref("unread");
    const tabInfo = Vue.ref(generateInitalTabInfo());
    Vue.onMounted(async () => {
      await initAndRefetchReceiptInfomation();
      Vue.nextTick(() => {
        isFirstLoadFinished.value = true;
      });
    });
    Vue.watch(
      () => props.message.readReceiptInfo.readCount,
      () => {
        initAndRefetchReceiptInfomation();
      }
    );
    async function fetchGroupMessageRecriptMemberListByType(readType = "all") {
      const message = TUIChatEngine.TUIStore.getMessageModel(props.message.ID);
      let unreadResult = {};
      let readResult = {};
      if (readType === "all" || readType === "unread") {
        unreadResult = await TUIChatEngine.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 TUIChatEngine.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: TUIChatEngine.TUITranslateService.t("TUIChat.已读"),
          count: void 0,
          memberList: []
        },
        unread: {
          tabName: TUIChatEngine.TUITranslateService.t("TUIChat.未读"),
          count: void 0,
          memberList: []
        },
        close: {
          tabName: TUIChatEngine.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 Vue.openBlock(), Vue.createBlock(index.default, {
        maskColor: "transparent",
        onOnOverlayClick: closeReadReceiptPanel
      }, {
        default: Vue.withCtx(() => [
          Vue.createElementVNode("div", {
            class: Vue.normalizeClass({
              "read-receipt-panel": true,
              "read-receipt-panel-mobile": Vue.unref(env.isMobile),
              "read-receipt-panel-close-mobile": Vue.unref(env.isMobile) && Vue.unref(isPanelClose)
            })
          }, [
            Vue.createElementVNode("div", _hoisted_1, [
              Vue.createElementVNode("div", _hoisted_2, Vue.toDisplayString(Vue.unref(TUIChatEngine.TUITranslateService).t("TUIChat.消息详情")), 1),
              Vue.createElementVNode("div", _hoisted_3, [
                Vue.createVNode(Icon.default, {
                  size: "12px",
                  hotAreaSize: "8",
                  file: Vue.unref(iconClose.default),
                  onOnClick: closeReadReceiptPanel
                }, null, 8, ["file"])
              ])
            ]),
            Vue.createElementVNode("div", _hoisted_4, [
              (Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, null, Vue.renderList(tabNameList, (tabName) => {
                return Vue.createElementVNode("div", {
                  key: tabName,
                  class: Vue.normalizeClass({
                    "read-status-counter": true,
                    "active": tabName === Vue.unref(currentTabName)
                  }),
                  onClick: ($event) => toggleTabName(tabName)
                }, [
                  Vue.createElementVNode("div", _hoisted_6, Vue.toDisplayString(Vue.unref(tabInfo)[tabName].tabName), 1),
                  Vue.createElementVNode("div", _hoisted_7, Vue.toDisplayString(Vue.unref(tabInfo)[tabName].count === void 0 ? "" : Vue.unref(tabInfo)[tabName].count), 1)
                ], 10, _hoisted_5);
              }), 64))
            ]),
            Vue.createElementVNode("div", _hoisted_8, [
              Vue.unref(tabInfo)[Vue.unref(currentTabName)].count === 0 && Vue.unref(isFirstLoadFinished) ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_9, " - " + Vue.toDisplayString(Vue.unref(TUIChatEngine.TUITranslateService).t("TUIChat.空")) + " - ", 1)) : Vue.unref(isFirstLoadFinished) ? (Vue.openBlock(), Vue.createElementBlock(Vue.Fragment, { key: 1 }, [
                Vue.unref(currentTabName) === "unread" ? (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, { key: 0 }, Vue.renderList(Vue.unref(tabInfo)[Vue.unref(currentTabName)].memberList, (item) => {
                  return Vue.openBlock(), Vue.createElementBlock("div", {
                    key: item.userID,
                    class: "read-status-member-container"
                  }, [
                    Vue.createVNode(index$1.default, {
                      class: "read-status-avatar",
                      useSkeletonAnimation: "",
                      url: item.avatar || ""
                    }, null, 8, ["url"]),
                    Vue.createElementVNode("div", _hoisted_10, Vue.toDisplayString(item.nick || item.userID), 1)
                  ]);
                }), 128)) : Vue.createCommentVNode("", true),
                Vue.unref(currentTabName) === "read" ? (Vue.openBlock(true), Vue.createElementBlock(Vue.Fragment, { key: 1 }, Vue.renderList(Vue.unref(tabInfo)[Vue.unref(currentTabName)].memberList, (item) => {
                  return Vue.openBlock(), Vue.createElementBlock("div", {
                    key: item.userID,
                    class: "read-status-member-container"
                  }, [
                    Vue.createVNode(index$1.default, {
                      class: "read-status-avatar",
                      useSkeletonAnimation: "",
                      url: item.avatar
                    }, null, 8, ["url"]),
                    Vue.createElementVNode("div", _hoisted_11, Vue.toDisplayString(item.nick || item.userID), 1)
                  ]);
                }), 128)) : Vue.createCommentVNode("", true)
              ], 64)) : Vue.createCommentVNode("", true),
              Vue.unref(isFirstLoadFinished) ? (Vue.openBlock(), Vue.createElementBlock("div", _hoisted_12, [
                Vue.createVNode(index$2.default, {
                  isFetching: Vue.unref(isPullDownFetching),
                  isTerminateObserve: Vue.unref(isStopFetchMore),
                  onOnExposed: pullDownFetchMoreData
                }, null, 8, ["isFetching", "isTerminateObserve"])
              ])) : Vue.createCommentVNode("", true)
            ])
          ], 2)
        ]),
        _: 1
      });
    };
  }
});
exports.default = _sfc_main;
