<template>
  <div>
    <!-- <div class="export-button pl-10">
      <el-button v-has="99102" type="primary" @click="onClick_add">
        创建账号
      </el-button>
    </div> -->
    <el-table
      border
      :data="tableData"
      style="
        width: 80%;
        font-size: 20px;
        overflow: hidden;
        border-radius: 4px;
        margin: 20px 0 0 50px;
      "
    >
      <el-table-column prop="id" label="ID" width="180" align="center" />
      <el-table-column prop="name" label="角色名" width="280" align="center" />
      <el-table-column
        prop="description"
        label="描述"
        width="400"
        align="center"
      />
      <el-table-column fixed="right" label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="handleChange(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="dialogFormVisible"
      title="编辑角色"
      width="500"
      @close="handleClose"
    >
      <div></div>
      <el-tree
        style="max-width: 600px"
        :data="permissionData"
        show-checkbox
        node-key="id"
        :default-checked-keys="currentCheckedKeys"
        :props="defaultProps"
        ref="tree"
      />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="submitChange"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick } from "vue";
const { proxy } = getCurrentInstance();
const defaultProps = {
  children: "children",
  label: "name",
};
let tableData = ref([]);
let total = ref(0);
let dialogFormVisible = ref(false);
let permissionData = ref([]);
let form = reactive({
  role_id: 0,
  name: "",
  description: "",
  permission_ids: 0,
});
let currentCheckedKeys = ref([]);
// 使用 ref 函数创建一个引用对象
const tree = ref(null);

const init = () => {
  proxy.$http.get("/open-platform/user/roles").then((res) => {
    console.log(res, "11");
    if (res.records && res.records.length > 0) {
      tableData.value = res.records
    } else {
      tableData.value = [];
    }
    total.value = res.total;
  });
};
init();
const getPermission = () => {
  proxy.$http.get("/open-platform/user/permissions").then((res) => {
    if (res.records && res.records.length > 0) {
      permissionData.value = res.records;
    } else {
      permissionData.value = [];
    }
  });
};
getPermission();
const handleChange = (row) => {
  dialogFormVisible.value = true;
  form.name = row.name;
  form.role_id = row.id;
  form.description = row.description;
  currentCheckedKeys.value = row.permission_ids ? [...row.permission_ids] : [];
};
const handleClose = () => {
  dialogFormVisible.value = false;
  nextTick(() => {
    tree.value.setCheckedKeys([]);
  });
};
const submitChange = () => {
    form.permission_ids = tree.value.getCheckedKeys();
    proxy.$http
      .post("/open-platform/user/roles", form)
      .then((res) => {
        proxy.$message.success("修改成功");
        dialogFormVisible.value = false;
        init();
      })
      .catch((err) => {
        proxy.$message.error("修改失败");
      });
};
</script>

<style lang="less" scoped>
:deep(.el-table th) {
  background-color: #eef6ff !important; /* 设置你想要的背景颜色 */
  color: #333; /* 设置表头文字颜色 */
  font-weight: bold; /* 设置表头文字加粗 */
}
:deep(.el-table .el-table__cell) {
  padding: 10px 0 !important;
}
</style>
