<template>
    <template v-for="(field, index) in keys" :key="index">
      <uni-forms-item
        :label="props.schema!.properties[field].title"
        :name="`${field}`"
        :required="getRequired(props.schema?.required, field)"
        :rules="[{ required: getRequired(props.schema?.required, field), errorMessage: `${props.schema!.properties[field].title}不能为空`}]"
      >

      <SelectComponent v-model="props.formData![field]" 
       v-if="column(props.schema!.properties[field]).enum" 
       :placeholder="column(props.schema!.properties[field]).placeholder"
       :field="column(props.schema!.properties[field])"
       />
       <StringComponent v-model="props.formData![field]" 
       v-else-if="['string'].includes(column(props.schema!.properties[field]).type)" 
       :placeholder="column(props.schema!.properties[field]).placeholder"
       :field="column(props.schema!.properties[field])"
       />
       <BooleanComponent v-model="props.formData![field]" v-else-if="['boolean'].includes(column(props.schema!.properties[field]).type)" :placeholder="column(props.schema!.properties[field]).placeholder"
       :field="column(props.schema!.properties[field])"
       />
       <NumberComponent v-model="props.formData![field]" v-else-if="['number', 'integer'].includes(column(props.schema!.properties[field]).type)" :placeholder="column(props.schema!.properties[field]).placeholder"
       :field="column(props.schema!.properties[field])"
       />
       <UploadComponent v-model="props.formData![field]" 
       :workId="workId"
       v-else-if="['upload'].includes(column(props.schema!.properties[field]).type)" 
       :placeholder="column(props.schema!.properties[field]).placeholder"
       :field="column(props.schema!.properties[field])"
       />
       <DownloadComponent v-model="props.formData![field]" 
       :workId="workId"
       v-else-if="['download'].includes(column(props.schema!.properties[field]).type)" 
       :placeholder="column(props.schema!.properties[field]).placeholder"
       :field="column(props.schema!.properties[field])"
       />
      </uni-forms-item>
    </template>
  </template>
  
  <script setup lang="ts">
  import { h, computed, PropType } from 'vue'
  import { orderProperties } from '@/utils'
  import NumberComponent from './number-component.vue'
  import StringComponent from './string-component.vue'
  import SelectComponent from './select-component.vue'
  import BooleanComponent from './boolean-component.vue'
  import UploadComponent from './upload-component.vue'
  import DownloadComponent from './download-component.vue'

//   import {
//     Input,
//     InputNumber,
//     Switch,
//     TimePicker,
//     Textarea,
//     DatePicker,
//     MonthPicker,
//     YearPicker
//   } from '@arco-design/web-vue'
//   import CustomSelect from './Select.vue'
//   import Upload from './Upload.vue'
//   import Download from './Download.vue'
  // 状态下拉框列表枚举值
  
  const props = defineProps({
    workId: {
      type: String
    },
    formData: {
      type: Object as PropType<{ [key: string]: any }>
    },
    schema: {
      type: Object as PropType<{ [key: string]: any }>,
      default: () => {
        return {}
      }
    }
  })
  
  const keys = computed(() => {
    if(!props.schema['ui:order']){
        return  []
    }
    return orderProperties(
      Object.keys(props.schema?.properties),
      props.schema['ui:order']
    )
  })
  
  const getRequired = (fields: string[], field: string) => {
    if (!fields) {
      return false
    }
    return fields.includes(field)
  }
  
  const column = (field: { [key: string]: any }): any => {
    return field
  }
//   const getFieldComponent = (field: { [key: string]: any }): any => {
//     if (field.enum) {
//       return h(CustomSelect, {
//         options: field.enum.map((item: any, index: number) => {
//           return {
//             key: item.value || item,
//             value: item.value || item,
//             label: field.enumNames[index] || item
//           }
//         }),
//         multiple: field.multiple,
//         readonly: field.readonly,
//         placeholder: `请输入${field.title}`
//       })
//     }
//     switch (field.type) {
//       case 'string':
//         switch (field.format) {
//           case 'time':
//             return h(TimePicker, {
//               placeholder: `请选择${field.title}`,
//               readonly: field.readonly
//             })
//           case 'date':
//             return h(DatePicker, {
//               placeholder: `请选择${field.title}`,
//               readonly: field.readonly
//             })
//           case 'datetime':
//             return h(DatePicker, { showTime: true })
//           case 'month':
//             return h(MonthPicker, {
//               placeholder: `请选择${field.title}`,
//               readonly: field.readonly
//             })
//           case 'year':
//             return h(YearPicker, {
//               placeholder: `请选择${field.title}`,
//               readonly: field.readonly
//             })
//           case 'textarea':
//             return h(Textarea, {
//               autoSize: {
//                 minRows: field.minRows || 10
//               },
//               placeholder: `请输入${field.title}`,
//               readonly: field.readonly
//             })
  
//           default:
//             return h(Input, {
//               placeholder: `请输入${field.title}`,
//               allowClear: true,
//               readonly: field.readonly
//             })
//         }
//       case 'upload':
//         return h(Upload, {
//           accept: field.accept,
//           workId: props.workId,
//           limit: field.limitCount || 0
//         })
//       case 'download':
//         return h(Download, {
//           default: field.default || []
//         })
//       case 'integer':
//       case 'number':
//         return h(InputNumber, {
//           precision: field.type === 'integer' ? 0 : 2,
//           min: field.minimum,
//           max: field.maximum,
//           allowClear: true,
//           readonly: field.readonly,
//           placeholder: `请输入${field.title}`
//         })
//       case 'boolean':
//         return Switch
//       default:
//         return null
//     }
//   }
  </script>
  