<template>
  <div class="ifrcon">
    <iframe allowfullscreen="true" ref="iframe" :key="selected.id"
      :src="`https://airshow.4dkankan.com/spc.html?m=${selected.id}`" frameborder="0" @click="handleifrclk"
      @load="onIframLoad"></iframe>
    <mbui :type="type" :isShow="isShow" @close="isShow = false">
      <div class="img_ul" slot="imgList">
        <ul v-if="selectExh.scenes">
          <li v-for="(item, i) in selectExh.scenes" @click="selected = item" :key="i"
            :class="{ active: selected.id == item.id }">
            <div>
              <img
                :src="`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`"
                v-errorimg="`${fdkk_CDN}/hangzhan/images/images${item.id}/result.png`" alt="" />
              <!-- <img :src="`https://airshow.4dkankan.com/images/images${item.id}/smallPic.jpg`" v-errorimg="`${fdkk_CDN}/hangzhan/images/images${item.id}/result.png`" alt="" /> -->
              <rollName :offset="20" :active="selected.id == item.id" class="pic-name" :myref="'subw' + item.id"
                :name="item.title" />
            </div>
            <span class="bar"></span>
          </li>
        </ul>
      </div>

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

      <div v-if="!isShow" @click="isShow = true" class="btn_zhankai" slot="btn_zhankai">
        <i class="iconfont icon-more"></i>
      </div>
      <vAside class="ui_header" slot="aside" />
      <vSelect slot="select" :type="type"></vSelect>
    </mbui>
  </div>
</template>

<script>
import mbui from "./ui";
import vAside from "./ui/aside.vue";
import vSelect from "./ui/select.vue";


export default {
  props: ['type', 'exhibition'],
  components: {
    mbui,
    vSelect,
    vAside
  },
  data() {
    return {
      params: "",
      isShow: true,
      selected: '',
      selectExh: {},
      list: []
    };
  },
  watch: {
    selected: {
      deep: true,
      handler: function (newVal) {
        console.log(newVal);
      }
    }
  },
  methods: {
    handleifrclk() {
      console.log(1111);
    },
    getList() {
      window.$.ajax({
        url: `${this.g_CDN}fdkk/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]
          }
          this.selected = this.selectExh.scenes[0]
        }
      })
    },
    onIframLoad() {
      window.onmessage = () => {

      };
    },
  },
  mounted() {
    this.getList()
    this.$bus.$on('showM', () => {
      this.isShowM = true
    })
  }
};
</script>

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

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

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

    >ul {
      overflow-x: auto;
      display: inline-block;
      background: linear-gradient(to right, rgba(32, 32, 32, 0), rgba(32, 32, 32, 1), rgba(32, 32, 32, 0));
      min-width: 50%;

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

        >div {
          width: 68px;
          height: 68px;
          overflow: hidden;
          position: relative;
          border-radius: 4px;
          cursor: pointer;
          color: rgba(256, 256, 256, 0.4);

          >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;
          }

          >div {
            color: rgba(256, 256, 256, 1);
          }
        }
      }
    }
  }

  .txt_ul {
    margin: 18px auto;
    border: 2px solid @color;
    border-radius: 30px;
    padding: 6px 15px;
    display: inline-block;

    >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;
        cursor: pointer;

        >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: 8px;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, .3);
    border-radius: 50%;
    padding: 6px;
    cursor: pointer;

    >i {
      font-size: 28px;
      cursor: pointer;
    }
  }
}
</style>
