<template>
  <collapse-item name="三维配置" :expanded="true">
    <setting-item-box name="边框配置">
      <setting-item name="颜色">
        <n-color-picker size="small" :show-alpha="false" v-model:value="optionData.borderConfig.color"></n-color-picker>
      </setting-item>
      <setting-item name="开启">
        <n-switch v-model:value="optionData.borderConfig.show" size="small" />
      </setting-item>
      <setting-item name="大小">
        <n-input-number :min="0" v-model:value="optionData.borderConfig.size" size="small" />
      </setting-item>
    </setting-item-box>
    <setting-item-box :alone="true">
      <template #name>
        <n-text>提示</n-text>
        <n-tooltip trigger="hover">
          <template #trigger>
            <n-icon size="21" :depth="3">
              <help-outline-icon></help-outline-icon>
            </n-icon>
          </template>
          <span class="help-span">{{ threeFileHelpMessgae }}</span>
        </n-tooltip>
      </template>
      <FileUpload
        :max="1"
        :fileList="[optionData.dataset]"
        :threeSupportFileFormat="threeSupportFileFormat"
        :singleFileType="singleFileTypeNotMtl"
        @fileStaticUri="handleFileStaticUri"
      />
    </setting-item-box>
    <setting-item-box name="mtl材质">
      <FileUpload
        :fileList="optionData.mtlPath"
        :max="100"
        :threeSupportFileFormat="supportFileMtl"
        @fileStaticUri="handleFileMtlStaticUri"
      />
    </setting-item-box>
    <setting-item-box name="材质贴图">
      <FileUpload
        :fileList="optionData.textureImage"
        :max="100"
        :threeSupportFileFormat="supportFileTextureImage"
        @fileStaticUri="handleFileTextureImageStaticUri"
      />
    </setting-item-box>
    <setting-item-box name="属性配置">
      <setting-item name="场景色(需要这种格式HEX #000000，否则失效)">
        <n-color-picker size="small" :show-alpha="false" v-model:value="optionData.backgroundColor"></n-color-picker>
      </setting-item>
      <SettingItem name="场景透明度">
        <n-input-number :min="0" :max="1" v-model:value="optionData.backgroundAlpha" />
      </SettingItem>
      <SettingItem name="启用阻尼">
        <n-switch v-model:value="optionData.enableDamping" size="small" />
      </SettingItem>
      <SettingItem v-if="optionData.enableDamping" name="阻尼值">
        <n-input-number v-model:value="optionData.dampingFactor" :min="0" :max="1" size="small"></n-input-number>
      </SettingItem>
      <SettingItem name="启用动画">
        <n-switch v-model:value="optionData.autoPlay" size="small" />
      </SettingItem>
      <SettingItem name="输出编码">
        <n-select v-model:value="optionData.outputEncoding" size="small" :options="encodinghList"></n-select>
      </SettingItem>
      <SettingItem name="是否清空场景">
        <n-switch @change="handleChange" v-model:value="optionData.clearScene" size="small" />
      </SettingItem>
    </setting-item-box>
  </collapse-item>
</template>

<script setup lang="ts">
import { PropType, ref } from 'vue'
import { option } from './config'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { NInputNumber, NSelect } from 'naive-ui'
import FileUpload from './components/FileUpload.vue'
import { icon } from '@/plugins'
import type { UploadFileInfo } from 'naive-ui'

const { HelpOutlineIcon } = icon.ionicons5

const props = defineProps({
  optionData: {
    type: Object as PropType<typeof option>,
    required: true
  }
})

const singleFileTypeNotMtl = ref('')

const threeFileHelpMessgae = ref('如果格式为obj，则上传顺序是，先上传材质贴图（png或jpg）、mtl材质文件，最后是obj')

const threeSupportFileFormat = ['fbx', 'obj', 'gltf', 'stl', 'dae', 'glb', 'ply', 'json']

const supportFileMtl = ['mtl']

const supportFileTextureImage = ['jpg', 'png']

const handleChange = (e: boolean) => {
  if (e) props.optionData.dataset = ''
}

const encodinghList = [
  { label: 'linear', value: 'linear' },
  { label: 'sRGB ', value: 'sRGB ' }
]

const handleFileStaticUri = (value: UploadFileInfo[]) => {
  props.optionData.dataset = value[0]?.url as string
}

const handleFileMtlStaticUri = (value: UploadFileInfo[]) => {
  props.optionData.mtlPath = value.map(item => item?.url) as any
}

const handleFileTextureImageStaticUri = (value: UploadFileInfo[]) => {
  props.optionData.textureImage = value.map(item => item?.url) as any
}
</script>

<style lang="scss" scoped>
.help-span {
  display: flex;
  flex-wrap: wrap;
  width: 8vw;
  color: white;
}
</style>