<template>
  <header class="app-head" app-border dir-bottom>
    <span class="app-head-title">{{ info.name }}</span>
    <div class="app-head-save ui-button deepcancel app-head-view" @click="onView" :class="{ disable: !canLoad }">
      <i class="iconfont iconeditor_preview"></i>
      预览
    </div>

    <div class="ui-button submit app-head-save" @click="onSave" :class="{ disable: !canLoad }">
      <i class="iconfont iconeditor_save"></i>
      保存
    </div>
    <preview v-if="info" :name="info.name" :show="showPreview" :ifr="`./show.html?id=${info.id}`" @close="showPreview = false" />
  </header>
</template>
<script>
import { saveWorks, getPanoInfo, checkLogin } from "@/api";
import { mapGetters } from "vuex";
import { $waiting } from '@/components/shared/loading'

// import config from '@/config'
import preview from "@/components/preview";
let hhhreg = /\\\\\\\\/g;

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

  components: { preview },

  mounted() {
    this.$bus.on("canLoad", (data) => {
      this.canLoad = data;
      if (data) {
        this.getInfo();
      }
    });
  },
  computed: {
    ...mapGetters({
      info: "info",
      isShow: "isShow",
      uploadTaskList: "uploadTaskList",
    }),
  },
  methods: {
    checkParams() {
      if (!this.info.name && !this.info.icon && !this.info.description && this.info.scenes.length <= 0) {
        this.$alert({
          content: "您还未创建任何内容哦",
          ok: () => {
            this.$router.push({ path: "/base" });
          },
        });
        return false;
      }
      return true;
    },
    onView() {
      $waiting.show()
      if (!this.checkParams()) {
        return;
      }
      this.fixData();
     
      this.uploadAll(() => {
        saveWorks(
          {
            password: this.info.password,
            someData: { ...this.info, status: 1 },
          },
          () => {
            $waiting.hide()
            this.$msg.success("保存成功");
            document.title = this.info.name;
            this.getInfo();
            this.$store.commit("UpdateIsShowState", true);
            setTimeout(() => {
              if (this.info.scenes.length <= 0 && this.isShow) {
                return this.$alert({
                  content: "至少添加一个场景才可预览，请前往“场景导航”添加",
                });
              }
              this.showPreview = true;
            }, 500);
          }
        );
      });
    },

    fixData() {
      if (this.info.firstScene) {
        this.info.firstScene = this.info.scenes.find((item) => item.sceneCode == this.info.firstScene.sceneCode);
      }

      // this.info.scenesOrder = ''


      let temp = []

      //一级目录
      this.info.catalogRoot.forEach((item) => {
        if (item.children) {
          item.children.forEach(i2=>{
            // 二级目录
            let erji = this.info.catalogs.find(i3 => i2 == i3.id)
            let arr = this.info.scenes.filter((i4) => {
              return erji.id == i4.category;
            });
            temp = temp.concat(arr.sort((a,b)=>a.weight-b.weight))
          })
        }
      });

      
      this.info.scenesOrder = temp.map(item=>item.sceneCode)

      this.$store.commit("SetInfo", this.info);
    },

    // 上传所有的任务
    uploadAll(cb = () => {}) {
      let parr = Object.keys(this.uploadTaskList).map((item) => {
        return this.uploadTaskList[item];
      });

      let promises = Promise.all(parr.filter(Boolean));

      promises
        .then((data) => {
          return Promise.all(
            data.map((item) => {
              return item();
            })
          );
        })
        .then(() => {
          cb();
        });
    },

    onSave() {
      $waiting.show()
      if (!this.checkParams()) {
        return;
      }
      this.fixData();

      

      this.uploadAll(() => {
        saveWorks(
          {
            password: this.info.password,
            someData: { ...this.info, status: 1 },
          },
          () => {
            $waiting.hide()
            this.$msg.success("保存成功");
            document.title = this.info.name;
            this.getInfo();
            this.$store.commit("UpdateIsShowState", true);
          },
          () => {}
        );
      });
    },
    getInfo() {
      checkLogin().then((res) => {
        if (res.code == 0) {
          getPanoInfo("", (data) => {
            this.$store.commit("SetInfo", data);
            document.title = this.info.name || "无标题";
          });
        }
      });
    },
  },
};
</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;
  i {
    font-size: 14px;
    margin-right: 4px;
  }
}

.ui-preview {
  background: #313131;
}

.app-head-view {
  right: 120px;
}
</style>
