<template>
  <el-dialog title="配置角色" :model-value="modelValue" :before-close="closed">
    <el-table max-height="380px" ref="multipleTableRef" :data="allRoleList" stripe style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column property="roleCode" width="100" label="角色编号" />
      <el-table-column property="roleName" width="120" label="角色名称" />
      <el-table-column property="roleDesc" show-overflow-tooltip label="角色描述" />
      <el-table-column prop="xtZhxgsj" width="160" label="更新时间">
        <template #default="{ row }">{{
          $filters.dateFilter(row.xtZhxgsj)
        }}</template>
      </el-table-column>
    </el-table>
    <template #footer>
      <div class="dialog-footer">

        <el-button type="primary" :loading="buttonLoading" @click="onComfirm">保存</el-button>
        <el-button @click="closed">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { defineProps, watch, ref, getCurrentInstance } from "vue";
import {
  getRoleList,
  saveRoleDeptInfo,
  selectRolePageByDept,
} from "@/api/user-manage";
const { proxy } = getCurrentInstance();
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 = () => {

  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      emits("update:modelValue", false);
    })
    .catch(() => {
      // catch error
    })

};

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(() => {
      ElMessage.success("操作成功");
      //通知
      emits("updateRole");
    })
    .finally(() => {
      buttonLoading.value = false;
    });
  emits("update:modelValue", false);
};

//当前用户角色
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>
