import { defineComponent } from 'vue';
import './index.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/play.png" width="24" height="24" data-original-title="播放" />
            </a>
          </div>
          <div id="play" class="ui-icon" data-original-title="播放">
            <a>
              <img src="images/play.png" width="24" height="24" />
            </a>
          </div>
          <div id="pause" class="ui-icon" style="display: none;">
            <a>
              <img title="暂停" src="images/pause.png" width="24" height="24" />
            </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="">
            <img
              class="icon icon-inside"
              src="images/auto.png"
              title="导览"
              data-default-url="images/auto.png"
              data-active-url="images/auto-suspend.png"
            />
          </div>
          <div data-original-title="热点列表" id="hotList" title="" style="display: none">
            <img class="icon icon-inside" src="images/hotlist.png" title="热点列表" />
          </div>
          <div data-original-title="全景漫游" id="gui-modes-inside" title="" class="">
            <img class="icon icon-inside" src="images/inside.png" title="全景漫游" />
          </div>
          <div data-original-title="迷你模型" id="gui-modes-dollhouse" title="" class="">
            <img class="icon icon-inside" src="images/dollhouse.png" title="迷你模型" />
          </div>
          <div data-original-title="俯视图" id="gui-modes-floorplan" title="">
            <img class="icon icon-inside" src="images/floor.png" title="俯视图" />
          </div>
          <div data-original-title="VR" id="vr" title="" style="display: none;">
            <img class="icon icon-inside" src="images/VR.png" title="VR" />
          </div>
          <div
            data-original-title="消除外壳"
            id="gui-remove-face"
            title=""
            style="display: none; float: left;"
          >
            <img class="icon icon-inside" src="images/face.jpg" />
          </div>
        </div>
        <div class="pinBottom right">
          <div id="volume" class="ui-icon wide" style="display: none">
            <a>
              <img
                src="images/Volume btn_on.png"
                width="24"
                height="24"
                data-default-url="images/Volume btn_on.png"
                data-active-url="images/Volume btn_off.png"
              />
            </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="sharing" class="ui-icon wide hidden">
            <a>
              <i title="{[{ SOCIAL_SHARING }]}" class="icon icon-share"></i>
            </a>
          </div>
          <div
            id="gui-fullscreen"
            class="ui-icon wide"
            data-placement="top"
            title="{[{ VIEW_FULLSCREEN }]}"
          >
            <a>
              <img class="icon icon-fullscreen" src="images/enlarge_on.png" />
            </a>
          </div>
          <div
            id="gui-fullscreen-exit"
            class="ui-icon wide"
            data-placement="top"
            title="{[{ EXIT_FULLSCREEN }]}"
            style="display: none;"
          >
            <a>
              <img class="icon icon-fullscreen-exit" src="images/narrow_off.png" />
            </a>
          </div>
        </div>
      </div>
    );
  },
});
