<template>
  <div class="l-from-body">
    <a-form
      ref="formRef"
      :rules="data.rules"
      :model="data.formData"
      labelAlign="left"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item label="上下级" name="id">
        <a-select
          v-model:value="data.formData.id"
          placeholder="请选择上下级"
          :options="data.options"
          @change="handleChange"
        >
        </a-select>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  const formRef = ref<any>();
  const labelCol = { span: 7 };
  const wrapperCol = { span: 17 };
  const data = reactive({
    formData: {
      name: '',
      type: '4',
      id: '',
    },
    rules: {
      id: [{ required: true, message: '请选择上下级' }],
    },
    options: [
      { value: '1', label: '上一级' },
      { value: '2', label: '上二级' },
      { value: '3', label: '上三级' },
      { value: '4', label: '上四级' },
      { value: '5', label: '上五级' },
      { value: '6', label: '下一级' },
      { value: '7', label: '下二级' },
      { value: '8', label: '下三级' },
      { value: '9', label: '下四级' },
      { value: '10', label: '下五级' },
    ],
  });
  function handleChange(val, option) {
    data.formData.name = option.label;
  }
  function validateForm() {
    formRef.value
      .validate()
      .then(async (values) => {
        return true;
      })
      .catch(async (error) => {
        return false;
      });
  }
  function getForm() {
    let rows = data.formData;
    return rows;
  }
  defineExpose({
    getForm,
    validateForm,
  });
</script>
<style scoped>
  .l-from-body {
    padding: 10px;
  }
</style>
