<template>
  <a-modal
    :width="425"
    :maskClosable="false"
    :visible="props.visible"
    :confirm-loading="loading"
    :forceRender="true"
    title="表单属性"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    @ok="save"
    @close="updateVisible(false)"
  >
    <a-form layout="vertical">
      <a-form-item>
        <template #label>
          <span>表单宽度</span>
          <a-tooltip>
            <template #title>不填或者为空，默认是100%</template>
            <question-circle-outlined style="margin: 0 3px" />
          </a-tooltip>
          (px):
        </template>
        <a-input-number v-model:value="formConfig.config.formWidth" placeholder="请输入表单宽度" class="w-full" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup name="FormParamsConfig">
import { ref, onMounted } from 'vue';

const props = defineProps({
  visible: Boolean,
  formConfig: Object
});

const emits = defineEmits(['update:visible']);
// 弹框加载
const loading = ref(false);

onMounted(() => {});

// 更改弹框状态
const updateVisible = value => {
  emits('update:visible', value);
};

// 点击保存
const save = () => {
  updateVisible(false);
};
</script>

<style lang="less" scoped></style>
