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 BackIcon from '@/assets/images/zgrs/back.png';
import './index.zgrs.scss';

// @ts-ignore
window.hoticon = {
  default: '/images/zgrs/point.png',
  higt: '/images/zgrs/point2.png',
};

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

    return {
      manageJsLoaded,
      hotJsLoaded,
    };
  },
  render() {
    return (
      <div class="home">
        <img
          class="home__back"
          src={BackIcon}
          onClick={() => {
            window.location.href = 'https://houseoss.4dkankan.com/project/GDHCYL/home/index.html';
          }}
        />

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

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

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

        {/* 场景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.manageJsLoaded && (
          <div>
            <JsScript src="./js/Hot.js" onLoad={() => (this.hotJsLoaded = true)} />
            {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>
    );
  },
});
