<template>
  <header class="app-head" app-border dir-bottom>
    <span class="app-head-title">{{info.houseTitle}}</span>
    <div class="app-head-save" @click="onSave" :class="{disable:!canLoad||$justview}">
      <i class="iconfont icon_save"></i>
      保存
    </div>
    <!-- <div class="app-head-save" @click="onView" :class="{disable:!canLoad}">
      <i class="iconfont icon_eye"></i>
      预览
    </div> -->
  </header>
</template>
<script>
import { savePanoInfo,getPanoInfo } from "@/api";
import { mapGetters } from "vuex";
// import config from '@/config'
import { getPanoList } from "@/api";

export default {
  name: "app-head",
  data(){
    return {
      firstScene:'',
      canLoad:false
    }
  },

  mounted(){
    this.$bus.on('canLoad',(data)=>{
      this.canLoad = true
      if (data) {
        this.getPanoList()
      }
    }) 

    this.$bus.on('undateAllVrList',islongpolling=>{
      this.getPanoList(islongpolling)
    })

  },
  computed: {
    ...mapGetters({
      allVrlist:'allVrlist',
      info:'info',
      isShow:'isShow'
    })
  },
  methods: {
    getPanoList(islongpolling=null){
       getPanoList({
        pageNum: 1,
        pageSize: 1000,
        status:3,
        islongpolling
      },async data=>{
        this.list = data.data.list
        this.$store.commit("SetAllVrlist", data.data.list);
      })
    },
    checkParams(){
       if (this.allVrlist.length<=0&&this.isShow) {
          this.$alert({
            content:'请至少添加一个小区航拍（场景导航）',
            forceOK:true,
            ok:()=>{
              this.$router.push({path:'/information'})
            }})
          return false
        }
      return true
    },
  
    onSave() {
        if (!this.checkParams()) {
          return
        }
        this.$tips({content:'保存成功',icon:'ok'})
    },
    getInfo() {
      getPanoInfo(
        "",
        (data) => {
          this.$store.commit("SetInfo", data.data);
        }
      );
    }
  }
};
</script>
<style lang="less">
.app-head {
  display: flex;
  width: 100%;
  min-width: 50px;
  align-items: center;
  justify-content: center;
}
.app-head-title {
  display: inline-block;
  font-size: 16px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.app-head-save {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -16px;
  height: 32px;
  border-radius: 32px;
  padding: 0 10px;
  font-size: 12px;
  color: #efefef;
  background-color: @color;
  &:hover {
    color: #fff;
  }
  i {
    font-size: 24px;
    margin-top: 2px;
    margin-right: 1px;
  }
}

.app-head-view{
  right: 100px;

}
</style>
