<template>
  <div class="ifrcon">
    <iframe v-if="selectExh.type === '4dkk'" allowfullscreen="true" ref="iframe" :key="selected.id"
      :src="`https://airshow.4dkankan.com/spc.html?m=${selected.id}`" frameborder="0"></iframe>
    <div v-else id="pano" class="pano"></div>

    <mbui :isShow="isShowM" :class="{ uicon: exhibition }" @close="isShowM = false">
      <div class="img_ul" slot="imgList">
        <ul v-if="currentScenes">
          <li v-for="(item, i) in currentScenes" @click="handleItem(item)" :key="i"
            :class="{ active: selected.id == item.id }">
            <div>
              <img :src="item.icon" alt="" />
              <rollName :offset="20" :active="selected.id == item.id" class="pic-name" :myref="'subw' + item.id"
                :name="item.sceneTitle || item.title" />
            </div>
            <span class="bar"></span>
          </li>
        </ul>
      </div>

      <div class="txt_ul" slot="txtList" v-if="!exhibition && list.length > 0">
        <ul>
          <li v-for="(item, i) in list" @click="selectExh = item" :key="i" :class="{ active: selectExh.id == item.id }">
            <span>{{ item.title }}</span>
          </li>
        </ul>
      </div>

      <div class="btn_zhankai" slot="btn_zhankai">
        <img @click="isShowM = true" :src="require('@/assets/images/menu.png')" alt="">
      </div>
      <vHeader :vtitle="selected.sceneTitle" class="ui_header" slot="header" />
      <vSelect v-if="!exhibition" :type="type" slot="select"></vSelect>
    </mbui>
  </div>
</template>

<script>
import mbui from "./ui";
import vHeader from "./ui/Show.Header.vue";
import vSelect from "./ui/select.vue";


export default {
  props: ['type', 'exhibition'],
  components: {
    mbui,
    vSelect,
    vHeader
  },
  data() {
    return {
      params: "",
      isShowM: true,
      selected: '',
      selectExh: {},
      currentScenes: [],
      list: [],
      isChange: true,
      loadFinish: false,
      isFirst: true
    };
  },
  watch: {
    selectExh: {
      deep: true,
      handler: function (newVal) {
        if (newVal) {
          this.isFirst = true
          if (newVal.type === '4dkk') {
            this.selectExh = this.list[0]
            this.selected = this.selectExh.scenes[0]
            this.currentScenes = this.selectExh.scenes.map(item => {
              return {
                ...item,
                icon: `https://4dkk.4dage.com/images/images${item.id}/floor_0.png?t=1667802021476?v=0&rnd=0.5813201205835572&x-oss-process=image/resize,m_fill,w_80,h_60/quality,q_70`
              }
            })
            this.loadFinish = true
          }
          else {
            window.$.ajax({
              dataType: 'json',
              url: `https://airshow.4dkankan.com/pano/${newVal.id}/someData.json?_=${Math.random()}`, success: (data) => {
                this.selected = data.scenes[0]
                this.currentScenes = data.scenes
                this.loadFinish = false
              }
            })
          }

        }
      }
    },
    selected: {
      deep: true,
      handler: function (newVal) {

        window.vrViewFn = () => {
          try {
            this.loadFilsh = true
            if (this.isFirst) {
              this.isFirst = false
            }
            setTimeout(() => {
              this.loadFinish = true
            }, 4000);
          } catch (error) {
            error;
          }
        };

        var settings = {
          "events[skin_events].onloadcomplete": "js(window.vrViewFn());",
          "skin_settings.littleplanetintro": this.isFirst,
          "view.vlookat": newVal.initVisual ? newVal.initVisual.vlookat : 0,
          "view.hlookat": newVal.initVisual ? newVal.initVisual.hlookat : 0,
        };


        window.$("#pano").empty();
        window.removepano("#pano");

        if (this.selectExh.type != '4dkk') {
          window.embedpano({
            // https://4dkk.4dage.com/720yun_fd_manage/fd720_FC5BmPHcV/vtour/tour.xml
            // xml: "%HTMLPATH%/static/template/tour.xml",
            xml: `https://airshow.4dkankan.com/pano/${this.selectExh.id}/${newVal.sceneCode}/vtour/tour.xml`,
            // xml: `https://4dkk.4dage.com/720yun_fd_manage/${newVal.sceneCode}/vtour/tour.xml`,
            swf: `${this.g_CDN}resource/tour.swf`,
            target: "pano",
            html5: "auto",
            mobilescale: 1,
            vars: settings,
            passQueryParameters: true,
          });
        }

      }
    }
  },
  methods: {
    handleItem(item) {
      if (this.loadFinish) {
        this.selected = item
      }
    },
    getList() {
      // window.$.ajax({url:`code/pano/data.json`,success:(data)=>{
      window.$.ajax({
        url: `${this.g_CDN}pano/data.json`, success: (data) => {
          this.list = data.list
          if (this.exhibition) {
            this.selectExh = this.list.find(item => item.id == this.exhibition)
          } else {
            this.selectExh = this.list[0]
          }
        }
      })
    }
  },
  mounted() {
    this.getList()
  }
};
</script>

<style lang="less" scoped>
.ifrcon {
  width: 100%;
  height: 100%;
  background: #fcfcfc;

  >iframe {
    width: 100%;
    height: 100%;
  }

  .pano {
    width: 100%;
    height: 100%;
  }

  .uicon {
    & /deep/ .btm-menu {
      height: 160px;
    }
  }

  .img_ul {
    width: 100%;
    position: relative;

    &::before,
    &::after {
      background: linear-gradient(to right,
          rgba(0, 0, 0, 0.4),
          rgba(0, 0, 0, 0));
      position: absolute;
      content: "";
      width: 80px;
      height: 67px;
      top: 0;
      z-index: 10;
      pointer-events: none;
    }

    &::before {
      left: 0;
    }

    &::after {
      right: 0;
      background: linear-gradient(to left,
          rgba(0, 0, 0, 0.4),
          rgba(0, 0, 0, 0));
    }

    >ul {
      overflow-x: auto;
      display: flex;
      justify-content: center;

      &::-webkit-scrollbar {
        display: none;
      }

      >li {
        cursor: pointer;
        list-style: none;
        display: inline-block;
        margin: 0 5px;
        position: relative;
        padding-bottom: 7px;

        >div {
          width: 68px;
          height: 68px;
          overflow: hidden;
          position: relative;
          border-radius: 8px;
          cursor: pointer;

          >img {
            position: absolute;
            top: 50%;
            left: 50%;
            height: 100%;
            transform: translate(-50%, -50%);
          }

          .iconfont {
            position: absolute;
            left: 4px;
            top: 4px;
            z-index: 99;
          }

          >span {
            text-align: center;
            display: inline-block;
            background: rgba(0, 0, 0, 0.3);
            position: absolute;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            left: 0;
            bottom: 0;
            width: 100%;
          }
        }

        .bar {
          display: none;
        }

        .pic-name {
          background: rgba(0, 0, 0, 0.6);
          position: absolute;
          left: 0;
          bottom: 0;
          text-align: center;

          /deep/ span {
            word-break: keep-all;
            white-space: nowrap;
            font-size: 12px;
          }
        }

        &.active {
          .bar {
            display: inline-block;
            position: absolute;
            bottom: 0px;
            width: 80%;
            left: 50%;
            transform: translateX(-50%);
            height: 2px;
            background: @color;
          }
        }
      }
    }
  }

  .txt_ul {
    width: 90%;
    margin: 18px auto;
    border: 2px solid @color;
    border-radius: 30px;
    padding: 8px 15px 10px;

    >ul {
      overflow-x: auto;
      display: flex;

      &::-webkit-scrollbar {
        display: none;
      }

      >li {
        border: 1px solid rgba(256, 256, 256, 0.4);
        border-radius: 24px;
        padding: 6px 9px;
        margin: 0 5px;

        >span {
          font-size: 16px;
          display: inline-block;
          vertical-align: middle;
          line-height: 1.2;
          word-break: keep-all;
          color: rgba(256, 256, 256, 0.4);
        }

        &.active {
          padding: 6px 12px;
          border: 1px solid @color;

          >span {
            color: #fff;
          }
        }
      }
    }
  }

  .btn_zhankai {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);

    >img {
      width: 40px;
      height: 40px;
    }
  }
}
</style>
