<template>
  <el-form ref="form" label-width="84px">
    <el-form-item label="模型名称">
      <el-input
        v-model="bindModel.modelTitle"
        maxlength="50"
        placeholder="请输入模型名称"
      />
    </el-form-item>
    <el-form-item label="渲染方式" v-if="bindModel.modelDateType === 'obj'">
      <el-select placeholder="请选择" v-model="bindModel.renderType">
        <el-option label="基础材质（无光照）" value="base" />
        <el-option label="标准材质（有光照，适用于无贴图模型）" value="normal" />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ModelScene, setModelScene } from "@/store/scene";
import { ElMessage } from "element-plus";
import { QuiskExpose } from "@/helper/mount";

const props = defineProps<{ model: ModelScene }>();
const bindModel = ref<ModelScene>({
  ...props.model,
  renderType: props.model.renderType || "base",
});

defineExpose<QuiskExpose>({
  async submit() {
    if (!bindModel.value.modelTitle || !bindModel.value.modelTitle.trim()) {
      ElMessage.error("模型名称不能为空");
      throw "模型名称不能为空";
    }
    await setModelScene(bindModel.value);
  },
});
</script>
