<template>
  <el-descriptions
    title="角色信息"
    style="padding: 15px"
    border
    size="large"
    :column="2">
    <el-descriptions-item>
      <template #label> 角色名 </template>{{ theRoleInfo.name }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>是否启用 </template>
      <el-tag type="success" v-if="theRoleInfo.roleState">启用</el-tag>
      <el-tag type="danger" v-else>禁用</el-tag>
    </el-descriptions-item>
  </el-descriptions>
  <el-row>
    <el-col>
      <label>角色权限：</label>
      <el-tree
        :data="roles"
        :props="treeProps"
        show-checkbox
        node-key="id"
        :default-checked-keys="theRoleInfo.values?.split(',')"
        default-expand-all />
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { systemMenueType } from "@/types/systemMenue";
import { roleType } from "@/types/role";
import { ref, onMounted } from "vue";
import api from "@/lib/request";
const props = defineProps<{
  data: roleType;
}>();
const role = props.data;
let roles = ref<systemMenueType[]>([]);
let loading = ref(true);
let treeProps = { label: "name", children: "children" };
let theRoleInfo = ref<roleType>({});

theRoleInfo.value = { ...props.data };

onMounted(async () => {
  let respone = await api().get("/system-menue/list");
  roles.value = respone.data.list;
  loading.value = false;
});
</script>
<style lang="scss" scoped>
:deep(.el-descriptions__label) {
  display: flex;
  align-items: center;
  .el-icon {
    margin: 0 5px;
  }
}
</style>
