<template>
  <div class="container-viewer-1-"></div>
</template>

<script>
import { SurveyViewer } from "@/views/planetDesign/SceneSurveyViewerPage/shelves.module.js";

export default {
  props: ["surveyId", "shopData", "page", "sceneAction", "elCart", "defaultWare", "isLocked"],

  mounted() {
    this.$nextTick(() => this.tryInitView());
  },
  beforeUnmount: function () {
    if (this.viewer_) {
      this.viewer_.dispose();
      this.viewer_ = null;
    }
  },

  methods: {
    tryInitView() {
      if (!this.viewer_) {
        this.viewer_ = new SurveyViewer({
          container: this.$el,
          surveyId: this.surveyId,
          shopData: this.shopData,
        });
        this.viewer_.on("loadingCompletion", () => {
          this.$emit("onLoadingCompletion");
        });
        this.viewer_.on("hold", (d) => {
          this.$emit("onHold", d);
        });
        this.viewer_.on("from_scene_hold_to_shelf", () => {
          this.$emit("onFromSceneHoldToShelf");
        });
        this.viewer_.on("behavior_flush", q1 => {
          this.$emit("onBehaviorFlush", q1);
        });

        this.viewer_.startup();
      }
      return this.viewer_;
    },
  },

  watch: {
    page(newVal, oldVal) {
      // console.log('page ........', newVal, oldVal)
      if (this.viewer_) {
        this.viewer_.arrange(newVal).then(() => {
          this.$emit("onPageCompletion");
          
          if(!this.defaultWare) return;

          // #20221018
          this.viewer_.hold({
              wareId: this.defaultWare?.planetid,
              keepHold: this.isLocked,
          })
        });
      }
    },
    sceneAction(newVal, oldVal) {
      if (this.viewer_ && newVal) {
        this.viewer_.action(newVal.action);
      }
    },
    elCart(newVal, oldVal) {
      if (this.viewer_ && newVal) {
        this.viewer_.elCart = newVal;
      }
    },
  },
};
</script>

<style scoped>
div.container-viewer-1- {
  width: 100%;
  height: 100%;
}

div.container-viewer-1-:focus {
  outline: none;
}

div.container-viewer-1- >>> canvas:focus {
  outline: none;
}
</style>