<template>
  <div class="app-view-toolbar" :class="{unable:!canEdit}" app-border dir-top>
    <div class="room-label" >
      <ul>
        <li class="active">小区航拍</li>
      </ul>
    </div>
    <div class="clip-center">
      <div class="pano-con clip-scroller">
        <ul ref="clip">
          <li v-for="(item, i) in list" @click="activeItem = item" :class="{'li-active':item.sceneCode==activeItem.sceneCode}" :key="i">
            <div class="typeli">
              <i class="iconfont iconscene_map_3d" :class="{'iconjump':item.type!=='house'}"></i>
            </div>
            <div class="img">
              <img :src="item.icon+`?${Math.random()}`" alt="">
            </div>
            <div class="ui-title">
              <span>{{item.sceneTitle}}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { getPanoList } from "@/api";
import { mapGetters } from "vuex";
import { ListDetector } from "@/utils/starter";

let frame;
let $scroll = null;
export default {
  data() {
    return {
      type: "building",
      list:[],
      activeItem:'',
      canEdit:true,
      justview:true,
      hasCheck:false
    };
  },
  computed: {
    ...mapGetters({
      vrlist:'vrlist'
    })
  },
  methods:{
    getPanoList(){
      getPanoList({
        pageNum: 1,
        pageSize: 1000,
        status:3
      },async data=>{
        this.$store.commit("SetAllVrlist", data.data.list);
        localStorage.initImg=''
        this.$bus.emit('initView','')
        this.activeItem = ''
        this.list = []
        await ListDetector.listener();
        if (this.$route.meta.loadScene&&data.data.list.length<=0) {
            return this.$alert({
              content:'请先在场景导航添加素材',
              forceOK:true,
              ok:()=>{
                this.$router.push({path:'/information'})
              }})
          }
         getPanoList({
            pageNum: 1,
            pageSize: 1000,
            status:3
          },async data=>{
            this.list = data.data.list
            localStorage.initImg=''
            ListDetector.valid();
            this.$store.commit("SetVrList", this.list);
            this.activeItem = this.list[0]
            localStorage.initImg = this.activeItem && this.activeItem.icon
          })
      })
     
    },
  },
  watch:{
    '$route.meta.loadScene':{
      handler: async function (newVal) {
          if (newVal) {
              this.getPanoList()
          
          }
      }
    },
    list:{
      immediate:true,
      handler:function () {
        this.$nextTick(()=>{
          if (!frame) {
            return
          }
          frame.update();
        })
      }
    },
    activeItem:{
      immediate:true,
      handler:function (newVal) {
        this.$bus.emit('currentPcode',newVal)
        this.$store.commit("SetActiveItem", newVal||'');
        if (newVal) {
          this.$bus.emit('initView',newVal.icon)
        }
      
      }
    },
    type(){
      this.hasCheck = true
      this.getPanoList()
    }
  },
  mounted(){
     this.$nextTick(() => {
        this.$bus.on('justview',data=>{
              this.justview = data
        }) 
        if ($scroll == null) {
            $scroll = $(".clip-scroller")[0];
            frame =new PerfectScrollbar($scroll, {
                useBothWheelAxes: true,
                suppressScrollY: true,
                wheelSpeed: 0.8
            });
            $($scroll).data("scrollbar", frame);
        }
    });
    this.$bus.on('refresh',()=>{
      this.getPanoList()
    })
    this.$bus.on('setListThumb',(data)=>{
      this.activeItem.icon = data.icon+`?${Math.random()}`
      this.activeItem.initVisual = JSON.stringify(data.initVisual)
    })
    
    this.$bus.on('canEdit',data=>{
      this.canEdit = data
    })
  }
};
</script>
<style lang="less" scoped>
.app-view-toolbar {
  overflow: visible;
  a {
    color: #fff;
    text-decoration: none;
  }
 
  .room-label {
    top: -32px;
    left: 10px;
    right: 0px;
    position: absolute;
    overflow: hidden;
    ul {
      display: flex;
    }
    li {
      width: 100px;
      height: 32px;
      line-height: 32px;
      padding: 0 5px;
      text-align: center;
      border-top: solid 1px #5d5d5d;
      border-right: solid 1px #5d5d5d;
      overflow: hidden;
      text-overflow: ellipsis;
      &:first-child {
        border-left: solid 1px #5d5d5d;
      }
      &.active {
        background-color: @color;
      }
    }
  }



  .clip-center {
    flex: 1;
    display: flex;
    overflow: hidden;
    .pano-con {
      width: 100%;
      padding: 0;
      background: none;
      margin: 0 10px;
      >ul{
        flex-wrap: unset;
        display: inline-block;
        white-space:nowrap;
        >li{
          display: inline-block;
          height: 128px;
          width: 128px;
          cursor: pointer;
          &:first-of-type{
            margin-left: 0;
          }
        }
      }
    }
    .clip-scroller {
        width: 100%;
        height: 100%;
        position: relative;
        padding-right: 20px;
    }
  }
}
  .unable{
    &::before{
      content: '';
      z-index: 22;
      position: absolute;
      width: 100%;
      top: -32px;
      height: calc(100% + 32px );
      background: rgba(0, 0, 0, 0.4);
    }
  }
</style>