classroom-app/src/views/courseware-list/component/book/index.tsx

import {
  PropType,
  defineComponent,
  nextTick,
  onMounted,
  reactive,
  watch,
  ref
} from 'vue';
import styles from './index.module.less';
import icon_back from '../../image/icon_back.svg';
import icon_play from '../../image/icon_class.png';
import pre from '../../image/pre.png';
import { useRouter } from 'vue-router';
import { listenerMessage, postMessage } from '@/helpers/native-message';
import { showToast } from 'vant';
import queryString from 'query-string';
import CoursewareDetail from '@/custom-plugins/guide-page/courseware-detail';
import { usePageVisibility } from '@vant/use';
import { state } from '@/state';
import TheNoticeBar from '@/components/the-noticeBar';
import { api_lessonDetailCourseware, api_classDetailCourseware } from '../../api';
import SelectCoursewarePop from '@/components/select-courseware-pop';

export default defineComponent({
  name: 'the-book',
  props: {
    bookData: {
      type: Object as PropType<any>,
      default: () => ({})
    },
    tab: {
      type: String,
      default: ''
    },
    show: {
      type: Boolean,
      default: false
    },
    rect: {
      type: Object as PropType<DOMRect>,
      default: () => ({})
    },
    subjectId: {
      type: [String, Number],
      default: ''
    }
  },
  emits: ['close'],
  setup(props, { emit }) {
    const router = useRouter();
    console.log(state.user.data.phone);
    const lastTimeKey = 'lastTime' + (state?.user?.data?.phone ?? '');
    const data = reactive({
      show: false,
      width: 0,
      height: 0,
      transform: '',
      list: [] as any[][],
      lastTime: localStorage.getItem(lastTimeKey),
      isClick: false,
      coursewareList: [] as any,
    });
    const showSelectCourseware = ref(false);
    const showGuide = ref(false);
    const isend = ref(false);
    const step = ref(0);
    const CoursewareDetailRef = ref();
    const handleCreate = (key: string, url: string) => {
      return new Promise((resolve, reject) => {
        const _s = document.head.querySelector(`script[data-key="${key}"]`);
        if (!_s) {
          const s = document.createElement('script');
          s.setAttribute('data-key', key);
          s.src = url;
          s.onload = async () => {
            console.log(key + ' 加载完成');
            resolve(1);
          };
          document.head.appendChild(s);
        }
      });
    };
    const init = async () => {
      //   await handleCreate('jquery', '/book/jquery.min.1.7.js');
      //   await handleCreate('turn', '/book/turn.js');
      console.log('初始化完成');
    };
    const isFirest = ref(true);
    let book: any = null;
    let timer: any = null;
    const handleBook = () => {
      book = (window as any).$('#flipbook');
      const height = document.body.clientHeight * 0.8;

      data.height = height;
      data.width = height * (210 / 297) * 2;
      book.turn({
        autoCenter: true,
        duration: 1000,
        disabled: true,
        acceleration: true, // 是否启动硬件加速 如果为触摸设备必须为true
        // pages: 11, // 页码总数
        elevation: 50, // 转换期间页面的高度
        width: data.width, // 宽度 单位 px
        height: data.height, // 高度 单位 px
        gradients: true // 是否显示翻页阴影效果
        // display: 'single', //设置单页还是双页
      });

      book.bind('start', (event: Event, pageObject: any, corner: any) => {
        // console.log(event, 'last', pageObject.next)
        // if (isFirest.value) {
        //   console.log('第一次进来禁用', pageObject)
        //   isFirest.value = false
        //   book.turn('disabled', true);

        // }
        if (corner == 'tl' || corner == 'tr') {
          event.preventDefault();
        }
        if (data.isClick) {
          nextTick(() => {
            data.isClick = false;
            if (corner == 'tl' || corner == 'tr') {
              event.preventDefault();
            } else {
              book.turn('page', pageObject.next);
            }
          });
        }
      });
      book.bind('turned', (event: Event, page: any, corner: any) => {
        // setTimeout(() => {
        // }, 1000);

        // console.log(page - 1, 'page')

        // const index = (page - 1)
        // console.log(data.list[index * step.value], data.list)

        nextTick(() => {
          showGuide.value = true;
        });

        // if (page + 1 === book.turn('pages')) {
        //   // noanimateClose()
        //   handleClose()
        //   // nextTick(() => {

        //   // });
        // }
      });

      book.bind('turning', (event: Event, page: any, corner: any) => {
        // console.log(page, 'page', book.turn('pages'))
        if (page === book.turn('pages')) {
          handleClose(false);
          // handleClose()
          // nextTick(() => {

          // });
        }

        if (page === 1) {
          handleClose(false);
        }
        return;
      });
      // book.bind('turned', (e: any, page: any) => {
    };
    const getRect = () => {
      const bookWrap = document.querySelector(
        '.bookWrap'
      ) as unknown as HTMLElement;
      if (bookWrap) {
        const rect = bookWrap.getBoundingClientRect();
        const xScale = props.rect.width / (rect.width / 2);
        const yScale = props.rect.height / rect.height;
        const left =
          (((rect.width / 2) * (xScale - 1)) / 2 +
            props.rect.x -
            rect.x -
            rect.width / 4) /
          xScale;
        const top =
          ((rect.height * (yScale - 1)) / 2 + props.rect.y - rect.y) / yScale;
        const transform = `scale3d(${xScale}, ${yScale}, 1) translate(${left}px, ${top}px)`;
        bookWrap.style.transform = data.transform = transform;
        bookWrap.style.transition = 'transform 0s';
        nextTick(() => {
          requestAnimationFrame(() => {
            requestAnimationFrame(() => {
              bookWrap.style.transition = 'transform 1s';
              bookWrap.style.transform = '';
              data.show = true;
              timer = setTimeout(() => {
                book.turn('page', 2);
              }, 500);
            });
          });
        });
      }
    };
    const handleClose = (gotoOne = true) => {
      showGuide.value = false;
      // book.turn('disabled', false);
      if (isend.value) {
        return;
      }
      isend.value = true;
      clearTimeout(timer);
      const bookWrap = document.querySelector(
        '.bookWrap'
      ) as unknown as HTMLElement;
      if (gotoOne) {
        book.turn('page', 1);
      }

      if (bookWrap) {
        bookWrap.style.transform = data.transform;
      }
      emit('close');
      setTimeout(() => {
        bookWrap.style.transition = '';
        bookWrap.style.transform = '';
        data.show = false;
        data.list = [];
        isend.value = false;
      }, 1000);
    };

    onMounted(async () => {
      await init();
      listenerMessage('webViewOnResume', () => {
        data.lastTime = localStorage.getItem(lastTimeKey);
      });
    });
    const getList = () => {
      if (!props.bookData?.lessonList) return;
      step.value = Math.floor((document.body.clientHeight * 0.8 - 40) / 50);
      const list = [];
      let listItem = [] as any[];
      for (let i = 0; i < props.bookData.lessonList.length; i++) {
        const item = props.bookData.lessonList[i];
        if (listItem.length >= step.value) {
          list.push([...listItem]);
          listItem = [{ name: item.name }];
        } else {
          listItem.push({ name: item.name });
        }
        for (let j = 0; j < item.knowledgeList.length; j++) {
          if (listItem.length >= step.value) {
            list.push([...listItem]);
            listItem = [item.knowledgeList[j]];
          } else {
            listItem.push(item.knowledgeList[j]);
          }
        }
      }
      if (listItem.length) {
        list.push(listItem);
      }
      data.list = list;
      // console.log('🚀 ~ data.list:', data.list.length);
      // console.log(book.turn.pages, 'book.turn.pages')
      // console.log(book.turn('pages'), 'pages')
    };
    watch(
      () => props.show,
      () => {
        if (props.show) {
          getList();
          nextTick(() => {
            handleBook();
            requestAnimationFrame(() => {
              getRect();
            });
          });
        }
      }
    );
    // 检测有几个课件
    const checkCourseware = async (item: any) => {
      if (item.id) {
        if (!item.containMaterial) {
          showToast('暂无资源');
          return;
        }
        if (item.coursewareNum) {
          try {
            const res = props.tab == 'all' ? await api_lessonDetailCourseware({
              lessonCoursewareKnowledgeDetailId: item.id,
            }): await api_classDetailCourseware({
              lessonCoursewareKnowledgeDetailId: item.id,
            })
            if (res?.code == 200 && res.data?.length) {
              // console.log(res.data)
              data.coursewareList = res.data;
              // 如果只有一个课件，直接进入该课件
              if (res.data.length == 1) {
                handleOpenPlay(res.data[0])
              } else {
                // 如果有多个课件，需要选择一个课件进入上课页面
                showSelectCourseware.value = true;
              }
            } 
          } catch {
            //
          }
        }
      }
    }
    const handleOpenPlay = async (item: any) => {
      if (item.id) {
        localStorage.setItem(lastTimeKey, item.id);
        const query = queryString.stringify({
          id: item.id, // 课件id
          lessonCoursewareId: item.lessonCoursewareId,
          courseId: props.bookData.id,
          lessonCoursewareDetailId: item.lessonCoursewareDetailId,
          name: item.name,
          subjectId: props.subjectId,
          tab: props.tab, // 当前切换的是哪个类型
          coursewareDetailKnowledgeId: item.coursewareDetailKnowledgeId, // 章节id
        });
        const url =
          location.origin + location.pathname + '#/courseware-play?' + query;
        console.log('🚀 ~ url:', url);
        postMessage({
          api: 'openWebView',
          content: {
            url,
            orientation: 0,
            isHideTitle: false,
            c_orientation: 0 // 0 横屏 1 竖屏
          }
        });
        // router.push({
        //   path: '/courseware-play',
        //   query: {
        //     id: item.id,
        //     subjectId: props.subjectId,
        //     lessonCoursewareId: item.lessonCoursewareId,
        //     courseId: props.bookData.id,
        //     lessonCoursewareDetailId: item.lessonCoursewareDetailId,
        //     name: item.name,
        //     tab: props.tab,
        //     coursewareDetailKnowledgeId: item.coursewareDetailKnowledgeId
        //   }
        // });
      }
    };

    const isStartAnimate = (item: any) => {
      // console.log(item) item.name.length > 9 ? true :

      return false;
    };

    const changeShowGuide = (flag: boolean) => {
      showGuide.value = flag;
      if (flag) {
        console.log('changeShowGuide禁用');
        // book.turn('disabled', true);
      } else {
        console.log('changeShowGuide取消禁用');
        // book.turn('disabled', false);
      }
    };
    return () => (
      <div
        class={[styles.book, data.show ? '' : styles.bookHide]}
        onClick={() => handleClose()}
        onTouchmove={() => {
          console.log('sdfds');
          data.isClick = true;
        }}>
        <div class={styles.back}>
          <img src={icon_back} />
        </div>
        <div
          class="bookWrap"
          style={{ width: data.width + 'px' }}
          onClick={(e: Event) => {
            e.stopPropagation();
          }}>
          {!!data.list.length && (
            <div id="flipbook" class={[data.show && 'animated']}>
              <div class="page">
                <img
                  style="width: 100%; height: 100%; object-fit: cover;"
                  src={props.bookData.coverImg}
                />
              </div>
              {data.list.map((list: any) => {
                return (
                  <div class="page">
                    <div class={styles.wrap}>
                      <div class={styles.wrapItem}>
                        {list.map((item: any, index: number) => {
                          return (
                            <>
                              <div
                                class={[styles.item, item.id && styles.des]}
                                onTouchstart={(e: TouchEvent) => {
                                  e.stopPropagation();
                                }}
                                onClick={(e: Event) => {
                                  e.stopPropagation();
                                  checkCourseware(item);
                                }}
                                onTouchend={(e: TouchEvent) => {
                                  console.log(e);
                                }}>
                                {item.id ? (
                                  <img
                                    id={index == 1 ? 'coursewareDetail-0' : ''}
                                    class={styles.icon}
                                    src={icon_play}
                                  />
                                ) : null}
                                <div
                                  class={styles.name}
                                  style={{ lineHeight: '20Px' }}>
                                  {data.lastTime === item.id && (
                                    <img
                                      src={pre}
                                      alt=""
                                      class={styles.preIcon}
                                    />
                                  )}

                                  <div class={styles.nameText}>
                                    {' '}
                                    {item.name}
                                  </div>

                                  {/* <TheNoticeBar text={item.name} isAnimation={isStartAnimate(item)}></TheNoticeBar> */}
                                </div>
                              </div>
                            </>
                          );
                        })}
                      </div>
                    </div>
                  </div>
                );
              })}
              {data.list.length % 2 === 1 && (
                <div class="page" style={{ pointerEvents: 'none' }}>
                  <div class={styles.wrap}>
                    <div class={styles.wrapItem}></div>
                  </div>
                </div>
              )}
              <div class="page">
                <img
                  style="width: 100%; height: 100%; object-fit: cover;"
                  src={props.bookData.coverImg}
                />
                {/* <div class={styles.wrap}>

                  <div
                    class={styles.wrapItem}
                    style={{ backgroundColor: '#fff' }}></div>
                </div> */}
              </div>
            </div>
          )}
        </div>
        {/* {showGuide.value ? <CoursewareDetail onChangeShowGuide={changeShowGuide} ref={CoursewareDetailRef}></CoursewareDetail> : null} */}
        {
          showSelectCourseware.value && 
          <SelectCoursewarePop 
            list={data.coursewareList} 
            onClose={() => {
              showSelectCourseware.value = false;
            }}
            onSelect={(item) => handleOpenPlay(item)}
          ></SelectCoursewarePop>
        }
      </div>
    );
  }
});