<template>
  <el-form
    @submit.prevent
    ref="ruleFormRef"
    class="mb-24"
    label-width="auto"
    :model="form_data"
    v-bind="$attrs"
  >
    <el-form-item label="参数" :required="true" prop="field" :rules="rules.field">
      <el-input
        v-model="form_data.field"
        :maxlength="64"
        placeholder="请输入参数"
        show-word-limit
      />
    </el-form-item>
    <el-form-item label="显示名称" :required="true" prop="label" :rules="rules.label">
      <el-input
        v-model="form_data.label"
        :maxlength="64"
        show-word-limit
        placeholder="请输入显示名称"
      />
    </el-form-item>
    <el-form-item label="参数提示说明">
      <el-input
        v-model="form_data.tooltip"
        :maxlength="128"
        show-word-limit
        placeholder="请输入参数提示说明"
      />
    </el-form-item>
    <el-form-item label="是否必填" :required="true" prop="required" :rules="rules.required">
      <el-switch v-model="form_data.required" :active-value="true" :inactive-value="false" />
    </el-form-item>
    <el-form-item label="组件类型" :required="true" prop="input_type" :rules="rules.input_type">
      <el-select v-model="form_data.input_type" placeholder="请选择组件类型">
        <el-option
          v-for="input_type in input_type_list"
          :key="input_type.value"
          :label="input_type.label"
          :value="input_type.value"
        />
      </el-select>
    </el-form-item>
    <component
      v-if="form_data.input_type"
      ref="componentFormRef"
      v-model="form_data"
      :is="form_data.input_type"
    ></component>
  </el-form>
</template>
<script setup lang="ts">
import { onMounted, ref, nextTick } from 'vue'
import type { FormInstance } from 'element-plus'
import _ from 'lodash'
import { input_type_list as input_type_list_data } from '@/components/dynamics-form/constructor/data'
const props = withDefaults(
  defineProps<{
    modelValue?: any
    input_type_list?: Array<{ label: string; value: string }>
  }>(),
  {
    input_type_list: () =>
      input_type_list_data.map((item) => ({ label: item.label, value: item.value + 'Constructor' }))
  }
)
const emit = defineEmits(['update:modelValue'])

const ruleFormRef = ref<FormInstance>()

const componentFormRef = ref<any>()
const form_data = ref<any>({
  label: '',
  field: '',
  tooltip: '',
  required: false,
  input_type: ''
})
const rules = {
  label: [{ required: true, message: '显示名称 为必填属性' }],
  field: [{ required: true, message: '参数 为必填属性' }],
  required: [{ required: true, message: '是否必填 为必填属性' }],
  input_type: [{ required: true, message: '组建类型 为必填属性' }]
}
const getData = () => {
  let label: string | any = form_data.value.label
  if (form_data.value.tooltip) {
    label = {
      input_type: 'TooltipLabel',
      label: form_data.value.label,
      attrs: { tooltip: form_data.value.tooltip },
      props_info: {}
    }
  }
  return {
    label: label,
    required: form_data.value.required,
    field: form_data.value.field,
    default_value: form_data.value.default_value,
    ...componentFormRef.value.getData()
  }
}

const validate = () => {
  if (ruleFormRef.value) {
    return ruleFormRef.value?.validate()
  }
  return Promise.resolve()
}

onMounted(() => {
  if (props.modelValue) {
    rander(props.modelValue)
  }
})
const rander = (data: any) => {
  form_data.value.required = data.required ? data.required : false
  form_data.value.field = data.field
  if (data.input_type) {
    form_data.value.input_type = data.input_type + 'Constructor'
  }

  if (data.label && data.label.input_type === 'TooltipLabel') {
    form_data.value.tooltip = data.label.attrs.tooltip
    form_data.value.label = data.label.label
  } else {
    form_data.value.label = data.label
  }
  nextTick(() => {
    componentFormRef.value?.rander(data)
  })
}

defineExpose({ getData, validate, rander })
</script>
<style lang="scss"></style>
