<template>
  <a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
    <a-row :gutter="20">
      <a-col :span="24">
        <a-form-item name="componentName">
          <template #label>
            <span>
              组件名称
              <a-tooltip v-if="false">
                <template #title></template>
                <QuestionCircleOutlined />
              </a-tooltip>
              <span>：</span>
            </span>
          </template>
          <a-input v-model:value="form.componentName" allow-clear placeholder="请输入表单组件名称" />
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item name="componentCode">
          <template #label>
            <span>
              组件编码
              <a-tooltip v-if="false">
                <template #title></template>
                <QuestionCircleOutlined />
              </a-tooltip>
              <span>：</span>
            </span>
          </template>
          <a-input v-model:value="form.componentCode" allow-clear placeholder="请输入表单组件编码" />
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item name="componentIcon">
          <template #label>
            <span>
              组件图标（iconfont）
              <a-tooltip v-if="false">
                <template #title></template>
                <QuestionCircleOutlined />
              </a-tooltip>
              <span>：</span>
            </span>
          </template>
          <icon-select
            v-model:value="form.componentIcon"
            placeholder="请输入组件图标，来自iconfont"
            title="表单图标"
            :iconJson="formIconData"
          ></icon-select>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item name="mobileEnableFlag" label="启用移动端">
          <a-radio-group v-model:value="form.mobileEnableFlag">
            <a-radio :value="true">开启</a-radio>
            <a-radio :value="false">不开启</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item name="codeGeneratorFlag" label="启用代码生成">
          <a-radio-group v-model:value="form.codeGeneratorFlag">
            <a-radio :value="true">开启</a-radio>
            <a-radio :value="false">不开启</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item name="fldSort">
          <template #label>
            <span>
              排序
              <a-tooltip v-if="false">
                <template #title></template>
                <QuestionCircleOutlined />
              </a-tooltip>
              <span>：</span>
            </span>
          </template>
          <a-input-number v-model:value="form.fldSort" style="width: 100%" placeholder="请输入排序" allow-clear autocomplete="off" />
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script setup name="FormComponentForm">
import { reactive } from 'vue';
import formIconData from '@/assets/form-icon/iconfont.json';

const props = defineProps({
  // 表单数据
  form: Object
});

// 验证规则
const rules = reactive({});

defineExpose({});
</script>

<style></style>
