import { defineComponent } from 'vue';
import './index.sea.scss';

export default defineComponent({
  name: 'HomeMenu',
  render() {
    return (
      <div class="pinBottom-container">
        <div class="pinBottom left">
          <div id="previous" class="previous desktop-only ui-icon" style="display: none;">
            <a>
              <img src="images/sea/play.png" width="24" height="24" data-original-title="播放" />
            </a>
          </div>
          <div id="play" class="ui-icon" data-original-title="自动漫游">
            <a>
              <img src="images/sea/play.png" width="24" height="24" />
              <p>自动漫游</p>
            </a>
          </div>
          <div id="pause" class="ui-icon" style="display: none;">
            <a>
              <img title="暂停" src="images/sea/pause.png" width="24" height="24" />
              <p>自动漫游</p>
            </a>
          </div>
          <div id="next" class="next desktop-only ui-icon wide" style="display: none;">
            <a>
              <i title="" class="icon icon-dpad-right" data-original-title="下一个"></i>
            </a>
          </div>
          <div data-original-title="导览" id="pullTab" title="">
            <i class="icon icon-inside" title="场景导览" />
            <p>场景导览</p>
          </div>
          <div data-original-title="热点列表" id="hotList" title="" style="display: none">
            <img class="icon icon-inside" src="images/sea/hotlist.png" title="热点列表" />
            <p>热点列表</p>
          </div>
          <div data-original-title="全景漫游" id="gui-modes-inside" title="" class="hidden">
            <img class="icon icon-inside" src="images/sea/inside.png" title="全景漫游" />
            <p>全景漫游</p>
          </div>
          <div data-original-title="迷你模型" id="gui-modes-dollhouse" title="" class="">
            <img class="icon icon-inside" src="images/sea/dollhouse.png" title="迷你模型" />
            <p>迷你模型</p>
          </div>
          <div data-original-title="顶部视图" id="gui-modes-floorplan" title="">
            <img class="icon icon-inside" src="images/sea/floor.png" title="顶部视图" />
            <p>顶部视图</p>
          </div>
          <div
            data-original-title="消除外壳"
            id="gui-remove-face"
            title=""
            style="display: none; float: left;"
          >
            <img class="icon icon-inside" src="images/sea/face.jpg" />
          </div>
        </div>
        <div class="pinBottom right hideTarget">
          <div id="volume" class="ui-icon wide" style="display: none">
            <a>
              <i class="icon icon-inside" />
              <p>音乐</p>
            </a>
          </div>
          <div id="vr" class="ui-icon wide hidden">
            <a>
              <i title="{[{ VIEW_IN_VR }]}" class="icon icon-webvr"></i>
            </a>
          </div>
          <div
            id="gui-fullscreen"
            class="ui-icon wide"
            data-placement="top"
            title="{[{ VIEW_FULLSCREEN }]}"
          >
            <a>
              <i class="icon icon-fullscreen"></i>
              <p>全屏</p>
            </a>
          </div>
          <div
            id="gui-fullscreen-exit"
            class="ui-icon wide"
            data-placement="top"
            title="{[{ EXIT_FULLSCREEN }]}"
            style="display: none;"
          >
            <a>
              <i class="icon icon-fullscreen-exit"></i>
              <p>全屏</p>
            </a>
          </div>
        </div>
      </div>
    );
  },
});
