<template>
  <a-modal v-model:value="data.isShow" title="新增角色" @ok="handleOkFunc">
    <a-form
      ref="infoFormModel"
      :model="data.saveObject"
      :label-col="{span: 4}"
      :wrapper-col="{span: 15}"
      :rules="data.rules"
    >
      <a-form-item label="角色名称：" name="roleName">
        <a-input v-model:value="data.saveObject['roleName']" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { API_URL_ROLE_LIST, req } from '@/api/manage'
import { reactive,ref } from 'vue'
import {message} from 'ant-design-vue' 

  const props = defineProps({
    callbackFunc: { type: Function,default:null }
  })

    const infoFormModel = ref()
    const data =  reactive({
      isShow: false, // 是否显示弹层/抽屉
      saveObject: {}, // 数据对象

      rules: {
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ]
      }
    })

defineExpose({show})
   function show  () { // 弹层打开事件
      data.saveObject = {} // 数据清空
      if (infoFormModel.value ) {
       infoFormModel.value.resetFields()
      }
      data.isShow = true
    }

   function handleOkFunc() { // 点击【确认】按钮事件
     infoFormModel.value.validate().then(
        req.add(API_URL_ROLE_LIST, data.saveObject).then(res => {
              message.success('新增成功')
              data.isShow = false
              // 刷新列表
              props.callbackFunc()
            })
     )
    }


</script>
