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

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

  const TextArea = Input.TextArea;

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

  const { optionsData: classOptions } = useInitData(authorizeClassListApi);

  const open = (row: any) => {
    visible.value = true;
    form.value = { ...row };
  };
  const handleOk = async () => {
    try {
      confirmLoading.value = true;
      const res = await authorizeClassItemUpdateApi(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="classId">
        <Select v-model:value="form.classId" allow-clear placeholder="请选择" :disabled="form.id" style="width: 100%">
          <SelectOption v-for="item in classOptions" :key="item.id" :value="item.id">
            {{ item.name }}
          </SelectOption>
        </Select>
      </FormItem>
      <FormItem label="名称" name="content">
        <Input v-model:value="form.content" />
      </FormItem>
      <FormItem label="代码" name="code">
        <Input v-model:value="form.code" />
      </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>
