<template>
  <a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
    <a-row :gutter="20">
      <a-col :span="24">
        <a-form-item label="中文名称:" name="metaModelName">
          <a-input
            v-model:value="form.metaModelName"
            allow-clear
            placeholder="请输入中文名称"
            :disabled="form.metaModelType == 2 ? true : false"
          />
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item label="表名:" name="metaModelCode">
          <a-input
            v-model:value="form.metaModelCode"
            allow-clear
            placeholder="请输入表名"
            :disabled="form.metaModelType == 2 ? true : false"
          />
        </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="24">
        <a-row>
          <a-col :span="12">
            <a-form-item label="是否新建表" name="metaModelType">
              <a-radio-group v-model:value="form.metaModelType" @change="metaModelTypeChange">
                <a-radio :value="1">新建表</a-radio>
                <a-radio :value="2">选择已有表</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span="12" v-if="form.metaModelType == 2">
            <a-form-item label="选择已有表:" name="linkModelId">
              <a-select
                v-model:value="form.linkModelId"
                show-search
                :filter-option="filterOption"
                placeholder="请选择已有表"
                allow-clear
                autocomplete="off"
                @change="linkModelIdChange"
              >
                <a-select-option
                  :value="item.metaModelId"
                  v-for="item in linkModelIdList"
                  :key="item.metaModelId"
                  :label="item.metaModelName + item.metaModelCode"
                  :title="item.metaModelName + '(' + item.metaModelCode + ')'"
                  >{{ item.metaModelName }} ({{ item.metaModelCode }})</a-select-option
                >
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="24">
        <a-row>
          <a-col :span="12">
            <a-form-item label="是否是主表" name="mainFlag">
              <a-radio-group v-model:value="form.mainFlag">
                <a-radio value="Y">主表</a-radio>
                <a-radio value="N">子表</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span="12" v-if="form.mainFlag == 'N'">
            <a-form-item label="子表中关联主表的字段:" name="subTableFieldCode">
              <a-input v-model:value="form.subTableFieldCode" allow-clear placeholder="请输入子表中关联主表的字段" />
            </a-form-item>
          </a-col>
          <a-col :span="12" v-if="form.mainFlag == 'N'">
            <a-form-item label="子表类型" name="subTableType">
              <a-radio-group v-model:value="form.subTableType">
                <a-radio :value="1">一对一</a-radio>
                <a-radio :value="2">一对多</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
      </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="SheetForm">
import { onMounted, reactive, ref } from 'vue';
import { ModelApi } from '../../api/ModelApi';
import { isNumberEnglish } from '@/utils/common/rules';
const props = defineProps({
  // 表单数据
  form: Object,
  isUpdate: Boolean
});

const validateMetaModelCode = async (_rule, value) => {
  if (value === '') {
    return Promise.reject('请输入表名');
  } else {
    if (isNumberEnglish(value)) {
      return Promise.resolve();
    } else {
      return Promise.reject('输入的表名格式不正确，请输入英文、数字、_');
    }
  }
};

// 验证规则
const rules = reactive({
  metaModelName: [{ required: true, message: '请输入中文名称', type: 'string', trigger: 'blur' }],
  metaModelCode: [{ required: true, validator: validateMetaModelCode, trigger: 'blur' }],
  systemCodeShow: [{ required: true, message: '请输入系统编码', type: 'string', trigger: 'blur' }],
  fldSort: [{ required: true, message: '请输入排序', type: 'number', trigger: 'blur' }],
  metaModelType: [{ required: true, message: '请选择是否新建表', type: 'number', trigger: 'blur' }],
  linkModelId: [{ required: true, message: '请选择已有表', type: 'string', trigger: 'change' }],
  mainFlag: [{ required: true, message: '请选择是否是主表', type: 'string', trigger: 'change' }],
  subTableType: [{ required: true, message: '请选择子表类型', type: 'number', trigger: 'change' }]
});

const formRef = ref(null);

// 选择已有表列表
const linkModelIdList = ref([]);

onMounted(() => {
  getLinkModelIdList();
});

// 获取选择所有表
const getLinkModelIdList = async () => {
  linkModelIdList.value = await ModelApi.getTotalTableList();
};

// 是否选择已有表改变
const metaModelTypeChange = val => {
  props.form.linkModelId = null;
};

// 自定义过滤
const filterOption = (input, option) => {
  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};

const linkModelIdChange = async val => {
  let data = linkModelIdList.value.find(item => item.metaModelId == val);
  if (data) {
    props.form.metaModelName = data.metaModelName;
    props.form.metaModelCode = data.metaModelCode;
  } else {
    props.form.metaModelName = '';
    props.form.metaModelCode = '';
  }
  await formRef.value.validateFields(['metaModelName', 'metaModelCode']);
};
</script>

<style></style>
