<template>
  <div>
    <el-drawer v-model="state.dialog.isShowDialog" :close-on-click-modal="false" width="400px" draggable>
      <template #header="{ titleId, titleClass }">
        <div class="my-header">
          <span>角色管理 / 权限管理</span>
        </div>
      </template>
      <div class="treecontent">
        <div class="treecontenttitle">当前授权角色：{{ state.username }}</div>
        <el-tree
          :data="state.data"
          ref="tree"
          show-checkbox
          node-key="id"
          default-expand-all
          :check-strictly="true"
          :default-checked-keys="state.sedidList"
          :props="defaultProps"
          @check="checkchange"
        >
          <template #default="{ node }">
            <span :title="node.label">
              <span>{{ node.label }}</span>
            </span>
          </template>
        </el-tree>
      </div>
      <template #footer>
        <div class="footerdrawer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts" name="systemRoleDialog">
import { reactive, ref } from "vue";
import { roleApi } from "/@/api/sys/role";
import { menuApi } from "/@/api/sys/menu";
import { ElAlert, ElMessage, ElNotification } from "element-plus";

// 定义子组件向父组件传值/事件
const emit = defineEmits(["refresh"]);
const defaultProps = {
  children: "children",
  label: "title",
};

async function loadData() {
  //  先拿到菜单
  let items = await menuApi().getMenuList();
  state.data = items.data;
  let item = await roleApi().selectroleOne(state.id);
  // // 筛选出已经选择过的菜单
  state.sedidList = item.data.menuList.map((res: any) => {
    return res.id;
  });
}

const checkchange = (node: any, data: any) => {
  //旧的
  const _list = data.checkedKeys;
  console.log(_list)
  state.formsedid = _list.map((res: any) => {
    return { id: res };
  });
};

// 定义变量内容
const state = reactive({
  username: "",
  sedidList: [],
  data: [],
  formsedid: [] as Array<any>,
  id: 0,
  dialog: {
    isShowDialog: false,
    type: "",
    title: "",
    submitTxt: "保存",
  },
});

// 打开弹窗
const openDialog = (row: any) => {
  let rows = Object.assign({}, row);
  state.id = rows.id;
  state.sedidList = [];
  state.username = rows.name;
  loadData();
  state.dialog.isShowDialog = true;
};

// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
  closeDialog();
};
// 提交
const onSubmit = async () => {
  if (state.formsedid.length == 0) return ElMessage.error("请选择授权的权限");
  //   授权
  let data = state.formsedid;
  let item = await roleApi().grantrole({ id: state.id, menuList: data });
  if (item.code == 200) {
    ElMessage.success(item.msg);
    closeDialog();
    emit("refresh");
  } else {
    ElNotification({
      title: "提示",
      message: item.msg,
      duration: 0,
      type: "error",
    });
  }
};

// 暴露变量
defineExpose({
  openDialog,
});
</script>

<style scoped lang="scss">
.footerdrawer {
  border-top: 1px solid #eee;
  padding: 20px;
}
.treecontent {
  padding: 20px;
  .treecontenttitle {
    font-size: 14px;
    padding-bottom: 20px;
  }
}
</style>
