<template>
  <div>
    <el-dialog
    v-model="state.showDialog"
    destroy-on-close
    :title="innerTitle"
    append-to-body
    draggable
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="780px"
  >
    <div>
      <el-radio-group v-model="selectedApp">
        <el-radio v-for="(item,index) in state.permissionTreeData" :key="index" :label="item.id">{{ item.name }}</el-radio>
      </el-radio-group>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="onCancel" size="default">取 消</el-button>
        <el-button type="primary" @click="onSure" size="default" :loading="state.sureLoading">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  <set-role-menu ref="setRoleMenuRef"></set-role-menu>
  </div>

</template>

<script lang="ts" setup name="admin/role/components/set-role-menu">
import { ref, reactive, getCurrentInstance, computed,defineAsyncComponent } from 'vue'
import { RoleGetListOutput, PermissionAssignInput,OauthApply } from '/@/api/admin/data-contracts'
import { PermissionApi } from '/@/api/admin/Permission'
import { ElMessage, ElTree } from 'element-plus'
import { listToTree } from '/@/utils/tree'
import { cloneDeep } from 'lodash-es'
const SetRoleMenu = defineAsyncComponent(() => import('../components/set-role-menu.vue'))
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
})
const setRoleMenuRef = ref()
const innerTitle = computed(() => {
  return props.title ? props.title : state.roleName ? `选择【${state.roleName}】应用权限` : '设置应用权限'
})

const state = reactive({
  showDialog: false,
  loading: false,
  sureLoading: false,
  permissionTreeData: [] as Array<OauthApply>,
  roleId: 0 as number | undefined,
  roleName: '' as string | undefined | null,
  checkedKeys: [],
})
const selectedApp=ref('')

const { proxy } = getCurrentInstance() as any

// 打开对话框
const open = async (role: RoleGetListOutput) => {
  state.roleId = role.id
  state.roleName = role.name
  proxy.$modal.loading()
  await onQuery()
  //await getAppPermissionList()
  proxy.$modal.closeLoading()
  state.showDialog = true
}

// 关闭对话框
const close = () => {
  state.showDialog = false
}

const onQuery = async () => {
  state.loading = true

  const res = await new PermissionApi().getApplyInfo({ id:state.roleId }).catch(() => {
    state.loading = false
  })
  if (res && res.data && res.data.length > 0) {
    state.permissionTreeData = res.data
  } else {
    state.permissionTreeData = []
  }
  state.loading = false
}

const customNodeClass = (data: any) => {
  return data.row ? 'is-penultimate' : ''
}

// 取消
const onCancel = () => {
  state.showDialog = false
}

// 确定
const onSure = async () => {
  state.sureLoading = true
  if(selectedApp.value===''){
    ElMessage.error('请选择应用')
    state.sureLoading = false
  }else{
    const input = { id: state.roleId, name:state.roleName }
    // const res = await new PermissionApi().roleMenu(input, { showSuccessMessage: true }).catch(() => {
    //   state.sureLoading = false
    // })

    state.sureLoading = false
    state.showDialog = false
    // if (res?.success) {
    //   state.showDialog = false
    // }
    setRoleMenuRef.value.open(input,selectedApp.value)
  }
}

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

<style scoped lang="scss">
:deep(.el-dialog__body) {
  padding: 5px 10px;
}
:deep(.is-penultimate) {
  .el-tree-node__children {
    padding-left: 65px;
    white-space: pre-wrap;
    line-height: 100%;

    .el-tree-node {
      display: inline-block;
    }

    .el-tree-node__content {
      padding-left: 12px !important;
      padding-right: 12px;

      .el-tree-node__expand-icon.is-leaf {
        display: none;
      }
    }
  }
}
</style>
