classroom-instruments/src/views/home/index.tsx

import { defineComponent, onMounted, reactive, ref } from 'vue';
import styles from './index.module.less';
import { NImage, NModal } from 'naive-ui';
import defultHeade from '@/components/layout/images/teacherIcon.png';
import teacherMan from './img/teacher-man.png';
import teacherWoman from './img/teacher-woman.png';
import iconEchats from './img/icon-echats.png';
import t1 from './img/t1.png';
import t11 from './img/t1-1.png';
import t12 from './img/t1-4.png';

import t2 from './img/t2.png';
import t21 from './img/t2-1.png';
import t22 from './img/t2-4.png';

import f1 from './img/f1.png';
import f11 from './img/f1-1.png';

import f2 from './img/f2.png';
import f21 from './img/f2-1.png';

import f3 from './img/f3.png';
import f31 from './img/f3-1.png';

import f4 from './img/f4.png';
import f41 from './img/f4-1.png';

import { useRouter } from 'vue-router';
import { useUserStore } from '/src/store/modules/users';
// import SelectClass from './modals/selectClass';
import dayjs from 'dayjs';
import UpdatePassword from '/src/components/layout/modals/update-password';
import AttendClass from '../prepare-lessons/model/attend-class';
// import { useResizeObserver } from '@vueuse/core';
import PlaceholderTone from '/src/components/layout/modals/placeholderTone';
import PreviewWindow from '../preview-window';
import { modalClickMask, state } from '/src/state';
import SubjectModal from './modals/subject-modal';
import { vaildMusicScoreUrl } from '/src/utils/urlUtils';
import GuideSection from '/src/components/layout/guide-section';
// import HomeGuide from '/src/custom-plugins/guide-page/home-guide';
// import { state } from '/src/state';
export const formatDateToDay = () => {
  const hours = dayjs().hour();
  if (hours < 12) {
    return '早上好'; //如果小时数小于12则输出“早上好！”
  } else if (hours > 12 && hours < 18) {
    return '下午好'; //如果小时数大于12并且小于18，输入“下午好！”
  } else {
    return '晚上好'; //如果上面两个条件都不符合，则输出“晚上好！”
  }
};

export default defineComponent({
  name: 'home-page',
  setup() {
    const router = useRouter();
    const userStore = useUserStore();
    const showUpdatePassword = ref(false);
    const showModalTone = ref(false);
    const forms = reactive({
      previewModal: false,
      previewParams: {} as any,
      showAttendClass: false,
      loading: false,
      message: '',
      list: [] as any,
      unit: null,
      classLoading: false,
      // showGuide: false,
      // homeLeftHeight: 'auto',
      subjectSyncVisiable: false
    });

    onMounted(async () => {
      // useResizeObserver(
      //   document.querySelector('#homeInfoLeft-home') as any,
      //   (entries: any) => {
      //     const entry = entries[0];
      //     const { height } = entry.contentRect;
      //     forms.homeLeftHeight = height + 'px';
      //   }
      // );

      forms.classLoading = true;

      if (!userStore.getUserInfo.account.updatePasswordFlag) {
        showUpdatePassword.value = true;
      }
      //  else {
      //   forms.showGuide = true;
      // }

      forms.classLoading = false;
    });
    return () => (
      <div class={styles.homeWrap}>
        <div id="home-0"></div>
        <div class={styles.homeSection}>
          <div class={styles.homeLeft}>
            <i class={styles.homeWindow}></i>
            <div class={styles.homeUserInfo}>
              <i class={styles.homeTag}></i>
              <div class={styles.homeUsers}>
                <div
                  style={{ cursor: 'pointer' }}
                  onClick={() => {
                    router.push({
                      path: '/setting',
                      query: { activeTab: 'person' }
                    });
                  }}>
                  <NImage
                    src={userStore.getUserInfo?.avatar || defultHeade}
                    class={styles.userImg}
                    previewDisabled
                  />
                </div>
                <p class={styles.userName}>
                  Hi，{userStore.getUserInfo?.nickname} {formatDateToDay()}～
                </p>
              </div>
              <p class={styles.desc}>
                点击下方按钮，您可以根据声部进行备课或是直接选择班级开始上课，更好的规划教学哦！
              </p>

              <div class={styles.homeBtnGroup}>
                <div
                  class={styles.btnBk}
                  onClick={() => {
                    // 备课
                    router.push({
                      path: '/prepare-lessons'
                    });
                  }}></div>
                <div
                  id="home-4"
                  class={styles.btnClass}
                  onClick={() => {
                    forms.showAttendClass = true;
                  }}></div>
              </div>

              <img src={iconEchats} class={styles.homeEchats} />
            </div>

            {userStore.getUserInfo.gender === 1 ? (
              <div>
                <img src={teacherMan} class={styles.teacherMan} />
                <span class={styles.teacherBook}></span>
              </div>
            ) : (
              <img src={teacherWoman} class={styles.teacherWoman} />
            )}
          </div>

          <div class={styles.homeRight}>
            <div class={styles.rightTop}>
              <div
                class={[styles.topSection, styles.topSection1]}
                onClick={() => {
                  forms.subjectSyncVisiable = true;
                }}>
                <img src={t1} class={styles.tFun} />
                <img src={t11} class={styles.tTxt} />
                <img src={t12} class={styles.tTitle} />
              </div>
              <div
                class={[styles.topSection, styles.topSection2]}
                onClick={() => {
                  const origin = /(localhost)/.test(location.host)
                    ? 'https://test.kt.colexiu.com'
                    : location.origin;
                  const src = `${origin}/classroom-app/#/tempo-practice?Authorization=${userStore.getToken}&win=pc&platform=modal&back=show`;
                  if (window.matchMedia('(display-mode: standalone)').matches) {
                    state.application = window.matchMedia(
                      '(display-mode: standalone)'
                    ).matches;
                    forms.previewModal = true;
                    forms.previewParams.src = src + '&backBtnType=microapp';
                  } else {
                    window.open(src, '_blank');
                  }
                }}>
                <img src={t2} class={styles.tFun} />
                <img src={t21} class={styles.tTxt} />
                <img src={t22} class={styles.tTitle} />
              </div>
            </div>

            <div class={styles.rightBottom}>
              <div
                class={styles.bottomSection}
                onClick={() => {
                  router.push('/content-instruments');
                }}>
                <img src={f1} class={styles.bFun} />
                <img src={f11} class={styles.bTxt} />
              </div>
              <div
                class={styles.bottomSection}
                onClick={() => {
                  router.push('/content-music');
                }}>
                <img src={f2} class={styles.bFun} />
                <img src={f21} class={styles.bTxt} />
              </div>
              <div
                class={styles.bottomSection}
                onClick={() => {
                  router.push('/content-musician');
                }}>
                <img src={f3} class={styles.bFun} />
                <img src={f31} class={[styles.bTxt, styles.bTxt2]} />
              </div>
              <div
                class={styles.bottomSection}
                onClick={() => {
                  router.push('/content-knowledge');
                }}>
                <img src={f4} class={styles.bFun} />
                <img src={f41} class={[styles.bTxt, styles.bTxt3]} />
              </div>
            </div>
          </div>
        </div>

        {/* {forms.showGuide ? <HomeGuide></HomeGuide> : null} */}

        <NModal
          maskClosable={modalClickMask}
          class={['background']}
          v-model:show={showModalTone.value}>
          <div>
            <PlaceholderTone
              message={forms.message}
              onClose={() => {
                showModalTone.value = false;
              }}></PlaceholderTone>
          </div>
        </NModal>

        <NModal
          maskClosable={modalClickMask}
          v-model:show={showUpdatePassword.value}
          class={['modalTitle', styles.showUpdatePassword]}
          style="--n-title-font-weight: 600;"
          preset="card"
          title={'修改密码'}
          closable={false}
          closeOnEsc={false}>
          <UpdatePassword
            onSubmit={() => {
              // 密码更新成功
              showUpdatePassword.value = true;
              // forms.showGuide = true;
              userStore.logout().then(() => {
                // 移除标签页
                router
                  .replace({
                    name: 'login'
                  })
                  .finally(() => location.reload());
              });
            }}
          />
        </NModal>

        <NModal
          maskClosable={modalClickMask}
          v-model:show={forms.showAttendClass}
          preset="card"
          showIcon={false}
          class={['modalTitle background', styles.attendClassModal]}
          title={'选择班级'}
          blockScroll={false}>
          <AttendClass
            onClose={() => (forms.showAttendClass = false)}
            type="change"
            onConfirm={(item: any) => {
              router.push({
                path: '/prepare-lessons',
                query: {
                  ...item
                }
              });
            }}
          />
        </NModal>

        <PreviewWindow
          v-model:show={forms.previewModal}
          type="music"
          params={forms.previewParams}
        />

        {/* 完成编辑时，选择声部 */}
        <NModal
          maskClosable={modalClickMask}
          v-model:show={forms.subjectSyncVisiable}
          preset="card"
          class={['modalTitle background', styles.subjectSyncModal]}
          title={'选择乐器'}>
          <SubjectModal
            onClose={() => (forms.subjectSyncVisiable = false)}
            onConfirm={async (item: any) => {
              // musicsrc = `${origin}/instrument?modelType=practise&id=${
              //   data.list[data.listActive].xmlFileUrl
              // }&Authorization=${userStore.getToken}/#/preview`;
              // const origin = /(localhost|192)/.test(location.host)
              //   ? 'https://test.lexiaoya.cn'
              //   : location.origin;
              // view-figner?subjectCode=pan-flute
              const src = `${vaildMusicScoreUrl()}/instrument/#/view-figner?Authorization=${
                userStore.getToken
              }&code=${item.code}&platform=pc&type=listenMode`;
              // const src = `http://192.168.3.220:3000/instrument.html#/view-figner?Authorization=${userStore.getToken}&code=${item.code}`;
              if (window.matchMedia('(display-mode: standalone)').matches) {
                state.application = window.matchMedia(
                  '(display-mode: standalone)'
                ).matches;
                forms.previewModal = true;
                forms.previewParams.src = src + '&matchMedia=1';
              } else {
                window.open(src);
              }

              forms.subjectSyncVisiable = false;
            }}
          />
        </NModal>

        {/* 操作手册 */}
        {/* <GuideSection  /> */}
      </div>
    );
  }
});