<template>
  <div class="btns">
    <Button
      customIcon="uino-icon uino-icon-dian"
      tooltip="采集点"
      @click="startCtDot"
    ></Button>
    <Button
      customIcon="uino-icon uino-icon-guanxian"
      tooltip="采集路径"
      @click="startCtLine"
    ></Button>
    <Button
      customIcon="uino-icon uino-icon-daochu"
      tooltip="导出预制件数据"
      @click="exportPrefabJson"
    ></Button>
    <Button
      :customIcon="`uino-icon ${prevStateIcon}`"
      tooltip="预览"
      @click="openPreviewView"
    ></Button>
  </div>
</template>

<script>
import { debounce } from 'lodash'
import { copy } from '@/utils'
import CtDotLineArea from '@/utils/ctDotLineArea'
import storage from '@/utils/storage'
export default {
  props: {
    exportData: {
      type: Object,
    },
  },
  data() {
    return {
      previewDialogVisible: false,
    }
  },
  computed: {
    prevStateIcon() {
      return this.previewDialogVisible
        ? 'uino-icon-tingzhi'
        : 'uino-icon-yulan1'
    },
  },
  methods: {
    startCtDot() {
      this.ct.intoCollect('dot')
    },
    startCtLine() {
      this.mtBundle.measureTools.calcDistance()
    },
    async exportPrefabJson() {
      let link = document.createElement('a')
      link.download = 'prefab.json'
      link.href =
        'data:text/plain,' + encodeURIComponent(storage.getItem('prefabList'))
      link.click()
    },
    openPreviewView() {
      this.previewDialogVisible = !this.previewDialogVisible
      this.$emit('openPreviewView', this.previewDialogVisible)
    },
  },
  mounted() {
    // 加载采集工具
    this.ct = new CtDotLineArea()
    this.debounceCopy = debounce(copy, 500)

    // 加载测量插件
    this.mtBundle = app.loadBundle('/plugins/measureTools', {
      showDefaultPanel: false,
    })
    this.mtBundle.waitForComplete().then(() => {
      this.mtBundle.measureTools.onChange = (data) => {
        if (data.isDone && data.linePath.length) {
          this.debounceCopy(data.linePath)
        }
      }
    })
  },
}
</script>

<style lang="less">
.btns {
  margin: 20px;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2;
  > div {
    margin-left: 20px;
    background: #000 !important;
  }
}
</style>
