<template>
  <template v-for="param in dynamicParams" :key="param.name">
    <Select
      v-if="param.ui === 'select' || param.type === 'select'"
      :model-value="paramValues[param.name]"
      :options="(param.options || []).map(o => (typeof o === 'object' ? o : { value: o, label: String(o) }))"
      class="param-select"
      position="top"
      @update:model-value="(v) => paramValues[param.name] = v"
    >
      <template #prefix>
        <span class="param-label">{{ param.label || param.name }}</span>
      </template>
    </Select>
    <SwitchControl
      v-else-if="param.ui === 'switch' || param.type === 'boolean' || param.type === 'Boolean'"
      :model-value="paramValues[param.name] === true || paramValues[param.name] === 'true'"
      :label="param.label || param.name"
      @update:model-value="(v) => paramValues[param.name] = v"
    />
  </template>
</template>

<script setup>
import Select from '@/components/Select/index.vue'
import SwitchControl from '@/components/SwitchControl/index.vue'

const props = defineProps({
  config: { type: Object, default: null },
  paramValues: { type: Object, default: () => ({}) },
  excludeNames: { type: Array, default: () => [] }
})

const handledUis = ['textarea', 'proportion', 'resolution', 'dimension', 'dimensionWidth', 'dimensionHeight', 'quantity', 'imageUpload', 'hidden', 'number']

const dynamicParams = computed(() => {
  if (!props.config?.params) return []
  return props.config.params.filter((p) => {
    if (handledUis.includes(p.ui)) return false
    if (props.excludeNames.includes(p.name)) return false
    return true
  })
})
</script>

<style lang="less" scoped>
.param-select {
  :deep(.select-header) {
    height: 40px;
    padding: 0 15px;
    border-radius: 10px;
    border: 1px solid #E8E9EB;
    background: #f5f6f7;
    &:hover { background: #e9eaeb; }
  }
  :deep(.select-text) { font-size: 14px; }
  :deep(.dropdown-menu) { min-width: 136px; }
  :deep(.dropdown-item) {
    min-width: 80px;
    justify-content: center;
  }
}
.param-label {
  font-family: "Microsoft YaHei";
  font-size: 12px;
  color: #999;
  white-space: nowrap;
}
</style>
