<script lang="ts" setup>
// 类型导入
// @ts-ignore
import type { User } from '#/api/system/user/model';

import { computed, onMounted, ref, watch } from 'vue';

import { VbenAvatar } from '@vben-core/shadcn-ui';

import { Close, Loading } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

// 部门相关API
// @ts-ignore
import { deptTree } from '#/api/system/dept/dept';
// 场站相关API
// @ts-ignore
import { selectAllSysStationAreaList } from '#/api/system/infoEntry/stationInfo/stationInfo';
// 岗位相关API
// @ts-ignore
import { getPostList } from '#/api/system/post/post';
// 角色相关API
// @ts-ignore
import { getRoleList } from '#/api/system/role/role';
// API导入 - 按模块分组
// 用户相关API
// @ts-ignore
import { getList, selectUserList } from '#/api/system/user/user';

// 定义组件属性
interface Props {
  // 用户ID数组，用于默认选中
  modelValue?: number[];
  userParams?: any;
  onlyUsers?: boolean;
  maxSelectCount?: number;
}

// 组件属性默认值
const props = withDefaults(defineProps<Props>(), {
  modelValue: () => [],
  userParams: () => {},
});

// 定义组件事件
const emit = defineEmits<{
  // v-model双向绑定
  (e: 'update:modelValue', userIds: number[]): void;
}>();

// 定义通用选择项类型
interface SelectedItem {
  id: number;
  key: string;
  name: string;
  type: 'dept' | 'post' | 'role' | 'station' | 'user';
  [key: string]: any;
}

// 响应式状态 - 基础状态
const loading = ref(true);
const error = ref('');
const searchKeyword = ref('');
const activeTab = ref('byList');

// 响应式状态 - 数据列表
const allUserList = ref<User[]>([]);
const deptTreeData = ref<any[]>([]);
const postList = ref<any[]>([]);
const roleList = ref<any[]>([]);
const stationList: any = ref<any[]>([]);

// 响应式状态 - 选择状态
const checkedUserIds = ref<number[]>([]);
const checkedDeptIds = ref<number[]>([]);
const selectedPost = ref<number[]>([]);
const selectedRole = ref<number[]>([]);
const selectedStation = ref<number[]>([]);

// 响应式状态 - 已选择项
const selectedItems = ref<SelectedItem[]>([]);

// 部门树配置
const deptTreeProps = {
  label: 'label',
  children: 'children',
  value: 'id',
};

// 递归过滤部门树
function filterDeptTree(tree: any[], keyword: string): any[] {
  return tree
    .map((node) => {
      const children = node.children
        ? filterDeptTree(node.children, keyword)
        : [];
      const matches = node.label?.toLowerCase().includes(keyword);
      if (matches || children.length > 0) {
        return {
          ...node,
          children,
        };
      }
      return null;
    })
    .filter(Boolean);
}

// 计算属性 - 用户列表过滤
const filteredUserList = computed(() => {
  let users = [...allUserList.value];

  // 根据搜索关键词过滤
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase();
    users = users.filter(
      (user) =>
        user.nickName?.toLowerCase().includes(keyword) ||
        user.userName?.toLowerCase().includes(keyword) ||
        user.phonenumber?.includes(keyword),
    );
  }

  return users;
});

// 计算属性 - 部门树过滤
const filteredDeptTreeData = computed(() => {
  if (!searchKeyword.value) {
    return deptTreeData.value;
  }
  const keyword = searchKeyword.value.toLowerCase();
  return filterDeptTree(deptTreeData.value, keyword);
});

// 计算属性 - 岗位列表过滤
const filteredPostList = computed(() => {
  if (!searchKeyword.value) {
    return postList.value;
  }
  const keyword = searchKeyword.value.toLowerCase();
  return postList.value.filter((post) =>
    post.postName?.toLowerCase().includes(keyword),
  );
});

// 计算属性 - 角色列表过滤
const filteredRoleList = computed(() => {
  if (!searchKeyword.value) {
    return roleList.value;
  }
  const keyword = searchKeyword.value.toLowerCase();
  return roleList.value.filter((role) =>
    role.roleName?.toLowerCase().includes(keyword),
  );
});

// 计算属性 - 场站列表过滤
const filteredStationList = computed(() => {
  if (!searchKeyword.value) {
    return stationList.value;
  }
  const keyword = searchKeyword.value.toLowerCase();
  return stationList.value.filter((station: any) =>
    station.stationName?.toLowerCase().includes(keyword),
  );
});

// 计算属性 - 当前选中的用户
const selectedUsers = computed(() => {
  return allUserList.value.filter((user) =>
    checkedUserIds.value.includes(user.userId),
  );
});

// 计算属性 - 已选择项总数
const totalSelected = computed(() => {
  return selectedItems.value.length;
});

/**
 * 生命周期钩子：组件挂载时执行
 */
onMounted(async () => {
  await initData();
  if (props.modelValue.length > 0) {
    loadDefaultUsers();
  }
});

/**
 * 监听modelValue变化，更新选中状态
 */
watch(
  () => props.modelValue,
  (newVal) => {
    if (newVal) {
      checkedUserIds.value = [...newVal];
      updateSelectedItems('user');
    }
  },
  { deep: true },
);

/**
 * 初始化数据
 */
async function initData() {
  try {
    loading.value = true;
    error.value = '';

    // 并行请求所有数据，提高加载效率
    const [deptRes, roleRes, postRes, stationRes] = await Promise.all([
      deptTree(),
      getRoleList(),
      getPostList(),
      selectAllSysStationAreaList(),
    ]);

    deptTreeData.value = deptRes || [];
    roleList.value = roleRes.rows || [];
    postList.value = postRes.rows || [];
    stationList.value = stationRes || [];

    // 最后加载用户列表
    await loadAllUsers();
  } catch (error_) {
    error.value = '初始化数据失败';
    console.error('初始化数据失败:', error_);
  } finally {
    loading.value = false;
  }
}

/**
 * 加载所有用户
 */
async function loadAllUsers() {
  try {
    loading.value = true;
    let params: any = {};
    if (props.userParams) {
      params = { ...params, ...props.userParams };
    }

    const res: any = await getList(params);
    allUserList.value = res || [];
  } catch (error_) {
    error.value = '加载用户列表失败';
    console.error('加载用户列表失败:', error_);
  } finally {
    loading.value = false;
  }
}

/**
 * 加载默认选中的用户
 */
async function loadDefaultUsers() {
  try {
    if (allUserList.value.length === 0) {
      await loadAllUsers();
    }

    checkedUserIds.value = [...props.modelValue];
    updateSelectedItems('user');
  } catch (error_) {
    error.value = '加载默认用户失败';
    console.error('加载默认用户失败:', error_);
  }
}

/**
 * 更新选中项到统一数组
 * @param keepType 可选，保留指定类型的选中项
 */
function updateSelectedItems(keepType?: string) {
  // 移除指定类型以外的所有项
  const newSelectedItems = keepType
    ? selectedItems.value.filter((item) => item.type === keepType)
    : [];
  // 添加用户类型选中项
  if (!keepType || keepType === 'user') {
    selectedUsers.value.forEach((user: any) => {
      // 检查用户是否已经存在于 newSelectedItems 中
      const existingIndex = newSelectedItems.findIndex((item) => {
        return item.id === user.userId && item.type === 'user';
      });

      if (existingIndex === -1) {
        newSelectedItems.push({
          id: user.userId,
          name: user.nickName || user.userName || '',
          key: `${user.userId}-user`,
          avatar: user.avatar || '',
          postName: user.postName || '',
          type: 'user',
        });
      }
    });
  }

  // 添加岗位类型选中项
  if (!keepType || keepType === 'post') {
    selectedPost.value.forEach((postId) => {
      const post = postList.value.find((p) => p.postId === postId);
      if (post) {
        // 检查岗位是否已经存在于 newSelectedItems 中
        const existingIndex = newSelectedItems.findIndex((item) => {
          return item.id === postId && item.type === 'post';
        });

        if (existingIndex === -1) {
          newSelectedItems.push({
            id: postId,
            key: `${postId}-post`,
            name: post.postName,
            type: 'post',
          });
        }
      }
    });
  }

  // 添加角色类型选中项
  if (!keepType || keepType === 'role') {
    selectedRole.value.forEach((roleId) => {
      const role = roleList.value.find((r) => r.roleId === roleId);
      if (role) {
        // 检查角色是否已经存在于 newSelectedItems 中
        const existingIndex = newSelectedItems.findIndex((item) => {
          return item.id === roleId && item.type === 'role';
        });

        if (existingIndex === -1) {
          newSelectedItems.push({
            id: roleId,
            key: `${roleId}-role`,
            name: role.roleName,
            type: 'role',
          });
        }
      }
    });
  }

  // 添加场站类型选中项
  if (!keepType || keepType === 'station') {
    selectedStation.value.forEach((stationId) => {
      const station = stationList.value.find((s: any) => s.id === stationId);
      if (station) {
        // 检查场站是否已经存在于 newSelectedItems 中
        const existingIndex = newSelectedItems.findIndex((item) => {
          return item.id === stationId && item.type === 'station';
        });

        if (existingIndex === -1) {
          newSelectedItems.push({
            id: stationId,
            key: `${stationId}-station`,
            name: station.stationName,
            type: 'station',
          });
        }
      }
    });
  }

  selectedItems.value = newSelectedItems;
}

/**
 * 处理用户选择
 */
function handleUserCheck() {
  emit('update:modelValue', checkedUserIds.value);
  selectedUsers.value.forEach((user: any) => {
    const index = selectedItems.value.findIndex((o) => {
      return o.id === user.userId && o.type === 'user';
    });

    if (index === -1) {
      selectedItems.value.push({
        id: user.userId,
        name: user.nickName || user.userName || '',
        key: `${user.userId}-user`,
        avatar: user.avatar || '',
        postName: user.postName || '',
        type: 'user',
      });
    }
  });

  selectedItems.value.forEach((item) => {
    if (
      item.type === 'user' &&
      !selectedUsers.value.some((u) => u.userId === item.id)
    ) {
      selectedItems.value.splice(selectedItems.value.indexOf(item), 1);
    }
  });
}

/**
 * 处理部门选择
 */
function handleDeptCheck(data: any) {
  const index = selectedItems.value.findIndex((o) => {
    return o.id === data.id && o.type === 'dept';
  });

  if (index === -1) {
    selectedItems.value.push({
      id: data.id,
      key: `${data.id}-dept`,
      name: data.label,
      type: 'dept',
    });
  } else {
    selectedItems.value.splice(index, 1);
  }
}

/**
 * 处理岗位选择
 */
function handlePostChange() {
  selectedPost.value.forEach((postId) => {
    const index = selectedItems.value.findIndex((o) => {
      return o.id === postId && o.type === 'post';
    });

    if (index === -1) {
      const post = postList.value.find((p) => p.postId === postId);
      if (post) {
        selectedItems.value.push({
          id: postId,
          key: `${postId}-post`,
          name: post.postName,
          type: 'post',
        });
      }
    }
  });

  selectedItems.value.forEach((item) => {
    if (item.type === 'post' && !selectedPost.value.includes(item.id)) {
      selectedItems.value.splice(selectedItems.value.indexOf(item), 1);
    }
  });
}

/**
 * 处理角色选择
 */
function handleRoleChange() {
  selectedRole.value.forEach((roleId) => {
    const index = selectedItems.value.findIndex((o) => {
      return o.id === roleId && o.type === 'role';
    });

    if (index === -1) {
      const role = roleList.value.find((r) => r.roleId === roleId);
      if (role) {
        selectedItems.value.push({
          id: roleId,
          key: `${roleId}-role`,
          name: role.roleName,
          type: 'role',
        });
      }
    }
  });

  selectedItems.value.forEach((item) => {
    if (item.type === 'role' && !selectedRole.value.includes(item.id)) {
      selectedItems.value.splice(selectedItems.value.indexOf(item), 1);
    }
  });
}

/**
 * 处理场站选择
 */
function handleStationChange() {
  selectedStation.value.forEach((stationId) => {
    const index = selectedItems.value.findIndex((o) => {
      return o.id === stationId && o.type === 'station';
    });

    if (index === -1) {
      const station = stationList.value.find((s: any) => s.id === stationId);
      if (station) {
        selectedItems.value.push({
          id: stationId,
          key: `${stationId}-station`,
          name: station.stationName,
          type: 'station',
        });
      }
    }
  });

  selectedItems.value.forEach((item) => {
    if (item.type === 'station' && !selectedStation.value.includes(item.id)) {
      selectedItems.value.splice(selectedItems.value.indexOf(item), 1);
    }
  });
}

/**
 * 移除选择的部门、角色、岗位或场站
 */
function removeSelectedItem(id: number, type: string) {
  // 根据类型移除对应的数据
  const removeMap: Record<string, (id: number) => void> = {
    user: () => {
      checkedUserIds.value = checkedUserIds.value.filter(
        (userId) => id !== userId,
      );
      emit('update:modelValue', checkedUserIds.value);
    },
    dept: () =>
      (checkedDeptIds.value = checkedDeptIds.value.filter(
        (deptId) => deptId !== id,
      )),
    role: () =>
      (selectedRole.value = selectedRole.value.filter(
        (roleId) => roleId !== id,
      )),
    post: () =>
      (selectedPost.value = selectedPost.value.filter(
        (postId) => postId !== id,
      )),
    station: () =>
      (selectedStation.value = selectedStation.value.filter(
        (stationId) => stationId !== id,
      )),
  };

  if (removeMap[type]) {
    removeMap[type](id);
  }

  selectedItems.value = selectedItems.value.filter(
    (item) => item.id !== id || item.type !== type,
  );

  // updateSelectedItems();
}

/**
 * 清空所有选择
 */
function clearAll() {
  // 清空所有选择状态
  checkedUserIds.value = [];
  checkedDeptIds.value = [];
  selectedPost.value = [];
  selectedRole.value = [];
  selectedStation.value = [];

  // 触发v-model更新
  emit('update:modelValue', []);

  // 清空选中项数组
  selectedItems.value = [];
}

/**
 * 确认选择
 */
async function confirmSelection() {
  if (selectedItems.value.length === 0) {
    ElMessage.error('请选择用户');
    return [];
  }
  let users = selectedItems.value.filter((item) => item.type === 'user');

  if (users.length !== selectedItems.value.length) {
    const postIds = selectedItems.value.filter((item) => item.type === 'post');

    const deptIds = selectedItems.value.filter((item) => item.type === 'dept');

    const stationIds = selectedItems.value.filter(
      (item) => item.type === 'station',
    );

    const roleIds = selectedItems.value.filter((item) => item.type === 'role');
    const params = {
      postIds: postIds.map((item) => item.id),
      deptIds: deptIds.map((item) => item.id),
      stationIds: stationIds.map((item) => item.id),
      roleIds: roleIds.map((item) => item.id),
    };
    // if (props.params) {
    //   params = { ...params, ...props.params };
    // }

    const res: any = await selectUserList(params);
    if (res?.length) {
      users.push(
        ...res.map((item: any) => ({
          id: item.userId,
          name: item.userName,
          postName: item.postName || '',
          type: 'user',
        })),
      );
    }
  }

  // 过滤重复数据
  users = users.filter((item, index, self) => {
    return self.findIndex((o) => o.id === item.id) === index;
  });

  return users;
}

defineExpose({
  selectedItems,
  confirmSelection,
});
</script>

<template>
  <div class="select-users-container">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <ElIcon :size="48" class="is-loading">
        <Loading />
      </ElIcon>
      <p class="loading-text">加载中...</p>
    </div>

    <!-- 错误信息 -->
    <div v-else-if="error" class="error-container">
      <ElAlert :title="error" type="error" show-icon :closable="false" />
    </div>

    <!-- 内容区域 -->
    <div v-else class="select-users-content">
      <!-- 左侧选择区域 -->
      <div class="left-panel">
        <!-- 搜索框 -->
        <div class="search-section">
          <ElInput
            v-model="searchKeyword"
            placeholder="搜索"
            prefix-icon="Search"
            clearable
            class="search-input"
          />
        </div>

        <!-- 标签页 -->
        <div class="tabs" v-if="!onlyUsers">
          <ElRadioGroup v-model="activeTab" size="small">
            <ElRadioButton label="byList">用户</ElRadioButton>
            <ElRadioButton label="byDept">部门</ElRadioButton>
            <ElRadioButton label="byPost">岗位</ElRadioButton>
            <ElRadioButton label="byRole">角色</ElRadioButton>
            <ElRadioButton label="byStation"> 场站 </ElRadioButton>
          </ElRadioGroup>
        </div>

        <!-- 按部门选择 -->
        <div v-if="activeTab === 'byDept'" class="tab-content">
          <ElTree
            v-model:checked-keys="checkedDeptIds"
            :data="filteredDeptTreeData"
            :props="deptTreeProps"
            :default-expand-all="true"
            show-checkbox
            check-strictly
            @check="handleDeptCheck"
            class="dept-tree"
          />
        </div>

        <!-- 按岗位选择 -->
        <div v-else-if="activeTab === 'byPost'" class="tab-content">
          <ElCheckboxGroup
            v-model="selectedPost"
            @change="handlePostChange"
            class="checkbox-group"
          >
            <ElCheckbox
              v-for="post in filteredPostList"
              :key="post.postId"
              :label="post.postId"
              class="checkbox-item"
            >
              {{ post.postName }}
            </ElCheckbox>
          </ElCheckboxGroup>
        </div>

        <!-- 按角色选择 -->
        <div v-else-if="activeTab === 'byRole'" class="tab-content">
          <ElCheckboxGroup
            v-model="selectedRole"
            @change="handleRoleChange"
            class="checkbox-group"
          >
            <ElCheckbox
              v-for="role in filteredRoleList"
              :key="role.roleId"
              :label="role.roleId"
              class="checkbox-item"
            >
              {{ role.roleName }}
            </ElCheckbox>
          </ElCheckboxGroup>
        </div>

        <!-- 按场站选择 -->
        <div v-else-if="activeTab === 'byStation'" class="tab-content">
          <ElCheckboxGroup
            v-model="selectedStation"
            @change="handleStationChange"
            class="checkbox-group"
          >
            <ElCheckbox
              v-for="station in filteredStationList"
              :key="station.id"
              :label="station.id"
              class="checkbox-item"
            >
              {{ station.stationName }}
            </ElCheckbox>
          </ElCheckboxGroup>
        </div>

        <!-- 按列表选择 -->
        <div v-else-if="activeTab === 'byList'" class="tab-content">
          <!-- 用户列表 -->
          <div class="user-list">
            <ElScrollbar height="300px">
              <ElCheckboxGroup
                v-model="checkedUserIds"
                @change="handleUserCheck"
              >
                <ElCheckbox
                  v-for="user in filteredUserList"
                  :key="user.userId"
                  :label="user.userId"
                  class="user-item"
                >
                  <div class="user-info">
                    <VbenAvatar
                      :src="user.avatar || ''"
                      :name="user.nickName"
                      :alt="user.nickName"
                      :size="30"
                    />
                    <div class="user-details">
                      <div class="user-name">{{ user.nickName }}</div>
                      <div class="user-dept">
                        {{ user.dept?.deptName || '' }}
                      </div>
                    </div>
                  </div>
                </ElCheckbox>
              </ElCheckboxGroup>
            </ElScrollbar>
          </div>
        </div>
      </div>

      <!-- 右侧已选择区域 -->
      <div class="right-panel">
        <div class="selected-header">
          <span class="selected-title">
            已选择 ({{ totalSelected }}/{{ maxSelectCount || 1000 }})
          </span>
          <ElButton
            v-if="totalSelected > 0"
            type="text"
            size="small"
            @click="clearAll"
          >
            清空
          </ElButton>
        </div>

        <div class="selected-list">
          <ElScrollbar height="350px">
            <!-- 统一渲染所有选择项 -->
            <template v-for="item in selectedItems" :key="item.key">
              <div class="selected-item" :class="[`${item.type}-item`]">
                <div class="selected-item-info">
                  <!-- 用户 -->
                  <template v-if="item.type === 'user'">
                    <VbenAvatar
                      :src="item.avatar"
                      :name="item.name"
                      :alt="item.name"
                      :size="30"
                    />
                    <span class="selected-item-name">{{ item.name }}</span>
                  </template>

                  <!-- 部门 -->
                  <template v-else-if="item.type === 'dept'">
                    <span class="selected-item-type-tag dept-tag">部门</span>
                    <span class="selected-item-name">{{ item.name }}</span>
                  </template>

                  <!-- 角色 -->
                  <template v-else-if="item.type === 'role'">
                    <span class="selected-item-type-tag role-tag">角色</span>
                    <span class="selected-item-name">{{ item.name }}</span>
                  </template>

                  <!-- 岗位 -->
                  <template v-else-if="item.type === 'post'">
                    <span class="selected-item-type-tag post-tag">岗位</span>
                    <span class="selected-item-name">{{ item.name }}</span>
                  </template>

                  <!-- 场站 -->
                  <template v-else-if="item.type === 'station'">
                    <span class="selected-item-type-tag station-tag">场站</span>
                    <span class="selected-item-name">{{ item.name }}</span>
                  </template>
                </div>
                <ElButton
                  type="text"
                  size="small"
                  class="remove-btn"
                  @click="removeSelectedItem(item.id, item.type)"
                >
                  <ElIcon><Close /></ElIcon>
                </ElButton>
              </div>
            </template>

            <div v-if="totalSelected === 0" class="empty-selected">
              暂无选择
            </div>
          </ElScrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.select-users-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 加载状态样式 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.loading-text {
  margin-top: 16px;
  color: #606266;
}

/* 错误信息样式 */
.error-container {
  max-width: 800px;
  margin: 40px auto;
}

.search-section {
  margin-bottom: 16px;
}

.search-input {
  width: 100%;
}

.select-users-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.left-panel {
  flex: 1;
  padding: 16px;
  border-right: 1px solid #ebeef5;
  display: flex;
  flex-direction: column;
}

.right-panel {
  width: 400px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.tabs {
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
}

.tab-content {
  margin-bottom: 16px;
  min-height: 100px;
}

.dept-tree {
  height: 200px;
  overflow-y: auto;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  max-height: 200px;
  overflow-y: auto;
}

.checkbox-item {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.user-list {
  flex: 1;
}

.user-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  height: 50px;
  border-bottom: 1px solid #f5f7fa;
}

.user-item .el-checkbox__label {
  height: 100%;
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.user-details {
  margin-left: 12px;
}

.user-name {
  font-size: 14px;
  font-weight: 500;
}

.user-dept {
  font-size: 12px;
  color: #909399;
  margin-top: 2px;
}

.selected-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.selected-title {
  font-size: 14px;
  font-weight: 500;
}

.selected-list {
  flex: 1;
  margin-bottom: 16px;
  overflow: hidden;
}

.selected-list :deep(.el-scrollbar__view) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.selected-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background-color: #f5f7fa;
  border-radius: 4px;
  box-sizing: border-box;
  width: calc(50% - 4px);
  min-width: calc(50% - 4px);
  margin-bottom: 8px;
}

.selected-item-info {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.selected-item-name {
  margin-left: 8px;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selected-item-type-tag {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
  color: white;
  font-weight: 500;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  line-height: normal;
  white-space: nowrap;
}

.dept-tag {
  background-color: #409eff;
}

.role-tag {
  background-color: #67c23a;
}

.post-tag {
  background-color: #e6a23c;
}

.station-tag {
  background-color: #f56c6c;
}

.remove-btn {
  color: #909399;
  margin-left: auto;
}

.remove-btn:hover {
  color: #f56c6c;
}

.empty-selected {
  text-align: center;
  padding: 40px 0;
  color: #909399;
  font-size: 14px;
  width: 100%;
}
</style>
