classroom-instruments/src/components/layout/layoutTop.tsx

import { defineComponent, ref, onMounted, onBeforeMount, nextTick } from 'vue';
import styles from './index.module.less';
import { NImage, NBadge, NPopover, NIcon, NModal, NTooltip } from 'naive-ui';
import schoolIcon from './images/schoolIcon.png';
import teacherIcon from './images/teacherIcon.png';
import messageIcon from './images/messageIcon.png';
import closeIcon from './images/closeIcon.png';
import clockIcon from './images/clockIcon.png';
import schoolDot from './images/schoolDot.png';
import personIcon from './images/personIcon.png';
import { useUserStore } from '@/store/modules/users';
import { useRouter } from 'vue-router';
import { storeToRefs } from 'pinia';

import 'animate.css';
import ForgotPassword from '/src/views/setting/modal/forgotPassword';
import ImGroup from './imGroup';

export default defineComponent({
  name: 'layoutTop',
  setup() {
    const router = useRouter();
    const noReadCount = ref(0); // 未读数
    const showHeadFlag = ref(false);
    const showImGroup = ref(false);
    const showImGroupLoading = ref(true);

    const users = useUserStore();
    const showWord = ref(false);
    const { info } = storeToRefs(users);
    const gotoPerson = () => {
      router.push({ path: '/setting', query: { activeTab: 'person' } });
    };
    const gotoSchool = () => {
      router.push({ path: '/setting', query: { activeTab: 'school' } });
    };

    const resetPwd = () => {
      showWord.value = true;
    };
    const body = document.querySelector('body');
    if (body) {
      body.className = 'myBody body';
    }

    onMounted(() => {
      window.addEventListener('message', onImMessage);
      showImGroup.value = true;

      nextTick(() => {
        setTimeout(() => {
          showImGroup.value = false;
        }, 50);
        setTimeout(() => {
          showImGroupLoading.value = false;
          if (body) {
            body.className = 'myBody';
          }
        }, 1000);
      });
    });

    const onImMessage = (evt: MessageEvent) => {
      if (evt.data.api === 'onImClose') {
        showImGroup.value = false;
      } else if (evt.data.api === 'getNoReadMessageCount') {
        // console.log(evt, 'onMessage');
        noReadCount.value = evt.data.count || 0;
      }
    };

    onBeforeMount(() => {
      window.removeEventListener('message', onImMessage);
    });
    return () => (
      <>
        <div class={styles.layoutTop}>
          <div class={styles.layoutLeft}>
            <NImage
              src={schoolIcon}
              class={styles.schoolIcon}
              previewDisabled></NImage>
            <p>
              {info.value.schoolInfos[0].tenantName} |{' '}
              {info.value.schoolInfos[0].name}
            </p>
          </div>
          <div class={styles.layoutRight}>
            <div onClick={() => (showImGroup.value = true)}>
              <NBadge
                value={noReadCount.value}
                max={99}
                class={[
                  styles.messageBadge,
                  noReadCount.value <= 0 ? styles.messageBadgeNo : ''
                ]}
                {...{ id: 'home-2' }}
                color={'#FF1036'}>
                <NImage
                  class={[
                    styles.messageIcon,
                    noReadCount.value > 0 ? styles.animation : ''
                  ]}
                  preview-disabled
                  src={messageIcon}></NImage>
              </NBadge>
            </div>

            <div class={styles.line}></div>
            <NPopover
              show-arrow={false}
              trigger="click"
              onUpdate:show={val => {
                showHeadFlag.value = val;
              }}
              class={styles.popoverHeader}
              placement="bottom-end"
              raw={true}
              v-slots={{
                trigger: () => (
                  <div class={styles.mesgWrap}>
                    <NImage
                      preview-disabled
                      class={styles.teacherIcon}
                      src={
                        info.value.avatar ? info.value.avatar : teacherIcon
                      }></NImage>
                    <NIcon
                      class={
                        showHeadFlag.value
                          ? styles.rotueLeft
                          : styles.rotueRight
                      }>
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24">
                        <path
                          d="M7.38 21.01c.49.49 1.28.49 1.77 0l8.31-8.31a.996.996 0 0 0 0-1.41L9.15 2.98c-.49-.49-1.28-.49-1.77 0s-.49 1.28 0 1.77L14.62 12l-7.25 7.25c-.48.48-.48 1.28.01 1.76z"
                          fill="currentColor"></path>
                      </svg>
                    </NIcon>
                  </div>
                )
              }}>
              <div class={styles.propWrap}>
                <div class={styles.teacherInfo}>
                  <NImage
                    class={styles.teacherIcon}
                    src={info.value.avatar ? info.value.avatar : teacherIcon}
                    previewDisabled></NImage>
                  <NTooltip class={styles.nameTool}>
                    {{
                      trigger: () => (
                        <p class={styles.teacherName}>{info.value.nickname}</p>
                      ),
                      default: () => info.value.nickname
                    }}
                  </NTooltip>
                </div>
                <div class={styles.propWrapList}>
                  <div class={styles.propWrapItem} onClick={() => gotoPerson()}>
                    {' '}
                    <NImage
                      class={styles.smallIcon}
                      src={personIcon}
                      previewDisabled></NImage>
                    <p class={styles.smallTitle}>个人信息</p>
                  </div>
                  {info.value.isSuperAdmin ? (
                    <div
                      class={styles.propWrapItem}
                      onClick={() => {
                        gotoSchool();
                      }}>
                      {' '}
                      <NImage
                        class={styles.smallIcon}
                        src={schoolDot}
                        previewDisabled></NImage>
                      <p class={styles.smallTitle}>学校信息</p>
                    </div>
                  ) : null}

                  <div class={styles.propWrapItem} onClick={() => resetPwd()}>
                    {' '}
                    <NImage
                      class={styles.smallIcon}
                      src={clockIcon}
                      previewDisabled></NImage>
                    <p class={styles.smallTitle}>修改密码</p>
                  </div>
                </div>
                <div
                  class={styles.logoutInfo}
                  onClick={() => {
                    users.logout();
                    router.replace('/login');
                  }}>
                  <div class={styles.propWrapItem}>
                    <NImage
                      class={styles.smallIcon}
                      src={closeIcon}
                      previewDisabled></NImage>
                    <p class={styles.smallTitle}>退出登录</p>
                  </div>
                </div>
              </div>
            </NPopover>
          </div>
          <NModal
            class={styles.changePwdModal}
            v-model:show={showWord.value}
            preset="dialog"
            showIcon={false}
            title="修改密码">
            <ForgotPassword
              phone={info.value.phone}
              onClose={() => {
                showWord.value = false;
              }}
            />
          </NModal>

          <NModal
            v-model:show={showImGroup.value}
            showIcon={false}
            class={showImGroupLoading.value ? styles.hideModal : ''}
            {...{ id: 'imGroupDiv' }}
            displayDirective="show">
            <ImGroup />
          </NModal>
        </div>
      </>
    );
  }
});