<template>
  <template v-for="(field, index) in keys" :key="index">
    <a-form-item
      v-if="!props.schema?.properties[field]['ui:hidden'] && props.schema!.properties[field].type!=='array' && props.schema!.properties[field]['ui:field']!=='CustomObjectSchema'"
      :validate-trigger="['blur', 'change', 'focus', 'input']"
      :label="props.schema!.properties[field].title"
      :field="`${field}`"
      :required="getRequired(props.schema?.required, field)"
      :rules="[{ required: getRequired(props.schema?.required, field), message: `${props.schema!.properties[field].title}不能为空`}]"
    >
      <template #extra>
        <span>{{ props.schema!.properties[field].description }}</span>
      </template>
      <component
        :is="getFieldComponent(props.schema!.properties[field])"
        v-model="props.formData![field]"
      ></component>
    </a-form-item>
  </template>
</template>

<script setup lang="ts">
import { h, computed, PropType } from 'vue'
import {
  Input,
  InputNumber,
  Switch,
  TimePicker,
  Textarea,
  DatePicker,
  MonthPicker,
  YearPicker
} from '@arco-design/web-vue'
import { orderProperties } from '@/utils'
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(() => {
  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 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>
