<template>
  <div v-if="config.is_three_dimensions" class="answerviewer">
    <SceneSurveyViewer v-if="shopData" 
    :shopData="shopData"
    :page="page" 
    :sceneAction="sceneAction"
    :surveyId="surveyId"
    :defaultWare="defaultWare"
    :isLocked="!!config.is_initialize"
    @onLoadingCompletion="onLoadingCompletion"
    @onFromSceneHoldToShelf="onFromSceneHoldToShelf"
    @onBehaviorFlush="onBehaviorFlush"
    />
    <div class="page pageNext" @click="next">
      <i class="iconfont">&#xe680;</i>
    </div>
    <div class="page pagePre" @click="previous">
      <i class="iconfont">&#xe67f;</i>
    </div>
    <div class="q-content-top">
      <div class="title">{{stem}}</div>
      <slot name="page" :rowIndex="rowIndex"></slot>
    </div>
  </div>
  <div v-else>
    <slot></slot>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import SceneSurveyViewer from "@/views/planetDesign/Design/components/config/Viewer3D/SceneSurveyViewer";
import { buildShopDataDemo } from "@/views/planetDesign/Design/components/config/config3d.utils";
import BrowsingRecordApi from "./api.js";

export default defineComponent({
  components: {
    SceneSurveyViewer
  },
  props: {
    isStemMiddle: {
      type: Boolean,
      default: false
    },
    // 题干
    stem: {
      type: String,
      default: "",
    },
    // 配置
    config: {
      type: Object,
      default: () => {},
    },
    // 行数-3D模块的分页数
    rowLength: {
      type: Number,
      default: 0
    },
    // 样本SN
    answerSn: {
      type: String,
      default: "",
    },
    // 样本SN
    answerSurveySn: {
      type: String,
      default: "",
    },
    question: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    surveyId() {
      return this.config.scene;
    },
    shelfId() {
      return this.config.shelf || this.scene.shelves[0].planetid;
    },
    scene() {
      return this.config.scene_information;
    },
    shelves() {
      if (!this.scene) return [];
      return this.scene.shelves;
    },
    shelf() {
      return this.shelves.find(
        (x) => x.planetid == this.config.shelf
      );
    },
    wares() {
      if (!this.shelf) return [];
      return this.shelf.wares;
    },
    ware() {
      return this.wares.find(
        (x) => x.planetid == this.config.ware
      );
    },
    defaultWare() {
      return this.ware;
    },
  },
  data(){
    return {
      shopData: null,
      page: null,
      rowIndex: 0,
      sceneAction: null
    };
  },
  mounted() {
    this.$emit("update:answer", {});
    this.shopData = buildShopDataDemo(this.scene);
    this.rowIndex = 0;
  },
  methods: {
    next(){
      if(this.rowIndex + 1 >= this.rowLength){
        this.$emit("custom-next");
        return;
      }
      this.rowIndex += 1;
    },
    previous(){
      if(this.rowIndex <= 0){
        this.$emit("custom-previous");
        return;
      }
      this.rowIndex -= 1;
    },
    onLoadingCompletion(){
      // if(this.config.scene_information.arrangeType == "col"){
        this.page = {
          cells: this.shelf.cells.map((cell, index) => {
            return {
              ...cell,
              ...this.wares[index % this.wares.length]
            }
          })
        };
      // }
    },
    onFromSceneHoldToShelf(){
      this.sceneAction = {
          action: "hold_to_shelf",
      }
    },
    // 用户行为记录
    onBehaviorFlush(data) {

      // 判断是否记录
      if(!this.config.is_behavior) return;

      if(!data[0]) return;

      // BrowsingRecordApi.browsingRecordSurveys({
      //   sn: this.answerSurveySn,
      //   data: {
      //     sn: this.answerSn,
      //     question_index: this.question.question_index,
      //     question_type: this.question.question_type,
      //     planet_id: data[0].wareId,
      //     shelve_planet_id: this.shelfId,
      //     action_info: data,
      //   },
      // }).catch((e) => console.error(e));
    },
  }
});
</script>

<style lang="scss" scoped>

@import url("./viewer.utils.scss");

.answerviewer {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  position: fixed;
  background-color: #fff;
  z-index: 99;
}
</style>
