<template>
  <a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
    <a-row :gutter="20">
      <a-col :span="24">
        <a-form-item label="视图名称:" name="viewName">
          <a-input v-model:value="form.viewName" allow-clear placeholder="请输入视图名称" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="视图编码:" name="viewCode">
          <a-input v-model:value="form.viewCode" allow-clear placeholder="请输入视图编码" />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="系统编码:" name="systemCodeShow">
          <a-input v-model:value="form.systemCodeShow" allow-clear placeholder="请输入系统编码" disabled />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="排序:" name="fldSort">
          <a-input-number
            v-model:value="form.fldSort"
            :min="0"
            style="width: 100%"
            placeholder="请输入排序"
            allow-clear
            autocomplete="off"
          />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="视图类型" name="viewType">
          <a-radio-group v-model:value="form.viewType">
            <a-radio :value="1">列表视图</a-radio>
            <a-radio :value="2">其他视图</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item label="备注">
          <a-textarea v-model:value="form.description" placeholder="请输入备注" :rows="4" />
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>

<script setup name="ViewForm">
import { reactive } from 'vue';

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

// 验证规则
const rules = reactive({
  viewName: [{ required: true, message: '请输入视图名称', type: 'string', trigger: 'blur' }],
  viewCode: [{ required: true, message: '请输入视图编码', type: 'string', trigger: 'blur' }],
  systemCodeShow: [{ required: true, message: '请输入系统编码', type: 'string', trigger: 'blur' }],
  fldSort: [{ required: true, message: '请输入排序', type: 'number', trigger: 'blur' }],
  viewType: [{ required: true, message: '请选择视图类型', type: 'number', trigger: 'blur' }]
});
</script>

<style></style>
