<template>
  <collapse-item name="三维静态路径" :expanded="true">
    <setting-item-box>
      <setting-item name="路径">
        <n-select
          @change="handlePathChange"
          style="width: 12vw"
          v-model:value="optionData.dataset"
          size="small"
          :options="pathList"
          :render-label="renderOption"
        ></n-select>
      </setting-item>
    </setting-item-box>
  </collapse-item>
  <collapse-item name="三维配置属性" :expanded="true">
    <setting-item-box>
      <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 name="选择灯光">
        <setting-item name="灯光">
          <n-select
            @change="handleLightChange"
            v-model:value="selectLight"
            size="small"
            :options="lightList"
          ></n-select>
        </setting-item>
        <setting-item name="灯光颜色选择">
          <n-color-picker size="small" :show-alpha="false" v-model:value="lightColor"></n-color-picker>
        </setting-item>
      </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, h, ref, watch } from 'vue'
import { option } from './config'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
import { NEllipsis, NInputNumber, NSelect, NSpace, SelectOption } from 'naive-ui'

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

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

const handlePathChange = () => {
  props.optionData.clearScene = false
}

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

/**
环境光(AmbientLight) | 方向光(DirectionalLight) | 点光(PointLight) | 半球光(HemisphereLight)
暂且支持 环境光
 */
const lightList = [
  {
    type: 'AmbientLight',
    value: 'AmbientLight',
    label: '环境光'
  }
]

const selectLight = ref('')

const lightColor = ref('')

const lightChange = (type: string, color: string) => {
  props.optionData.lights = [
    {
      type,
      color
    }
  ] as any
}

const handleLightChange = (e: string) => {
  selectLight.value = e
  lightChange(e, lightColor.value)
}

watch(
  () => lightColor.value,
  newValue => {
    lightChange(selectLight.value, newValue)
  }
)

//TODO:三维静态路径地址，无法通过import.meta.globEager来引入，要报错，待优化
const pathList = [
  {
    label: '3D厂房',
    value: 'src/assets/external/models/fbx/厂房.fbx',
    type: 'fbx'
  },
  {
    label: '树',
    value: 'src/assets/external/models/obj/tree.obj',
    type: 'obj'
  },
  {
    label: 'gltf类型',
    value: 'src/assets/external/models/gltf/DamagedHelmet.gltf',
    type: 'gltf'
  },
  {
    label: '白色物体',
    value: 'src/assets/external/models/stl/colored.stl',
    type: 'stl'
  },
  {
    label: '舞动的机器人',
    value: 'src/assets/external/models/collada/stormtrooper.dae',
    type: 'dae'
  },
  {
    label: '雕像',
    value: 'src/assets/external/models/ply/Lucy100k.ply',
    type: 'ply'
  },
  {
    label: '正方体',
    value: 'src/assets/external/models/json/lightmap.json',
    type: 'json'
  }
]

/**
 * 三维文件格式,vue-3d-loader是这个插件支持的格式，其他格式待解决
 * glb是gltf文件的二进制形式
 * 有些格式需要联合使用，需要贴纹理或者图片等，搭配使用比如(obj,mtl) (fbx,jpg)
 */
const threeSupportFileFormat = ['fbx', 'obj', 'gltf', 'stl', 'dae', 'glb', 'ply', 'json']

const renderOption = (option: SelectOption) => {
  const threeSupportType = threeSupportFileFormat.find(item => item === option.type)
  return h(NSpace, { justify: 'space-between', style: 'padding: 0 15px; height: 28px; line-height: 28px;' }, () => [
    h(NEllipsis, null, () => threeSupportType),
    h(NEllipsis, null, () => option.label)
  ])
}
</script>