<!-- 3dmodel配置 -->
<template>
  <div>
    <el-form-item label="模型ID">
      <el-input v-model="main.activeOption.id"
                placeholder="请选择模型ID">
        <template #append>
          <el-button type="primary"
                     @click="api.box=true"
                     icon="el-icon-search"></el-button>
        </template>
        <template #prepend
                  v-if="main.activeOption.id">
          <el-button type="primary"
                     @click="go3DEdit"
                     icon="el-icon-edit"></el-button></template>
      </el-input>

    </el-form-item>
    <template v-if="!main.activeOption.id">
      <el-form-item label="地址">
        <avue-input v-model="main.activeOption.src"
                    placeholder="请输入模型地址"></avue-input>
      </el-form-item>
      <el-form-item label="类型">
        <avue-select :dic="dic"
                     v-model="main.activeOption.type"
                     placeholder="请选择模型类型"></avue-select>
      </el-form-item>
    </template>
    <el-form-item label="缩放">
      <avue-input-number v-model="main.activeOption.scale"></avue-input-number>
    </el-form-item>
    <el-form-item label="初始化位置">
      <avue-input-number v-model="main.activeOption.x"
                         placeholder="请输入x开始位置"></avue-input-number>
      <avue-input-number v-model="main.activeOption.y"
                         placeholder="请输入y开始位置"></avue-input-number>
      <avue-input-number v-model="main.activeOption.z"
                         placeholder="请输入z开始位置"></avue-input-number>
    </el-form-item>
    <el-form-item label="开启旋转">
      <avue-switch v-model="main.activeOption.rotate"></avue-switch>
    </el-form-item>
    <el-form-item label="旋转轴"
                  v-if="main.activeOption.rotate">
      <avue-select v-model="main.activeOption.position"
                   :dic="dic1"
                   placeholder="请选择旋转轴"></avue-select>
    </el-form-item>
    <el-dialog title="组件库"
               v-model="api.box"
               class="avue-dialog"
               width="70%">
      <component-list v-if="api.box"
                      :activeName="4"
                      @change="handleApiChange"
                      :menu="false"></component-list>
    </el-dialog>
  </div>
</template>

<script>
import componentList from '../../page/list/components.vue'
export default {
  name: '3dmodel',
  inject: ["main"],
  components: {
    componentList,
  },
  data () {
    return {
      api: {
        box: false,
        item: {}
      },
      dic: [
        { label: 'dae', value: 'ModelCollada' },
        { label: 'fbx', value: 'ModelFbx' },
        { label: 'gltf', value: 'ModelGltf' },
        { label: 'json', value: 'ModelThree' },
        { label: 'obj', value: 'ModelObj' },
        { label: 'ply', value: 'ModelPly' },
        { label: 'stl', value: 'ModelStl' }
      ],
      dic1: [
        { label: 'x轴', value: 'x' },
        { label: 'y轴', value: 'y' },
        { label: 'z轴', value: 'z' }
      ]
    }
  },
  methods: {
    go3DEdit () {
      window.open('/3dEditer/editor/index.html?id=' + this.main.activeOption.id)
    },
    handleApiChange (val) {
      this.api.item = val
      this.main.activeOption.id = val.id
      this.api.box = false;
      this.api.item = {}
      this.$message.success('导入成功')
    },
  }
}
</script>

<style>
</style>