import type { CSSProperties, PropType } from 'vue';
import { FormSchema } from './types/form';
import type { ColProps } from 'element-plus/es/components/col/src/col';
import type { ButtonProps } from 'element-plus/es/components/button/src/button';

import { propTypes } from '@/utils/propTypes';
import { FormRules } from 'element-plus';
export const basicProps = {
  //表单数据对象
  model: {
    type: Object,
  },
  //表单验证规则
  rules: {
    type: Object as PropType<FormRules>,
  },
  //是否展示为行内表单
  inline: {
    type: Boolean,
    default: false,
  },
  //表单域标签的位置
  labelPosition: {
    type: String,
    default: 'right',
  },
  // 标签宽度  固定宽度
  labelWidth: {
    type: [Number, String] as PropType<number | string>,
    default: 80,
  },
  //表单域标签的后缀
  labelSuffix: {
    type: String,
  },
  //是否显示必填字段的标签旁边的红色星号
  hideRequiredAsterisk: {
    type: Boolean,
    default: false,
  },
  //是否显示校验错误信息
  showMessage: {
    type: Boolean,
    default: true,
  },
  //是否以行内形式展示校验信息
  inlineMessage: {
    type: Boolean,
    default: false,
  },
  //是否在输入框中显示校验结果反馈图标
  statusIcon: {
    type: Boolean,
    default: false,
  },
  //是否在 rules 属性改变后立即触发一次验证
  validateOnRuleChange: {
    type: Boolean,
    default: true,
  },
  //大小
  size: {
    type: String,
    default: 'default',
  },
  //是否禁用该表单内的所有组件。 若设置为 true，则表单内组件上的 disabled 属性不再生效
  disabled: {
    type: Boolean,
    default: false,
  },

  /*  =============================== 自定义开始 ================================= */

  // 表单配置规则
  schemas: {
    type: [Array] as PropType<FormSchema[]>,
    default: () => [],
  },
  //布局方式
  layout: {
    type: String,
    default: 'vertical',
  },
  //组件是否width 100%
  isFull: {
    type: Boolean,
    default: true,
  },
  //是否显示操作按钮（查询/重置）
  showActionButtonGroup: propTypes.bool.def(true),
  // 显示重置按钮
  showResetButton: propTypes.bool.def(true),
  //重置按钮配置
  resetButtonOptions: Object as PropType<Partial<ButtonProps>>,
  // 显示确认按钮
  showSubmitButton: propTypes.bool.def(true),
  // 确认按钮配置
  submitButtonOptions: Object as PropType<Partial<ButtonProps>>,
  //展开收起按钮
  showAdvancedButton: propTypes.bool.def(true),
  // 确认按钮文字
  submitButtonText: {
    type: String,
    default: '查询',
  },
  //重置按钮文字
  resetButtonText: {
    type: String,
    default: '重置',
  },
  //row 配置
  rowProps: Object as PropType<ColProps>,
  //col配置
  colProps: Object as PropType<ColProps>,
  //grid 样式
  baseGridStyle: {
    type: Object as PropType<CSSProperties>,
  },
  //是否折叠
  collapsed: {
    type: Boolean,
    default: true,
  },
  //默认展示的行数
  collapsedRows: {
    type: Number,
    default: 1,
  },
};
