import { defineComponent, ref } from 'vue';
import JsScript from '@/components/js-script';
import Title from './components/title';
import WebVr from './components/web-vr';
import Other from './components/other';
import Guide from './components/guide';
import Vrcon from './components/vrcon';
import Menu from './components/menu';
import GuiLoading from './components/gui-loading';
import Popup from './components/popup';
import HotSpotList from './components/hot-spot-list';
import BackIcon from '@/assets/images/syjy/icon-back-min.png';
import useBaseStore from '@/store/module/base';
import PointIcon from '@/assets/images/syjy/icon-zhanban-min.png';
import { data } from './constants.syjy';
import './index.syjy.scss';

// @ts-ignore
window.hoticon = {
  default: './images/syjy/icon-hot.png',
  higt: './images/syjy/icon-hot1-min.png',
};

export default defineComponent({
  name: 'home',
  components: {
    Title,
    WebVr,
    Other,
    Vrcon,
    GuiLoading,
    JsScript,
    Popup,
  },
  setup() {
    const baseStore = useBaseStore();
    const manageJsLoaded = ref(false);
    const hotJsLoaded = ref(false);

    const handlePoint = () => {
      // @ts-ignore
      const item = data.find((i) => i.id === Number(window.player.currentPano.id));

      const isMobileDevice = window.browser.isMobile();
      const currentPath = window.location.pathname;

      window.location.href =
        currentPath.replace(
          '/scene/syjy.html',
          `${isMobileDevice ? '/mobile/index.html' : '/pc/index.html'}`
        ) + `#exhibition/?path=${item?.path.join(',')}`;
    };

    return {
      manageJsLoaded,
      hotJsLoaded,
      baseStore,
      handlePoint,
    };
  },
  render() {
    return (
      <div class="home">
        <img
          class="home__back"
          src={BackIcon}
          onClick={() => {
            if (window.history.length > 1) {
              window.history.back();
            } else {
              window.location.href = 'https://houseoss.4dkankan.com/project/syjy/mobile/index.html';
            }
          }}
        />

        <img src={PointIcon} class="home__point" onClick={this.handlePoint} />

        {/* 进度条加载 */}
        <GuiLoading />

        {/* 加载初始页面 */}
        <div id="gui-thumb" />

        {/* 热点弹出框 */}
        <Popup />

        {/* 热点列表 */}
        <HotSpotList />

        {/* 场景canvs主容器 */}
        <div id="player" />

        {/* 底部菜单 */}
        <div id="gui-parent">
          {/* 热点气泡 */}
          <div id="hot" />

          <div id="gui" style="display: none;">
            {/* 标题 */}
            {/* @ts-ignore */}
            <Title isInit={this.manageJsLoaded} />

            {/* 底部菜单 */}
            <Menu />

            {/* 导览 */}
            <Guide />
          </div>

          <WebVr />
          <Vrcon />
          <Other />
        </div>

        {/* TODO: 没有控制权，耦合严重；放在此处为了防止元素未渲染导致报错 */}
        <JsScript
          src="./js/manage.js"
          onLoad={() => {
            this.manageJsLoaded = true;
            this.baseStore.handleJSLoaded('manageJsLoaded');
          }}
        />
        {this.manageJsLoaded && (
          <div>
            <JsScript
              src="./js/Hot.js"
              onLoad={() => {
                this.hotJsLoaded = true;
                this.baseStore.handleJSLoaded('hotJsLoaded');
              }}
            />
            {this.hotJsLoaded && (
              <div>
                <JsScript src="./js/main_2020_show.js" />
                {/* 延迟加载 */}
                <JsScript src="./js/lib/player-0.0.12.min.js" />
                <JsScript src="./js/lib/Tween.js" />
                <JsScript src="./js/SpecialScene.js" />
                <JsScript src="./js/loadCAD.js" />
              </div>
            )}
          </div>
        )}
      </div>
    );
  },
});
