<template>
  <a-drawer :width="740" :visible="visible" @ok="handleOk" @cancel="handleCancel" unmountOnClose>
    <template #title>
      <h3>新增数据库虚拟表字段</h3>
    </template>

    <div class="content">
      <a-form :model="formData">
        <a-form-item label="数据源表" :label-col-props="{ span: 24 }">
          <a-select v-model:value="formData.table_id" placeholder="请选择数据源表">
            <a-option value="item.id">1</a-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="数据源字段"
          :label-col-props="{ span: 24, 'justify-content': 'flex-start' }"
        >
          <a-input></a-input>
        </a-form-item>
        <a-form-item
          label="数据源字段类型"
          :label-col-props="{ span: 24, 'justify-content': 'flex-start' }"
        >
          <a-select v-model:value="formData.table_id" placeholder="请选择数据源表">
            <a-option value="item.id">1</a-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="数据源字段描述"
          :label-col-props="{ span: 24, 'justify-content': 'flex-start' }"
        >
          <a-input placeholder="请输入字段描述"></a-input>
        </a-form-item>
        <a-form-item
          label="是否为主键"
          :label-col-props="{ span: 24, 'justify-content': 'flex-start' }"
        >
          <a-switch></a-switch>
        </a-form-item>
        <a-form-item
          label="是否必填"
          :label-col-props="{ span: 24, 'justify-content': 'flex-start' }"
        >
          <a-switch></a-switch>
        </a-form-item>
      </a-form>
    </div>
  </a-drawer>
</template>
<script setup>
let visible = defineModel('visible', { default: false })

let formData = ref({})
const handleClick = () => {
  //   emit('update:visible', false)
}
const handleOk = () => {
  visible.value = false
}
const handleCancel = () => {
  visible.value = false
}
</script>

<style scoped lang="scss">
::v-deep(.arco-form-item-label-col) {
  justify-content: flex-start !important;
}
</style>
