<template>
  <n-scrollbar class="member-section">
    <main class="member">
      <n-spin :show="muteLoading" stroke="#198CFE">
        <div class="sectionSearch">
          <n-input
            class="TheSearch noBorder"
            style="
              --n-font-size: 12px;
              --n-height: 35px;
              --n-caret-color: #198cfe;
              --n-border-hover: 1px solid #198cfe;
              --n-border-focus: 1px solid #198cfe;
              --n-loading-color: #198cfe;
              --n-box-shadow-focus: 0 0 0 2px rgba(25 140 254, 0.2);
            "
            round
            clearable
            placeholder="请输入群成员名称"
            v-model:value="keyword"
            @keyup="onKeyup"
          >
            <template #prefix>
              <span class="icon-search-input"></span
            ></template>
            <template #suffix
              ><n-button @click="debouncedRequest('')" round color="#198cfe"
                >搜索</n-button
              ></template
            >
          </n-input>
        </div>
        <ul class="list">
          <li
            class="list-item"
            v-for="(item, index) in list"
            :key="index"
            @click="onSelectItem(item)"
          >
            <aside>
              <!-- icon icon-selected -->
              <i
                :class="[
                  'icon',
                  isSelect(item) ? 'icon-selected' : 'icon-unselected',
                ]"
              ></i>
              <img
                class="avatar"
                :src="
                  item?.avatar ||
                  'https://oss.dayaedu.com/news-info/07/1690787574969.png'
                "
                onerror="this.src='https://oss.dayaedu.com/news-info/07/1690787574969.png'"
              />
              <span class="name">{{ item?.nickname || item?.userID }}</span>
            </aside>
            <!-- <i v-if="item.role !== 'Owner' && isShowDel" class="icon icon-del" @click="submit(item)"></i> -->
          </li>
          <li
            class="list-item"
            v-if="list.length < total && total > 0 && !muteLoading"
            @click="getMore"
          >
            {{ $t(`TUIChat.manage.查看更多`) }}
          </li>
        </ul>
        <div
          class="theEmpty"
          v-if="!muteLoading && list.length <= 0"
          style="height: 75%"
        >
          <img class="emptyImg" src="../../../assets/nomore.png" />
          <p>暂无数据</p>
        </div>
      </n-spin>
    </main>
    <div class="footer">
      <div class="selectUser" @click="onSelectAll">
        <i
          :class="['icon', isSelectAll ? 'icon-selected' : 'icon-unselected']"
        ></i>
        <span>全选(已选择{{ selectList.length || 0 }})：</span>
      </div>
      <div class="userInfo">
        <div class="userList" @click="showMore = true">
          <img
            class="avatar"
            v-for="(item, index) in selectList"
            :key="index"
            :src="
              item?.avatar ||
              'https://oss.dayaedu.com/news-info/07/1690787574969.png'
            "
            onerror="this.src='https://oss.dayaedu.com/news-info/07/1690787574969.png'"
          />
        </div>
        <span
          :class="['muteBtn', selectList.length <= 0 ? 'disabled' : '']"
          @click="submit"
        >
          {{ currentModel === "not_mute" ? "禁言" : "解除禁言" }}
        </span>
      </div>
    </div>

    <div v-if="showMore" class="maskMute"></div>
    <div :class="['selectListSection', showMore ? 'show' : '']">
      <div class="selectHeader">
        <i class="icon-close" @click="showMore = false"></i>
        <span class="title">已选择 ({{ selectList.length || 0 }})</span>
        <span
          :class="['sureBtn', selectList.length <= 0 ? 'disabled' : '']"
          @click="showMore = false"
          >确定</span
        >
      </div>
      <div class="selectContainer">
        <div
          class="list-item"
          v-for="(item, index) in selectList"
          :key="index"
          @click="onSelectItem(item)"
        >
          <aside>
            <img
              class="avatar"
              :src="
                item?.avatar ||
                'https://oss.dayaedu.com/news-info/07/1690787574969.png'
              "
              onerror="this.src='https://oss.dayaedu.com/news-info/07/1690787574969.png'"
            />
            <span class="name">{{ item?.nickname || item?.userID }}</span>
          </aside>
          <i class="icon icon-remove"></i>
        </div>
        <div
          class="theEmpty"
          v-if="selectList.length <= 0"
          style="margin-top: 20px; margin-bottom: 0"
        >
          <img class="emptyImg" src="../../../assets/nomore.png" />
          <p>暂无数据</p>
        </div>
      </div>
    </div>
  </n-scrollbar>
</template>

<script lang="ts">
import { defineComponent, watchEffect, reactive, toRefs } from "vue";
import TIM from "@tencentcloud/chat";
import { imGroupGroupMute, imGroupMemberPage } from "../../../../api";
import { useThrottleFn } from "@vueuse/core";
const ManageMember = defineComponent({
  components: {},
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    currentModel: {
      type: String,
      default: "",
    },
    muteLoading: {
      type: Boolean,
      default: false,
    },
    total: {
      type: Number,
      default: 0,
    },
    conversation: {
      type: Object,
      default: () => ({}),
    },
    isShowDel: {
      type: Boolean,
      default: () => false,
    },
    self: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props: any, ctx: any) {
    const types: any = TIM.TYPES;
    const data: any = reactive({
      conversation: {},
      currentModel: "",
      total: 0,
      muteLoading: false,
      list: [],
      page: 1,
      isShowDel: false,
      self: {},
      keyword: "",
      showMore: false, // 显示更多
      selectList: [],
      isSelectAll: false, // 是否全部选择
    });

    watchEffect(() => {
      if (data.currentModel !== props.currentModel) {
        data.selectList = [];
      }
      data.conversation = props.conversation;
      data.muteLoading = props.muteLoading;
      data.total = props.total;
      data.isShowDel = props.isShowDel;
      data.list = props.list;
      data.self = props.self;
      data.currentModel = props.currentModel;

      data.selectList = [];
      data.isSelectAll = false;
    });

    const handleRoleName = (item: any) => {
      const { t } = (window as any).TUIKitTUICore.config.i18n.useI18n();
      let name = "";
      console.log(item, data.self, "self");
      switch (item?.groupRoleType) {
        case "Admin":
          name = t("TUIChat.manage.管理员");
          break;
        case "Owner":
          name = t("TUIChat.manage.群主");
          break;
      }
      if (name) {
        name = `(${name})`;
      }
      if (item.imUserId === data.self.userID) {
        name += ` (${t("TUIChat.manage.我")})`;
      }
      return name;
    };

    const submit = async (item: any) => {
      //   ctx.emit("del", [item]);
      try {
        if (data.selectList.length <= 0) return;
        const userIds = data.selectList.map((item: any) => {
          return item.userId;
        });
        await imGroupGroupMute({
          groupId: data.conversation?.groupProfile?.groupID,
          muteTime: -1,
          groupMute: data.currentModel === "not_mute" ? true : false,
          userIds,
        });
        onBack();
      } catch {}
    };

    const onSelectItem = (item: any) => {
      const index = data.selectList.findIndex(
        (child) => child.userId === item.userId
      );
      if (index === -1) {
        data.selectList.push(item);
      } else {
        data.selectList.splice(index, 1);
      }

      data.isSelectAll =
        data.list.length === data.selectList.length ? true : false;
    };

    const isSelect = (item: any) => {
      const index = data.selectList.findIndex(
        (child) => child.userId === item.userId
      );
      return index === -1 ? false : true;
    };

    const onSelectAll = (item: any) => {
      if (data.list.length === data.selectList.length) {
        data.selectList = [];
        data.isSelectAll = false;
      } else {
        data.selectList = [...data.list];
        data.isSelectAll = true;
      }
    };

    const handleMemberProfileShow = (user: any) => {
      ctx.emit("handleMemberProfileShow", user);
    };

    const onBack = () => {
      ctx.emit("back");
    };

    const onSearch = (val: string) => {
      ctx.emit("search", data.keyword);
    };

    const debouncedRequest = useThrottleFn((val: string) => {
      onSearch(val);
    }, 500);

    const onKeyup = (e: any) => {
      e.stopPropagation();
      if (e.code === "Enter") {
        debouncedRequest(data.keyword);
      }
    };

    return {
      ...toRefs(data),
      submit,
      isSelect,
      debouncedRequest,
      onKeyup,
      onSearch,
      onSelectItem,
      onSelectAll,
      handleRoleName,
      handleMemberProfileShow,
    };
  },
});
export default ManageMember;
</script>

<style lang="scss" scoped>
@import url("../../../styles/common.scss");
@import url("../../../styles/icon.scss");
.member-section {
  font-size: 20px;
  .n-scrollbar-content {
    min-height: calc(100% - 57px);
  }
}

.n-scrollbar-content {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.member {
  position: relative;
  flex: 1;
  background: #f8f9fc;
  min-height: calc(100% - 57px);

  .list {
    display: flex;
    flex-direction: column;
    // background: #f4f5f9;
    // padding-top: 12px;
    // padding-bottom: 66px;
    &-item {
      padding: 13px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #ffffff;
      font-size: 14px;
      overflow: hidden;
      cursor: pointer;
      aside {
        display: flex;
        align-items: center;
        width: 100%;
        overflow: hidden;
        .avatar {
          margin-left: 12px;
          flex-shrink: 0;
        }
        .name {
          padding-left: 8px;
          font-weight: 400;
          font-size: 14px;
          color: #000000;
          flex: 1;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 4px;
}

.sectionSearch {
  position: sticky;
  top: 0;
  left: 0;
  padding: 4px 12px 12px;
  background: #f8f9fc;
}

::deep .TheSearch .n-input--focus {
  .active {
    display: block;
  }

  .default {
    display: none;
  }

  .n-button {
    opacity: 1;
  }
}

.n-spin-container {
  height: 100%;
  :deep(.n-spin-content) {
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }
}

.TheSearch {
  border-radius: 20px !important;

  &.noBorder {
    --n-border: none !important;
  }

  .n-button {
    :deep(.n-button__content) {
      color: #fff;
    }
  }

  :deep(.n-input-wrapper) {
    padding-left: 12px;
    padding-right: 4px;
    height: 35px !important;
  }

  .n-button {
    height: 26px;
    font-size: 12px;
    font-weight: 500;
    width: auto;
    opacity: 0.7;
  }

  .active {
    display: none;
  }

  .active,
  .default {
    width: 14px;
    height: 14px;
  }

  &:hover {
    .n-button {
      opacity: 1;
    }
  }
}
.icon-unselected,
.icon-selected {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.footer {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  // width: 100%;
  padding: 0 12px;
  height: 66px;
  background: #ffffff;
  display: flex;
  align-items: center;
}
.selectUser {
  display: flex;
  align-items: center;
  font-weight: 400;
  font-size: 14px;
  color: #777777;
  line-height: 20px;
  flex-shrink: 0;
  cursor: pointer;
  span {
    padding-left: 12px;
  }
}
.userInfo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;

  .userList {
    max-width: 110px;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    align-items: center;
    cursor: pointer;
    .avatar {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      margin-right: 5px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
  .muteBtn {
    cursor: pointer;
    width: 80px;
    line-height: 30px;
    background: #198cfe;
    border-radius: 20px;
    font-weight: 500;
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    font-style: normal;

    &.disabled {
      opacity: 0.7;
      cursor: not-allowed;
    }
  }
}
::-webkit-scrollbar {
  //   width: 4Px;
  height: 4px;
  background-color: transparent;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #d8d8d8;
}

.theEmpty {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex: 1;

  .emptyImg {
    width: 210px;
    height: 210px;
  }

  p {
    font-size: 16px;
    color: #AAAAAA;
    line-height: 22px;
  }
}

.selectListSection {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 11;
  background: #ffffff;
  border-radius: 10px 10px 0px 0px;
  height: 70vh;
  overflow-x: hidden;
  overflow-y: auto;
  // display: none;
  opacity: 0;
  height: 0;
  transition: all 0.2s ease;
  &.show {
    // display: block;
    opacity: 1;
    height: 70vh;
    transition: all 0.2s ease;
  }
}
.selectHeader {
  padding: 16px 20px 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 99;
  background-color: #fff;

  .icon-close {
    cursor: pointer;
  }

  .title {
    font-weight: 600;
    font-size: 16px;
    color: #131415;
    line-height: 22px;
  }
  .sureBtn {
    cursor: pointer;
    width: 52px;
    line-height: 26px;
    background: #198cfe;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    &.disabled {
      opacity: 0.7;
      cursor: not-allowed;
    }
  }
}

.selectContainer {
  .list-item {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: default;

    &:first-child {
      padding-top: 0;
    }
    .avatar {
      margin-left: 0 !important;
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    .name {
      padding-left: 11px;
      font-weight: 500;
      font-size: 14px;
      color: #333333;
      line-height: 20px;
    }

    .icon-remove {
      cursor: pointer;
    }
  }
}

.maskMute {
  position: absolute;
  left: 0;
  right: 0;
  top: -58px;
  bottom: 0;
  z-index: 10px;
  background: rgba(0, 0, 0, 0.6);
}
</style>
<style lang="scss">
.member-section {
  font-size: 20px;
  .n-scrollbar-content {
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }
}

</style>