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

import { defineComponent, ref } 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';
export default defineComponent({
  name: 'layoutTop',
  setup() {
    const router = useRouter();
    const showHeadFlag = ref(false);
    const users = useUserStore();
    const showWord = ref(false);
    const { info } = storeToRefs(users);
    console.log(info.value, 'info');
    const gotoPerson = () => {
      router.push({ path: '/setting', query: { activeTab: 'person' } });
    };
    const gotoSchool = () => {
      router.push({ path: '/setting', query: { activeTab: 'school' } });
    };

    const resetPwd = () => {
      showWord.value = true;
      console.log('resetPwd');
    };
    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}>
            <NBadge
              value={8}
              max={99}
              class={styles.messageBadge}
              {...{id:"home-2"}}

              color={'#FF1036'}>
              <NImage
                class={[styles.messageIcon]}
                preview-disabled
                src={messageIcon}></NImage>
            </NBadge>
            <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>
        </div>
      </>
    );
  }
});