<script setup lang="ts">
import WdButton from 'wot-design-uni/components/wd-button/wd-button.vue'
import WdInput from 'wot-design-uni/components/wd-input/wd-input.vue'
import WdPicker from 'wot-design-uni/components/wd-picker/wd-picker.vue'

const modelValue = defineModel({
  type: Object,
  default: () => ({}),
})
defineProps({
  schema: {
    type: Object as PropType<{
      [key: string | symbol]: { type: 'TextField' | 'Submit' | string; label?: string; props?: any }
    }>,
    required: true,
    default: () => ({}),
  },
  direction: {
    type: String as PropType<'horizontal' | 'vertical'>,
    default: 'vertical',
  },
})
const types = {
  TextField: WdInput,
  Submit: WdButton,
  Select: WdPicker,
}
const defaultProps = {
  TextField: {
    noBorder: true,
    style: {},
    customClass: 'rounded border border-[#e1e1e1] border-solid p-1',
    placeholder: ' ',
  },
  Submit: {
    customClass: 'w-full! rounded-lg! my-4!',
    block: true,
  },
}
// const
</script>
<template>
  <wd-form ref="form" :model="modelValue">
    <wd-cell-group border>
      <template
        v-for="([prop, { type, label, props }], index) in Object.entries(schema)"
        :key="index"
      >
        <div class="grid mb-4">
          <label
            v-if="type !== 'Submit' && direction === 'vertical'"
            class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-relaxed mb-1"
            :for="prop"
          >
            {{ label || prop }}
          </label>
          <!-- #ifdef H5 -->
          <component :is="types[type]" :name="prop" v-bind="defaultProps[type]">
            <span v-if="type === 'Submit'">提交</span>
          </component>
          <!-- #endif -->
          <!-- #ifdef MP-WEIXIN -->
          <wd-input
            v-if="type === 'TextField'"
            v-bind="{ label, ...props }"
            v-model="modelValue[prop]"
          ></wd-input>
          <wd-picker
            v-if="type === 'Select'"
            v-bind="{ label, ...props }"
            v-model="modelValue[prop]"
          ></wd-picker>
          <!-- #endif -->
        </div>
      </template>
    </wd-cell-group>
  </wd-form>
</template>
