<template>
  <el-dialog title="配置角色" :model-value="modelValue" @close="closed">
    <!-- <el-checkbox-group v-model="userRoleTitleList">
      <el-checkbox v-for="item in allRoleList" :key="item.id" :label="item.roleName" />
    </el-checkbox-group>-->
    <el-table max-height="380px" ref="multipleTableRef" :data="allRoleList" style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column property="orderNo" label="角色编号" />
      <el-table-column property="roleName" label="角色名称" />
      <el-table-column prop="xtZhxgsj" label="更新时间">
        <template #default="{ row }">{{ $filters.dateFilter(row.xtZhxgsj) }}</template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closed">取消</el-button>
        <el-button type="primary" :loading="buttonLoading" @click="onComfirm">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { defineProps, watch, ref, onMounted, nextTick } from "vue";
import {
  getRoleList,
  saveRoleDeptInfo,
  selectRolePageByDept,
  getUserRoleList,
  grantRoleToUser
} from "@/api/user-manage";
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  deptId: {
    type: String,
    required: true
  }
});
const buttonLoading = ref(false)
const emits = defineEmits(["update:modelValue", "updateRole"]);
const closed = () => {
  emits("update:modelValue", false);
};

const multipleTableRef = ref(null)

const multipleSelection = ref([]);
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};

// 为用户分配角色
const onComfirm = () => {
  const ids = multipleSelection.value.map((item) => {
    return item.id;
  });
  let params = {
    deptId: props.deptId,
    roleIds: ids
  };
  buttonLoading.value = true;
  saveRoleDeptInfo(params).then((res) => {
    ElMessage.success("操作成功");
    //通知
    emits("updateRole");
  }).finally(() => {
    buttonLoading.value = false;
  }); ;
  closed();
};

//当前用户角色
const userRoleTitleList = ref([]);
const getUserRoles = async () => {
  const res = await selectRolePageByDept({ current: 1, size: 9999, deptId: props.deptId });
  userRoleTitleList.value = res.records.map((item) => item.roleId);
  const hx = [];
  allRoleList.value.forEach(item => {
    if (userRoleTitleList.value.indexOf(item.id)!=-1) {
      hx.push(item)
    }
  })
  toggleSelection(hx)
};

const toggleSelection = (rows) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value.toggleRowSelection(row, true)
    })
  } else {
    multipleTableRef.value.clearSelection()
  }
}

//所有角色
const allRoleList = ref([]);
const getAllRoleList = async () => {
  const params = {
    page: 1,
    size: 999
  };
  const res = await getRoleList(params);
  allRoleList.value = res?.records;
  getUserRoles();
};

watch(
  () => props.deptId,
  (val) => {
    if (val) {
      getAllRoleList();
    }
  }
);
</script>

<style>
</style>
