<template>
  <div class="app-container">
    <Custom-table :tableConfigData="tableConfigData" @handle-show="handleShow">
      <template v-slot:tableButton="scope">
        <el-button
          type="primary"
          size="small"
          @click="drawerData.handleShow(scope)"
          >授权</el-button
        >
      </template>
      <template v-slot:drawer>
        <el-form-item
          v-for="(item, index) in editData"
          :key="index"
          :label="item.label"
          :prop="item.prop"
        >
          <custom-form-item
            v-model:modValue="tableConfigData.drawerformData[item.prop]"
            :type="item.type"
            :inputType="item.inputValue"
            :options="tableData"
            :selectProp="item.selectProp"
          >
          </custom-form-item>
        </el-form-item>
      </template>
    </Custom-table>
    <el-drawer
      v-model="drawerData.drawerShow"
      title="授权"
      direction="rtl"
      :before-close="drawerData.handleClose"
    >
      <el-tree
        ref="tree"
        :data="drawerData.treeData"
        node-key="key"
        :default-expand-all="true"
        :check-strictly="true"
        show-checkbox
      />
      <el-button type="primary" @click="drawerData.onSubmit()">保存</el-button>
      <el-button @click="drawerData.handleClose">取消</el-button>
    </el-drawer>
  </div>
</template>

<script lang="ts">
import { ref, Ref, reactive } from "vue";
import { Scope } from "@/table/type";
import { roleConfigData } from "./tableConfigData/roleManage";
import {
  getQueryRoleMenu,
  getQueryTreeList,
  saveRole,
} from "@/services/api/role/roleAPI";
import type { ElTree } from "element-plus";
import { ElNotification } from "element-plus";
export default {
  name: "MenuManage",
  setup() {
    // type: 编辑的输入类型不填表示不加入编辑功能 inputType: input类型
    const tableConfigData: any = reactive(roleConfigData);

    const editData: Ref<any[]> = ref([]);

    tableConfigData.tableTitle.forEach((item: any) => {
      if (item.type) {
        editData.value.push(item);
      }
    });
    const tableData: Ref<any[]> = ref([]);
    const handleShow = ref(
      (params: { key: string; tableData: object[]; scope?: Scope }) => {
        tableData.value = params.tableData;
        const key = params.key;
        switch (key) {
          case "新增":
            tableConfigData.drawerformData = {
              id: "",
              roleCode: "",
              roleName: "",
              roleDesc: "",
            };
            break;
          case "编辑": {
            if (!params.scope) return false;
            const row = params.scope.row;
            tableConfigData.drawerformData = {
              id: row.id,
              roleCode: row.roleCode,
              roleName: row.roleName,
              roleDesc: row.roleDesc,
            };
            break;
          }
        }
      }
    );
    const tree = ref<InstanceType<typeof ElTree>>();

    const permissionParams: {
      permissionIds: Array<any>;
      lastPermissionIds: Array<any>;
      roleId: string;
    } = {
      permissionIds: [],
      lastPermissionIds: [],
      roleId: "",
    };
    // 授权抽屉数据
    const drawerData = reactive({
      drawerShow: false,
      treeData: [],
      handleClose: () => {
        drawerData.drawerShow = false;
      },
      handleShow: (scope: Scope) => {
        drawerData.drawerShow = true;
        permissionParams.roleId = scope.row.id;
        getQueryRoleMenu({ id: scope.row.id }).then((res: any) => {
          if (res.code === 200) {
            permissionParams.lastPermissionIds = res.data;
            tree.value!.setCheckedKeys(res.data, true);
          }
        });
      },
      onSubmit: () => {
        permissionParams.permissionIds = tree.value!.getCheckedKeys(false);
        saveRole(permissionParams).then((res: any) => {
          if (res.code === 200) {
            drawerData.handleClose();
            ElNotification({
              title: "温馨提示",
              message: "保存成功！",
              type: "success",
            });
          }
        });
      },
    });
    getQueryTreeList().then((res: any) => {
      if (res.code === 200) {
        drawerData.treeData = res.data.treeList;
      }
    });

    return {
      handleShow,
      tableConfigData,
      tableData,
      editData,
      drawerData,
      tree,
    };
  },
};
</script>
