<template>
  <div class="pinTop" style="display: none">
    <div id="model-title">
      <div class="title-row">
        <div id="title-toggle">
          <a>
            <i class="icon icon-dpad-left"></i>
          </a>
        </div>
        <div id="title-container-wrapper" data-placement="bottom" data-html="true">
          <div class="title-container meta-toggle">
            <div class="co-brand">
              {'{[{ PRESENTED_BY }]}'}
              <span class="title" id="cobrandTitle"></span>
            </div>
            <div id="title-logo">
              <i></i>
            </div>
            <a id="more-hint">
              <i class="icon icon-dpad-down"></i>
            </a>
            <a id="less-hint">
              <i class="icon icon-dpad-up"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div id="meta-info-wrapper">
      <div id="meta-info" class="darkGlass">
        <div id="meta-description"></div>
        <div class="contact-info">
          <i class="icon icon-user pull-left"></i>
          &#xA0;
          <div id="contact-data"></div>
        </div>
        <div class="address">
          <i class="icon icon-pin"></i>
          <span id="addressTxt"></span>
        </div>
        <div id="tag-toggles" class="menu-toggles hidden">
          <span>{'{[{ MATTERTAG_CONTENT }]}'}</span>
          <div id="tag-inputs" class="menu-radios">
            <div id="show-tag" class="menu-radio-show">
              <input id="radio-tag-show" type="radio" name="tags" value="show" />
              <label for="radio-tag-show">{'{[{ SHOW }]}'}</label>
            </div>
            <div id="hide-tag" class="menu-radio-hide">
              <input id="radio-tag-hide" type="radio" name="tags" value="hide" />
              <label for="radio-tag-hide">{'{[{ HIDE }]}'}</label>
            </div>
          </div>
        </div>
        <div id="labels-toggles" class="menu-toggles hidden">
          <span>Labels</span>
          <div id="labels-inputs" class="menu-radios">
            <div id="show-label" class="menu-radio-show">
              <input id="radio-labels-show" type="radio" name="labels" value="show" />
              <label for="radio-labels-show">Show</label>
            </div>
            <div id="hide-label" class="menu-radio-hide">
              <input id="radio-labels-hide" type="radio" name="labels" value="hide" />
              <label for="radio-labels-hide">Hide</label>
            </div>
          </div>
        </div>
        <div id="share-origin" class="hidden">
          <div>
            <i class="icon icon-ext-link"></i>
            <div id="share-link-wrapper"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <el-dropdown trigger="click" popper-class="scene-title-popper">
    <div class="scene-title">
      <p id="gui-name" class="limit-line titleText" />
    </div>

    <template #dropdown>
      <el-scrollbar max-height="400px">
        <el-dropdown-menu>
          <!-- pc hover展示 -->
          <template v-if="!isMobile">
            <el-tooltip
              v-for="item in LIST"
              :key="item.label"
              append-to="body"
              effect="dark"
              :placement="isMobile ? 'bottom' : 'right'"
              popper-class="scene-list-subitem-popup"
              :show-arrow="false"
              :trigger="isMobile ? 'click' : 'hover'"
              :disabled="!item.children.length"
            >
              <li
                class="scene-list-item el-tooltip__trigger el-tooltip__trigger el-dropdown-menu__item"
              >
                {{ item.label }}
              </li>

              <template #content>
                <el-scrollbar max-height="400px">
                  <el-dropdown-menu class="scene-sublist">
                    <el-dropdown-item
                      v-for="subitem in item.children"
                      :key="subitem.sceneCode"
                      class="scene-sublist-item"
                      @click="changeScene(subitem)"
                    >
                      {{ subitem.label }}
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-scrollbar>
              </template>
            </el-tooltip>
          </template>

          <!-- 移动端 手风琴展示 -->
          <template v-else>
            <el-collapse accordion class="scene-title-collapse">
              <el-collapse-item v-for="item in LIST" :key="item.label" :name="item.label">
                <template #title>
                  <div class="scene-title-collapse-item">
                    {{ item.label }}
                  </div>
                </template>

                <el-dropdown-menu class="scene-sublist">
                  <el-dropdown-item
                    v-for="subitem in item.children"
                    :key="subitem.sceneCode"
                    class="scene-sublist-item"
                    @click="changeScene(subitem)"
                  >
                    {{ subitem.label }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-collapse-item>
            </el-collapse>
          </template>
        </el-dropdown-menu>
      </el-scrollbar>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue';

  const props = defineProps<{
    isInit: boolean;
  }>();

  const LIST = [
    {
      label: '外景展示',
      children: [
        {
          label: '光大汇晨-3号楼外景',
          sceneCode: 'KJ-In9jsvCe86s',
        },
        {
          label: '光大汇晨-4号、5号楼外景',
          sceneCode: 'KJ-ZMFs8MxP2SB',
        },
        {
          label: '光大汇晨-后花园',
          sceneCode: 'KJ-WklncxbyqUz',
          params:
            '&firstView=pano:244,qua:0.039007937897505625,0.9142990295337833,0.09079670316256798,-0.3927997197919962',
        },
      ],
    },
    {
      label: '房型展示',
      children: [
        {
          label: '4-1号楼6层 双人居室',
          sceneCode: 'KJ-f3lOsooRQEL',
          params:
            '&firstView=pano:32,qua:-0.051998504111525345,-0.014998504545882635,-0.0007810446053117947,0.9985342235607464',
        },
        {
          label: '4-2号楼4层 双人自理间',
          sceneCode: 'KJ-SfNcYJffCof',
          href: 'https://houseoss.4dkankan.com/project/GDHCYL/scene/index.html?pose=pano:16,qua:-0.0382,-0.0274,-0.001,0.9989',
        },
      ],
    },
    {
      label: '功能性房间展示',
      children: [
        {
          label: '光大4号楼-前台大厅',
          sceneCode: 'KJ-WklncxbyqUz',
        },
        {
          label: '光大5号楼-前台大厅',
          sceneCode: 'KJ-YNQbf4hmdhp',
        },
        {
          label: '4-1号楼1层 桌球台',
          sceneCode: 'KJ-8yXDk9BK7NQ',
          params:
            '&firstView=pano:36,qua:-0.13839545703172249,-0.008993664428416585,-0.0012568289632250125,0.9903354179400402',
        },
        {
          label: '4-1号楼1层 健身区域',
          sceneCode: 'KJ-8yXDk9BK7NQ',
          params:
            '&firstView=pano:42,qua:-0.20459884853874494,0.334008449059796,0.07451714944112271,0.9170740759282797',
        },
        {
          label: '4-1号楼1层 乒乓球台',
          sceneCode: 'KJ-8yXDk9BK7NQ',
          params:
            '&firstView=pano:24,qua:0.0046569716799469505,0.9813820813814765,0.19050458281639018,-0.023990332947140786',
        },
        {
          label: '4-1号楼1层 射箭区',
          sceneCode: 'KJ-8yXDk9BK7NQ',
          params:
            '&firstView=pano:20,qua:-0.10227912194755563,0.8139137901708958,0.15090610701275087,0.5516435960690454',
        },
        {
          label: '4-1号楼 娱乐休息区',
          sceneCode: 'KJ-8yXDk9BK7NQ',
          params:
            '&firstView=pano:172,qua:-0.026285491500693498,-0.5010156996060221,-0.01522646481097273,0.8649049092888258',
        },
        {
          label: '4-2号楼 VIP洽谈室',
          sceneCode: 'KJ-WklncxbyqUz',
          params:
            '&firstView=pano:20,qua:-0.030210656596747626,0.7273994644789756,0.0320900949269009,0.6847974608518024',
        },
        {
          label: '4-2号楼 休息区',
          sceneCode: 'KJ-WklncxbyqUz',
          params:
            '&firstView=pano:56,qua:-0.0008089044739337793,-0.5144104029525004,-0.0004852334801243485,0.8575436151578546',
        },
        {
          label: '4-2号楼 护士站',
          sceneCode: 'KJ-WklncxbyqUz',
          params:
            '&firstView=pano:44,qua:-0.07980318002624788,-0.00979912811085812,-0.0007845418098985508,0.9967621598909656',
        },
        {
          label: '4-2号楼 医疗部',
          sceneCode: 'KJ-WklncxbyqUz',
          params:
            '&firstView=pano:66,qua:-0.04209952871323408,-0.0035019789053245386,-0.00014756338577590622,0.9991072752855208',
        },
        {
          label: '4-2号楼 房务部、超市',
          sceneCode: 'KJ-WklncxbyqUz',
          params:
            '&firstView=pano:74,qua:-0.000042130492863588265,0.9999250741545762,0.01169955473490148,0.0036007640279056207',
        },
        {
          label: '4-2号楼 餐厅',
          sceneCode: 'KJ-WklncxbyqUz',
          params:
            '&firstView=pano:76,qua:0.0003101107253231401,0.9971451465048626,0.07539654778114177,-0.00410132025091101',
        },
        {
          label: '4-2号楼 多功能厅',
          sceneCode: 'KJ-WklncxbyqUz',
          params:
            '&firstView=pano:226,qua:-0.0010279439479733514,0.9982114010524721,0.05699884137526075,0.018002213102936385',
        },
      ],
    },
    {
      label: '楼层展示',
      children: [
        {
          label: '光大4-1号楼-1F',
          sceneCode: 'KJ-8yXDk9BK7NQ',
          params:
            '&firstView=pano:0,qua:-0.051828815102206244,-0.7091317714942,-0.05241417246055152,0.7012122683525472',
        },
        {
          label: '光大4-1号楼-3F',
          sceneCode: 'KJ-InMhgveLjSN',
          params:
            '&firstView=pano:2,qua:-0.001494510580635004,-0.6510945728407702,-0.0012820492666803882,0.7589940539227341',
        },
        {
          label: '光大4-1号楼-4F',
          sceneCode: 'KJ-Z3umjaDYj54',
          params:
            '&firstView=pano:0,qua:-0.012301715416710919,-0.6115701308322424,-0.009510753152011622,0.7910374155693033',
        },
        {
          label: '光大4-1号楼-5F',
          sceneCode: 'KJ-KWa3ofq5VtT',
          params:
            '&firstView=pano:0,qua:-0.03412505300824889,-0.6568498626985018,-0.02978109785591667,0.7526598396081043',
        },
        {
          label: '光大4-1号楼-6F',
          sceneCode: 'KJ-f3lOsooRQEL',
          params:
            '&firstView=pano:0,qua:-0.015325249200611228,-0.608161903992223,-0.01174456833630179,0.7935781673982758',
        },
        {
          label: '光大4-2号楼-2F',
          sceneCode: 'KJ-mK2fUzsBliv',
          params:
            '&firstView=pano:0,qua:-0.01749725260433772,-0.645792691843274,-0.014806159434117765,0.7631686765026857',
        },
        {
          label: '光大4-2号楼-3F',
          sceneCode: 'KJ-HuSSF9cJYpY',
          params:
            '&firstView=pano:0,qua:-0.045996339936217254,-0.6457122165537932,-0.039018126783055745,0.7611948828365402',
        },
        {
          label: '光大4-2号楼-4F',
          sceneCode: 'KJ-SfNcYJffCof',
          href: 'https://houseoss.4dkankan.com/project/GDHCYL/scene/index.html',
          params:
            '&firstView=pano:136,qua:-0.04730401416249904,-0.6225940589150876,-0.03774820655556335,0.7802012747957571',
        },
        {
          label: '光大4-2号楼-5F',
          sceneCode: 'KJ-nOTU5Eg4Y0Y',
          params:
            '&firstView=pano:0,qua:-0.07287642059864806,-0.562579624926581,-0.049876072914877195,0.8220131275736767',
        },
        {
          label: '光大4-2号楼-6F',
          sceneCode: 'KJ-483Cb7j9OD0',
          params:
            '&firstView=pano:0,qua:-0.06459332775841535,-0.7106008781108282,-0.0658040120504373,0.6975270230111492',
        },
      ],
    },
  ];
  const isMobile = ref(false);

  watch(
    () => props.isInit,
    (v) => {
      if (v) {
        isMobile.value = window.browser.isMobile();
      }
    }
  );

  const changeScene = (item: Record<string, any>) => {
    location.href = item.href
      ? item.href
      : `${location.origin}${location.pathname}?m=${item.sceneCode}${
          item.params ? item.params : ''
        }`;
  };
</script>

<style lang="scss" scoped>
  @import './index.zgrs.scss';
</style>

<style lang="scss">
  .el-dropdown__popper.el-popper.scene-title-popper {
    --el-bg-color-overlay: rgba(0, 0, 0, 0.4);
    --el-border-color-light: transparent;

    .scene-list-item {
      position: relative;
      padding-right: 35px;
      height: 44px;
      color: white;

      &:not(.is-disabled):hover,
      &:not(.is-disabled):focus {
        --el-dropdown-menuItem-hover-color: white;
        --el-dropdown-menuItem-hover-fill: rgba(203, 25, 29, 0.5);
        font-weight: bold;

        &::after {
          content: '';
          position: absolute;
          top: 50%;
          right: 0;
          width: 35px;
          height: 35px;
          background: url('@/assets/images/zgrs/title-right.png') no-repeat center / contain;
          transform: translateY(-50%);
        }
      }
    }
  }

  .scene-list-subitem-popup {
    padding: 0;
  }

  .scene-sublist-item {
    height: 36px;
  }

  .scene-title-collapse {
    --el-border-color-lighter: rgba(0, 0, 0, 0.2);
    --el-collapse-header-height: 40px;
    --el-collapse-header-bg-color: transparent;
    --el-collapse-header-text-color: white;
    --el-collapse-content-bg-color: transparent;
    --el-collapse-content-font-size: 12px;
    --el-collapse-content-text-color: white;

    .el-collapse-item {
      width: 205px;

      &__header {
        > .el-icon {
          display: none;
        }
        &.is-active {
          .scene-title-collapse-item {
            background: rgba(203, 25, 29, 0.5);

            &::after {
              content: '';
              position: absolute;
              top: 50%;
              right: 0;
              width: 35px;
              height: 35px;
              background: url('@/assets/images/zgrs/title-right.png') no-repeat center / contain;
              transform: translateY(-50%) rotate(-90deg);
            }
          }
        }
      }
    }
    &-item {
      position: relative;
      width: 100%;
      color: inherit;
      font-size: inherit;
      font-weight: bold;
      text-align: center;
    }
    .scene-sublist-item {
      justify-content: center;
    }
    .el-collapse-item__content {
      padding-bottom: 0;
    }
  }
</style>
