<template>
  <a-drawer
    v-model:visible="data.isShow" 
    :title=" data.isAdd ? '新增角色' : '修改角色' "
    width="600"
    :mask-closable="false"
    @close="data.isShow = false"
  >
    <a-form
      ref="infoFormModel" 
      :model="data.saveObject"
      :label-col="{span: 4}"
      :rules="data.rules"
    >
      <a-form-item label="角色名称：" name="roleName">
        <a-input :disabled="!$access('ENT_UR_ROLE_EDIT')" v-model:value="data.saveObject['roleName']" />
      </a-form-item>
    </a-form>

    <!-- 角色权限分配 -->
    <RoleDist ref="roleDist" />

    <div class="drawer-btn-center">
      <a-button
        :style="{ marginRight: '8px' }" 
       
        @click="data.isShow = false"
      >
        <close-outlined />
        取消
      </a-button>
      <a-button
        type="primary"
        :loading="data.confirmLoading" 
        
        @click="handleOkFunc"
      >
        <check-outlined />
        保存
      </a-button>
    </div>
  </a-drawer>
</template>

<script setup lang="ts">
import { API_URL_ROLE_LIST, req } from '@/api/manage'
import RoleDist from './RoleDist.vue'
import {ref,reactive,nextTick,getCurrentInstance} from 'vue'
import {message} from 'ant-design-vue'
const { $infoBox,$access } = getCurrentInstance()!.appContext.config.globalProperties
const  props= defineProps ({
    callbackFunc: { type: Function,default:null }
  })
    const roleDist = ref()
    const infoFormModel = ref()
    const data =  reactive({
      confirmLoading: false, // 显示确定按钮loading图标
      isAdd: true, // 新增 or 修改页面标识
      isShow: false, // 是否显示弹层/抽屉
      saveObject: {}, // 数据对象
      recordId: null, // 更新对象ID
      rules: {
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ]
      }
    })

defineExpose({show})
 function show(recordId) { // 弹层打开事件
      data.isAdd = !recordId
      data.saveObject = {} // 数据清空
      data.confirmLoading = false // 关闭loading

      if (infoFormModel.value !== undefined) {
        infoFormModel.value.resetFields()
      }
      if (!data.isAdd) { // 修改信息 延迟展示弹层
        data.recordId = recordId
        req.getById(API_URL_ROLE_LIST, recordId).then(res => { data.saveObject = res })
        data.isShow = true
      } else {
        data.isShow = true // 立马展示弹层信息
      }
      // 初始化角色权限分配功能
       nextTick(()=>{
            roleDist.value.initTree(recordId)  
         })
    }

 function handleOkFunc () { // 点击【确认】按钮事件
        infoFormModel.value.validate().then(valid =>{
            data.confirmLoading = true // 显示loading

            // 保存选择的权限信息
            const selectedEntIdList = roleDist.value.getSelectedEntIdList()
            data.saveObject['entIdListStr'] = selectedEntIdList ? JSON.stringify(selectedEntIdList) : ''

            if (data.isAdd) {
              req.add(API_URL_ROLE_LIST, data.saveObject).then(res => {
                message.success('新增成功')
                data.isShow = false
                props.callbackFunc() // 刷新列表
              }).catch(res => { data.confirmLoading = false })
            } else {
              req.updateById(API_URL_ROLE_LIST, data.recordId, data.saveObject).then(res => {
                message.success('修改成功')
                data.isShow = false
                props.callbackFunc() // 刷新列表
              }).catch(res => { data.confirmLoading = false })
            }
        })
    }

</script>
