<script lang="ts" setup>
  import { ref } from 'vue';
  import { Modal, Form, FormItem, Input, InputNumber, message } from 'ant-design-vue';
  import { authorizeClassUpdateApi } from '/@/api/authorize/class';

  const emits = defineEmits(['initTableData']);

  const TextArea = Input.TextArea;

  const visible = ref(false);
  const confirmLoading = ref(false);
  const form = ref<any>({});

  const open = (row: any) => {
    visible.value = true;
    form.value = { ...row };
  };
  const handleOk = async () => {
    try {
      confirmLoading.value = true;
      const res = await authorizeClassUpdateApi(form.value);
      console.log(res);
      message.success('操作成功');
      emits('initTableData');
      visible.value = false;
      confirmLoading.value = false;
    } catch (e) {
      console.log(e);
      confirmLoading.value = false;
    }
  };

  defineExpose({
    open,
  });
</script>

<template>
  <Modal
    v-model:visible="visible"
    :title="form.id ? '编辑接口分类' : '新增接口分类'"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
  >
    <Form :model="form" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
      <FormItem label="名称" name="name">
        <Input v-model:value="form.name" />
      </FormItem>
      <FormItem label="排序" name="sort">
        <InputNumber v-model:value="form.sort" style="width: 100%" />
      </FormItem>
      <FormItem label="备注" name="note">
        <TextArea v-model:value="form.note" :auto-size="{ minRows: 3 }" />
      </FormItem>
    </Form>
  </Modal>
</template>
