<!-- 角色管理 -->
<template>
  <div class="detail_container">
    <bg-breadcrumb></bg-breadcrumb>
    <div class="main_container">
      <bg-filter-group @search="changeSearch" v-model="filter.search" placeholder="请输入角色名称">
        <template v-slot:left_action>
          <div class="apaas_button">
            <el-button type="primary" @click="register">
              <bg-icon style="font-size: 12px; color: #fff; margin-right: 8px" icon="#bg-ic-add"></bg-icon>
              新增
            </el-button>
            <el-button type="primary" @click="deleteRows"> 批量删除 </el-button>
            <div class="select_text">
              <span>已选择</span>
              <span class="num">{{ selection.length }}</span>
              <span>项</span>
              <span class="can_click_text" @click="clearRoleSelection">清空</span>
            </div>
          </div>
        </template>
      </bg-filter-group>
      <div class="table_container">
        <div class="table bg-scroll">
          <bg-table
            ref="Bgtable"
            :headers="headers"
            :rows="tableRows"
            :select="true"
            :stripe="true"
            canEdit
            canEditFlag="state"
            @selectAc="selectRows">
            <template v-slot:state="{ row }">
              <bg-switch
                @click="changeUseRow(row)"
                :labels="['否', '是']"
                :values="[0, 1]"
                v-model="row.state"
                :disabled="row.role_type == 1 || row.role_type == 2" />
            </template>
            <template v-slot:created_time="{ row }">
              {{ row.created_time.split("+")[0].replace("T", " ").replace("Z", " ") }}
            </template>
            <template v-slot:action="{ row }">
              <bg-table-btn
                class="can_click_text"
                :click="
                  () => {
                    edit_row(row);
                  }
                ">
                编辑
              </bg-table-btn>
              <bg-table-btn
                class="can_click_text"
                :click="
                  () => {
                    distribute_user(row);
                  }
                "
                :disabled="row.cant_allot == 1">
                分配用户
              </bg-table-btn>
              <bg-table-btn
                class="can_click_text"
                :click="
                  () => {
                    delete_row(row);
                  }
                "
                :disabled="row.state == 1 || row.role_type == 1 || row.role_type == 2 || row.user_count > 0">
                删除
              </bg-table-btn>
            </template>
          </bg-table>
        </div>
        <bg-pagination
          :page="filter.page"
          :size="filter.limit"
          :total="tableTotal"
          @change-page="changePage"
          @change-size="changeSize">
        </bg-pagination>
      </div>
    </div>
    <!-- 删除弹窗 -->
    <el-dialog class="dialog_box" title="提示" v-model="delDialog" width="400px">
      <div>确定要删除选中的数据吗？</div>
      <template v-slot:footer>
        <div class="apaas_button">
          <el-button type="default" @click="delDialog = false">取 消</el-button>
          <el-button type="primary" @click="deleteData">确 定</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 分配用户 -->
    <el-dialog class="distribute_dialog" title="分配用户" v-model="distributeDialog" width="1062px">
      <div class="distribute_box">
        <div class="topFilter">
          <div class="left">
            <span>已选择</span>
            <span class="num">{{ userSelection.length }}</span>
            <span>项</span>
            <span class="can_click_text" @click="clearUserSelection">清空</span>
          </div>
          <div class="right">
            <el-cascader
              v-model="userFilter.organization_id"
              :options="userOrgList"
              placeholder="请选择组织"
              :props="{
                expandTrigger: 'hover',
                label: 'name',
                value: 'id',
                emitPath: false,
                checkStrictly: true,
                children: 'Child',
              }"
              :clearable="true"
              collapse-tags
              style="width: 200px; margin-right: 30px">
              <template #default="{ data }">
                <span>{{ data.name }}</span>
              </template>
            </el-cascader>
            <el-input
              v-model.trim="userFilter.search"
              placeholder="请输入内容"
              style="width: 200px; margin-right: 30px"
              :prefix-icon="Search" />
            <el-button style="margin-right: 15px" type="primary" @click="searchAction">查询</el-button>
            <el-button type="default" @click="clearAction">重置</el-button>
          </div>
        </div>
        <div class="table_box">
          <div class="user_table bg-scroll">
            <bg-table
              ref="userTable"
              :headers="userHeaders"
              :rows="userRows"
              :select="true"
              :stripe="true"
              @selectAc="selectUserRows">
              <template v-slot:is_admin="{ row }">
                {{ ["", "业务系统账号", "组织管理员账号", "平台用户账号"][row.is_admin] }}
              </template>
            </bg-table>
          </div>
          <bg-pagination
            :page="userFilter.page"
            :size="userFilter.limit"
            :total="total"
            @change-page="changeUserPage"
            @change-size="changeUserSize">
          </bg-pagination>
        </div>
      </div>
      <template v-slot:footer>
        <div class="apaas_button">
          <el-button type="default" @click="distributeDialog = false">取 消</el-button>
          <el-button type="primary" @click="distribute">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { Search } from "@element-plus/icons-vue";
import { reactive, toRefs, ref, computed, onBeforeMount, nextTick } from "vue";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
const router = useRouter();
const Bgtable = ref(null);
const userTable = ref(null);
const state = reactive({
  filter: {
    page: 1,
    limit: 10,
    search: "",
  },
  headers: [
    {
      label: "角色名",
      prop: "role_name",
      width: 220,
    },
    {
      label: "创建人",
      prop: "created_by",
      width: 220,
    },
    {
      label: "创建时间",
      prop: "created_time",
      width: 276,
    },
    {
      label: "账号数",
      prop: "user_count",
    },
    {
      label: "描述",
      prop: "role_desc",
      minWidth: 346,
    },
    {
      label: "是否启用",
      prop: "state",
      width: 95,
    },
    {
      label: "操作",
      prop: "action",
      width: 220,
      fixed: "right",
    },
  ],
  tableRows: [],
  tableTotal: 0,
  actionRow: {},
  selection: [],
  delDialog: false,
  delType: 1, // 删除类型  1-单条删除 2-批量删除
});
const userState = reactive({
  userFilter: {
    organization_id: "",
    search: "",
    limit: 10,
    page: 1,
  },
  orgList: [],
  userHeaders: [
    {
      label: "帐号",
      prop: "system_account",
    },
    {
      label: "类型",
      prop: "is_admin",
    },
    {
      label: "用户手机号",
      prop: "contact_phone",
    },
    {
      label: "所属组织",
      prop: "organization_name",
    },
  ],
  userRows: [],
  total: 0,
  userSelection: [],
  distributeDialog: false, // 分配用户弹窗
});
const userOrgList = computed(() => {
  let temp = [];
  switch (state.actionRow.role_type) {
    case 0:
      temp = userState.orgList;
      break;
    case 1:
      temp = userState.orgList.slice(1, userState.orgList.length);
      break;
    case 2:
      temp = userState.orgList.slice(0, 1);
      break;
    default:
      break;
  }
  return temp;
});
// 获取角色列表
const getRoleRows = () => {
  let params = { ...state.filter };
  axios.get(`/v1/api/role/list`, { params }).then((res) => {
    if (res.data.code == 200) {
      state.tableRows = res.data.data || [];
      state.tableTotal = res.data.total;
    } else {
      ElMessage.error(res.data.data);
    }
  });
};
//获取组织树
const getOrgList = () => {
  axios.get(`/v1/api/org/tree`).then((res) => {
    if (res.data.code == 200) {
      userState.orgList = res.data.data || [];
    } else {
      ElMessage.error(res.data.data);
    }
  });
}; // 获取组织列表
const changePage = (val) => {
  state.filter.page = val;
  getRoleRows();
}; // 改变页码

const changeSize = (val) => {
  state.filter.limit = val;
  changePage(1);
}; // 改变每页条数

const changeSearch = (val) => {
  state.filter.search = val;
  changePage(1);
}; // 表格关键字筛选

const changeUseRow = (row) => {
  //内置角色不能删除和编辑
  if (row.role_type == 1 || row.role_type == 2) {
    return;
  }
  axios.post(`/v1/api/role/state/${row.id}/${row.state}`).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success(res.data.msg);
      changePage(1);
    } else {
      ElMessage.error(res.data.data);
      row.state = row.state == 0 ? 1 : 0;
    }
  });
}; // 更改启用禁用状态

const selectRows = (data) => {
  state.selection = data.selection;
}; // 表格多选

const clearRoleSelection = () => {
  Bgtable.value.clearTable();
};

const register = () => {
  router.push("/authority/role/add");
}; // 新增角色

const edit_row = (row) => {
  router.push({
    path: "/authority/role/edit",
    query: {
      id: row.id,
    },
  });
}; // 编辑角色

const distribute_user = (row) => {
  clearAction(1);
  userState.distributeDialog = true;
  state.actionRow = row;
  getUserList();
}; // 分配角色按钮

const getUserList = () => {
  nextTick(() => {
    clearUserSelection();
  });
  let params = {
    limit: userState.userFilter.limit,
    page: userState.userFilter.page,
    search: userState.userFilter.search,
    organization_id: userState.userFilter.organization_id,
    role_id: state.actionRow.id,
  };
  axios.get(`/v1/api/role/allotment/list`, { params }).then((res) => {
    if (res.data.code == 200) {
      userState.userRows = res.data.data || [];
      userState.total = res.data.total;
      nextTick(() => {
        userState.userRows.forEach((e) => {
          if (e.is_bind == 1) {
            userTable.value.toggleRowSelection(e, true);
          }
        });
      });
    } else {
      ElMessage.error(res.data.data);
    }
  });
};
const changeUserPage = (val) => {
  userState.userFilter.page = val;
  getUserList();
};

const changeUserSize = (val) => {
  userState.userFilter.limit = val;
  changeUserPage(1);
};

const searchAction = () => {
  changeUserPage(1);
};

const clearAction = (type) => {
  userState.userFilter = {
    organization_id: "",
    search: "",
    limit: 10,
    page: 1,
  };
  if (type != 1) {
    changeUserPage(1);
  }
};

const clearUserSelection = () => {
  userTable.value.clearTable();
};

const selectUserRows = (data) => {
  userState.userSelection = data.selection;
};

const distribute = () => {
  let user_ids = [];
  userState.userSelection.forEach((e) => {
    user_ids.push(e.id);
  });
  let params = {
    id: state.actionRow.id,
    user_ids: user_ids,
  };
  axios.post(`/v1/api/role/allotment/user`, params).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success(res.data.msg);
      userState.distributeDialog = false;
      changePage(1);
    } else {
      ElMessage.error(res.data.data);
    }
  });
};

const delete_row = (row) => {
  state.actionRow = row;
  state.delType = 1;
  state.delDialog = true;
}; // 删除角色

const deleteRows = () => {
  if (state.selection.length == 0) {
    ElMessage.error("请先选择要删除的数据");
  } else {
    state.delType = 2;
    state.delDialog = true;
  }
}; // 批量删除按钮

const deleteData = () => {
  let ids = [];
  if (state.delType == 1) {
    ids.push(state.actionRow.id);
  } else {
    state.selection.forEach((e) => {
      ids.push(e.id);
    });
  }
  let params = {
    ids: [...ids],
  };
  axios.delete(`/v1/api/role/delete`, { data: { ids: [...ids] } }).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success(res.data.msg);
      state.delDialog = false;
      changePage(1);
    } else {
      ElMessage.error(res.data.data);
    }
  });
};
onBeforeMount(() => {
  getRoleRows();
  getOrgList();
});

const { filter, headers, tableRows, tableTotal, delDialog, selection } = toRefs(state);

const { userFilter, orgList, userHeaders, userRows, total, userSelection, distributeDialog } = toRefs(userState);
</script>

<style lang="scss" scoped>
.detail_container {
  width: 100%;
  padding: 0 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  .main_container {
    flex-grow: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    background-color: #fff;
    box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
    border-radius: 6px;
    margin: 0 0 16px;
    position: relative;
    height: calc(100% - 62px);
    .table_container {
      height: calc(100% - 70px);
      padding: 0 16px;
      .table {
        max-height: calc(100% - 64px);
      }
    }
    .select_text {
      display: inline-block;
      margin-left: 40px;
      font-size: 14px;
      color: #404a62;
      .num {
        color: #202531;
        font-weight: 700;
        margin: 0 3px;
      }
      .can_click_text {
        margin-left: 24px;
      }
    }
  }
  .distribute_dialog {
    .distribute_box {
      width: 100%;
      height: 626px;
      .topFilter {
        height: 68px;
        padding: 16px;
        border-bottom: 1px solid #e6e9ef;
        display: flex;
        text-align: left;
        font-size: 14px;
        align-items: center;
        .left {
          width: 240px;
          padding-left: 15px;
          color: #404a62;
          .num {
            color: #202531;
            font-weight: 700;
            margin: 0 3px;
          }
          .can_click_text {
            margin-left: 24px;
          }
        }
        .right {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          .el-button {
            margin: 0;
            width: 64px;
          }
        }
      }
      .table_box {
        padding: 10px 16px;
        height: calc(100% - 68px);
        .user_table {
          max-height: calc(100% - 48px);
          :deep().bg-table {
            .el-scrollbar {
              --el-scrollbar-bg-color: #fff;
            }
            .el-table__empty-block {
              .empty_container {
                height: calc(100% - 45px);
              }
            }
          }
        }
      }
    }
  }
}
</style>
<style>
.distribute_dialog .el-dialog__footer {
  padding: 16px !important;
}
.distribute_dialog .el-dialog__body {
  padding: 0px !important;
}
.distribute_dialog {
  margin-top: 130px !important;
}
</style>
