<template>
  <div class="mainContentBox">
    <avue-crud
      ref="crudRef"
      v-model:search="search"
      v-model="form"
      :data="data"
      :option="option"
      v-model:page="page"
      @row-save="createRow"
      @row-update="updateRow"
      @row-del="deleteRow"
      @search-change="searchChange"
      @search-reset="resetChange"
      @size-change="dataList"
      @current-change="dataList"
      @selection-change="selectionChange"
    >
      <template #menu="{ row }">
        <el-button text type="primary" @click="editMenu(row)"
          >分配权限
        </el-button>
      </template>
    </avue-crud>
    <!-- 分配菜单弹窗  -->
    <el-dialog v-model="menuDialogVisible" title="权限菜单分配" width="700px">
      <el-scrollbar v-loading="loading" max-height="600px">
        <el-button type="primary" @click="toggleCheckAll">全选</el-button>
        <el-button @click="resetChecked">清空</el-button>
        <el-tree
          ref="treeRef"
          :data="menuList"
          :default-expand-all="true"
          :props="{
            children: 'children',
            label: 'menuName',
            value: 'id',
            disabled: '',
          }"
          node-key="id"
          show-checkbox
          check-strictly
          style="margin-top: 20px"
        >
          <template #default="{ data }">
            {{ data.menuName }}
          </template>
        </el-tree>
      </el-scrollbar>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleRoleMenuSubmit"
            >确 定
          </el-button>
          <el-button @click="menuDialogVisible = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useCrud } from "@/hooks/userCrud";
import {
  systemMenuList,
  bindedRoleMenuList,
  bindRoleMenuList,
} from "@/api/role/index";

// 传入一个url，后面不带/
const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
  useCrud({
    src: "/api/v1/qualityRoleInfo",
  });
const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
  Methords; //增删改查
const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
const crudRef = ref(null); //crudRef.value 获取avue-crud对象
const toggleCheckAll = () => {
  const allKeys = menuList.value.map((item) => item.id);
  treeRef.value.setCheckedKeys(allKeys);
};
const resetChecked = () => {
  treeRef.value.setCheckedKeys([], false);
};
onMounted(() => {
  // console.log("crudRef", crudRef)
  dataList();
});
const loading = ref(false);

const handleRoleMenuSubmit = async () => {
  loading.value = true;
  console.log(treeRef.value.getCheckedKeys());
  bindRoleMenuList({
    roleId: currentUserId.value,
    menuIds: treeRef.value.getCheckedKeys(),
  })
    .then(() => {
      ElMessage.success("权限分配成功");
    })
    .finally(() => {
      loading.value = false;
      menuDialogVisible.value = false;
    });
};
// 编辑权限
const currentUserId = ref("");
const treeRef = ref(null);
const menuDialogVisible = ref(false);
const menuList = ref([]);
const editMenu = async (row) => {
  currentUserId.value = row.id;
  menuDialogVisible.value = true;
  // 清空已选菜单
  treeRef.value && treeRef.value.setCheckedKeys([]);
  let allMenu = await systemMenuList();
  menuList.value = allMenu.data ?? [];
  let selectMenu = await bindedRoleMenuList(row.id);
  if (selectMenu.data && selectMenu.data.length > 0) {
    treeRef.value && treeRef.value.setCheckedKeys(selectMenu.data);
  }
};

const IRTableDialogRef = ref(null);
const onClickEdit = (row) => {
  IRTableDialogRef.value && IRTableDialogRef.value.openPrintDialog(row);
};

// 设置表格列或者其他自定义的option
option.value = Object.assign(option.value, {
  searchEnter: true,
  viewBtn: false,
  addBtn: true,
  editBtn: true,
  delBtn: true,
  column: [
    {
      label: "角色编码",
      search: true,
      prop: "roleCode",
      rules: [
        {
          required: true,
          message: "请输入角色编码",
          trigger: "blur",
        },
      ],
    },
    {
      label: "角色名称",
      search: true,
      prop: "roleName",
      rules: [
        {
          required: true,
          message: "请输入角色名称",
          trigger: "blur",
        },
      ],
    },
    {
      label: "状态",
      prop: "state",
      type: "radio", //类型为单选框
      dicData: [
        {
          label: "启用",
          value: 0,
        },
        {
          label: "禁用",
          value: 1,
        },
      ],
      value: 0,
    },
  ],
});
</script>
