<template>
  <div ref="viewerNd" class="view-container viewer-nd">
    <dee-tools class="viewer-nd-header-tools" :tools="headerTools" mode="normal" :collapse="false" />
    <div id="iframeDiv">新迪-3D可视化组件</div>
  </div>
</template>

<script>
import nd_viewCtrl from './viewer'
import fullScreen from './fullScreen'

export default {
  name: 'ViewerNd',
  displayName: '新迪-3D可视化组件',
  mixins: [fullScreen],
  props: {
    basicData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {}
  },
  computed: {
    partNumber() {
      return this.$utils._get(this.basicData, 'number', null)
    }
  },
  watch: {
    'basicData.number': {
      immediate: false,
      handler(number) {
        number && this.init()
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      if (!this.partNumber) return
      if (!window.nd_viewCtrl) {
        window.nd_viewCtrl = nd_viewCtrl
      }

      // 新迪配置
      // eslint-disable-next-line no-undef
      const ndViewer = DeeGlobaluploadSetting.ndViewer
      // 1、设置初始化属性
      nd_viewCtrl.bgColor = '#F2F2F2'
      // eslint-disable-next-line no-undef
      nd_viewCtrl.fingerHttp = ndViewer.fingerHttp // 设置云api域名
      // eslint-disable-next-line no-undef
      const baseUrl = `${VUE_APP_BASE_API || process.env.VUE_APP_BASE_API}`
      const token = localStorage.getItem('token')
      nd_viewCtrl.viewerReqHeader = {
        // authorization: token,
        // token: token,
        'Dex-Token': token,
        'Dex-Auth-Type': 'Token',
        'equipment_id': localStorage.getItem('uid')
      }
      // 2、加载模型
      nd_viewCtrl.init({
        src: `${baseUrl}${ndViewer.modelsDirPath}${this.partNumber}`, // 轻量化文件所在文件夹路径
        renderPagePath: ndViewer.renderPagePath
      })
    }
  }
}
</script>

<style lang="scss">
.viewer-nd {
  width: 100%;
  height: calc(100% - 40px);
  box-sizing: border-box;
  position: relative;
  .viewer-nd-header-tools {
    height: 40px;
    justify-content: flex-end;
    position: absolute;
    right: 0;
    top: -32px;
  }
  #iframeDiv {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    & > iframe {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      border: 1px solid #d8d8d8;
    }
  }
}
</style>