<!--
 * @Date: 2023-11-01 10:18:53
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2023-12-06 12:52:57
 * @FilePath: /vue-flow-editor/doc/selectUserView.vue
 * @Description: 成员列表选择控件
-->
<template>
  <el-dialog
    v-model="dialogUserFormVisible"
    title="成员列表"
    @close="closeUserForm"
  >
    <div class="flow-tag__wrapper" style="max-height: 150px; overflow: auto;">
      <el-tag
        v-if="userTags.length"
        v-for="tag in userTags"
        :key="tag.name"
        style="margin-left: 0.25rem; margin-right: 0.25rem; margin-bottom: 0.5rem;"
        closable
        @close="handleTagClose(tag)"
      >
        <el-icon v-if="tag.type === 'dept'" style="display: inline-block; vertical-align: middle; height: 13px;"><House /></el-icon>
        <el-icon v-if="tag.type === 'user'" style="display: inline-block; vertical-align: middle; height: 12px;"><Female /></el-icon>
        <el-icon v-if="tag.type === 'role'" style="display: inline-block; vertical-align: middle; height: 12px;"><User /></el-icon>
        <span style="margin-left: 2px;display: inline-block; vertical-align: middle; line-height: 10px; height: 10px;">{{ tag.name }}</span>
      </el-tag>
      <div v-else class="text-empty">请选择成员</div>
    </div>
    <div class="flow-tabs__wrapper">
      <div style="height: 40px">
        <div class="search_box">
          <div v-if="!is_active_search">
            <div class="flow-tabs__nav-wrap">
              <div class="flow-tabs__nav-scroll">
                <div class="flow-tabs__nav is-top">
                  <div
                    ref_key="barRef"
                    class="flow-tabs__active-bar"
                    :style="{
                      width: tabTextWidth,
                      transform: 'translateX' + '(' + tabOffset + ')'
                    }"
                  ></div>
                  <div
                    v-for="(item, index) in userTabs"
                    :key="index"
                    :class="[
                      'flow-tabs__item',
                      'is-top',
                      item.id === activeTabId ? 'is-active' : ''
                    ]"
                    :id="item.id"
                    @click="handleTabClick(item, $event, index)"
                  >
                    <el-icon v-if="item.type === 'corp-tree'" style="margin-bottom: 2px;"><House /></el-icon>
                    <el-icon v-if="item.type === 'role-list'" style="margin-bottom: 2px;"><Female /></el-icon>
                    <el-icon v-if="item.type === 'user-tree'" style="margin-bottom: 2px;"><User /></el-icon>
                    <span style="margin-left: 5px;">{{ item.name }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="flow-tab-search" @click="activeSearchBtn">
              <el-icon :size="15"><Search /></el-icon> &nbsp;搜索框
            </div>
          </div>
          <div v-else>
            <el-input
              v-model="search_input"
              @input="onSearchInput"
              class="search-btn-wrapper"
              placeholder="可通过名称、手机号或邮箱查询"
            >
              <template #prefix>
                <el-icon class="el-input__icon"><search /></el-icon>
              </template>
              <template #append>
                <div class="search-group">
                  <div class="cancel-btn" @click="onClearSearch">关闭</div>
                </div>
              </template>
            </el-input>
          </div>
        </div>
      </div>
      <!-- 未激活搜索框 -->
      <div v-if="!is_active_search" style="height: 300px;">
        <div v-for="(item, index) in userTabs" :key="index">
          <!-- 组织结构树 -->
          <div v-if="item.id === activeTabId && item.type === 'corp-tree'">
            <el-row>
              <el-col :span="24" style="max-height: 300px; overflow: scroll;">
                <el-tree
                  ref="corpTreeRef"
                  :data="item.data"
                  :props="defaultProps"
                  show-checkbox
                  node-key="id"
                  :default-expanded-keys="defaultExpandedKeys"
                  :default-checked-keys="currentCheckedNodeKey"
                  :expand-on-click-node="false"
                  :check-on-click-node="true"
                  :check-strictly="true"
                  empty-text="暂无数据"
                  @check="checkNode"
                  style="margin-top: 10px;"
                />
              </el-col>
            </el-row>
          </div>
          <div v-if="item.id === activeTabId && item.type === 'role-list'">
            <el-row>
              <el-col :span="24" style="max-height: 300px; overflow: scroll;">
                <el-checkbox-group
                  class="flow-checkbox-group"
                  v-model="checkedUserList"
                >
                  <el-checkbox
                    v-for="(user, idx) in userList"
                    :key="idx"
                    :label="user.id"
                    :disabled="user.disabled"
                    @change="handleCheckedUserListChange(user, $event)"
                    >{{ user.name }}</el-checkbox
                  >
                </el-checkbox-group>
                </el-col>
              </el-row>
          </div>
          <!-- 成员选择树 -->
          <div v-if="item.id === activeTabId && item.type === 'user-tree'">
            <el-row>
              <el-col :span="8" style="max-height: 300px; overflow: scroll;">
                <el-tree
                  ref="userTreeRef"
                  :data="item.data"
                  :props="defaultProps"
                  node-key="id"
                  :default-expanded-keys="defaultExpandedKeys"
                  :current-node-key="currentNodeKey"
                  :highlight-current="true"
                  empty-text="暂无数据"
                  @node-click="handleNodeClick"
                  style="margin-top: 10px;"
                />
              </el-col>
              <el-col :span="16" style="max-height: 300px; overflow: scroll;">
                <div class="flow-checkbox-box">
                  <el-checkbox-group
                    class="flow-checkbox-group"
                    v-model="checkedUserList"
                  >
                    <el-checkbox
                      v-for="(user, idx) in userList"
                      :key="idx"
                      :label="user.id"
                      :disabled="user.disabled"
                      @change="handleCheckedUserListChange(user, $event)"
                      >{{ user.name }}</el-checkbox
                    >
                  </el-checkbox-group>
                </div>
              </el-col>
            </el-row>
          </div>
          <!-- TAG: 暂时不使用左右选择结构 -->
          <!-- <div v-if="item.id === activeTabId && item.type === ''">
            <el-tabs
              tab-position="left"
              style=""
              class="demo-tabs"
              v-model="activeTabContent"
              @tab-click="handleTabContentClick"
            >
              <el-tab-pane
                v-for="(role, idx) in item.data"
                :key="idx"
                :name="role.name"
                :label="role.name"
              >
                <el-checkbox-group
                  class="flow-checkbox-group"
                  v-model="checkedUserList"
                >
                  <el-checkbox
                    v-for="(user, idx) in userList"
                    :key="idx"
                    :label="user.id"
                    :disabled="user.disabled"
                    @change="handleCheckedUserListChange(user, $event)"
                    >{{ user.label }}</el-checkbox
                  >
                </el-checkbox-group>
              </el-tab-pane>
            </el-tabs>
          </div> -->
        </div>
      </div>
      <div v-else style="height: 300px; overflow: scroll;">
        <div v-if="searchUserList.dept">
          <div style="margin-top: 5px;">部门</div>
          <template
            v-if="searchUserList.dept.length"
            v-for="(dept, idx) in searchUserList.dept"
            :key="idx"
          >
            <el-checkbox
              style="width: 98%; margin-left: 2%;"
              :model-value="dept.checked"
              :checked="dept.checked"
              :label="dept.id"
              @change="handleCheckedUserListChange(dept, $event)"
              >
              {{ dept.name }}
            </el-checkbox>
          </template>
          <template v-else>
            <div style="font-size: 12px; color: gray; margin-top: 5px; margin-left: 2%;">暂无相关部门</div>
          </template>
        </div>
        <div v-if="searchUserList.role">
          <div style="margin-top: 5px;">角色</div>
          <template
            v-if="searchUserList.role.length"
            v-for="(role, idx) in searchUserList.role"
            :key="idx"
          >
            <el-checkbox
              style="width: 98%; margin-left: 2%;"
              :label="role.id"
              :model-value="role.checked"
              :checked="role.checked"
              @change="handleCheckedUserListChange(role, $event)"
              >
              {{ role.name }}
            </el-checkbox>
          </template>
          <template v-else>
            <div style="font-size: 12px; color: gray; margin-top: 5px; margin-left: 2%;">暂无相关角色</div>
          </template>
        </div>
        <div v-if="searchUserList.user">
          <div style="margin-top: 5px;">成员</div>
          <template
            v-if="searchUserList.user.length"
            v-for="(user, idx) in searchUserList.user"
            :key="idx"
          >
            <el-checkbox
              style="width: 98%; margin-left: 2%;"
              :label="user.id"
              :model-value="user.checked"
              :checked="user.checked"
              @change="handleCheckedUserListChange(user, $event)"
              >
              {{ user.name }}
            </el-checkbox>
          </template>
          <template v-else>
            <div style="font-size: 12px; color: gray; margin-top: 5px; margin-left: 2%;">暂无相关成员</div>
          </template>
        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeUserForm">取消</el-button>
        <el-button type="primary" color="#009688" @click="confirmUserForm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted, watch, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import axios from "./axios";
import $ from "jquery";
import _ from "lodash";
import { ElNotification, ElMessage, ElMessageBox } from 'element-plus'

const props = defineProps({
  visible: Boolean,
  list: Array,
});
const emit = defineEmits(["close", "confirm"]);

const corpTreeRef = ref(null); // 组织结构树的ref
const userTreeRef = ref(null); // 成员选择树的ref

const dialogUserFormVisible = ref(false);
const userTags = ref([]); // 现在只维护选中的用户列表，以它为基准维护其他列表选中情况
const defaultExpandedKeys = ref([]); // 当前展开的节点
const currentNodeKey = ref([]); // 当前选中的节点
const currentCheckedNodeKey = ref([]); // 当前选中的节点
const activeTabId = ref("tab-corp"); // 获取默认第一个ID
const activeTabIdx = ref(0); // 默认激活tab的index
const activeTabContent = ref("");
const userTabs = ref([
  {
    id: "tab-corp",
    name: "组织结构",
    type: "corp-tree",
    data: []
  },
  {
    id: "tab-role",
    name: "角色",
    type: "role-list",
    data: []
  },
  {
    id: "tab-uer",
    name: "成员",
    type: "user-tree",
    data: []
  },
]);
const tabSelectData = ref([]);
const tabCheckedData = ref({}); // 保存选中Tab的数据
const userTabType = ref("user-tree");
const tabOffset = ref("0px");
const tabTextWidth = ref("76px"); // 文字宽度需要打开弹框时重新计算
const is_active_search = ref(false);
const search_input = ref("");
const userList = ref([]);
const checkedUserList = ref([]);
const searchUserList = ref({}); // 搜索框 选中 用户ID
const checkedSearchUserList = ref([]);
const defaultProps = ref({
  children: "children",
  label: "name"
});

// TAG: 接口获取数据
const getDeptList = () => {
  return axios.get('/admin/?a=flow_dept_list')
}
const getRoleList = () => {
  return axios.get('/admin/?a=flow_role_list')
}

const deptList = ref([]); // 部门列表
const deptUserList = ref([]); // 部门用户列表
const roleList = ref([]); // 角色列表

onMounted(async () => {
  // API获取后台数据
  const dept_list = await getDeptList();
  const role_list = await getRoleList();
  if (dept_list.data.code) {
    deptList.value = dept_list.data.data;
    deptUserList.value = _.cloneDeep(dept_list.data.data);
  } else {
    ElMessage({
      type: 'error',
      message: dept_list.data.msg,
    });
  }
  if (role_list.data.code) {
    roleList.value = role_list.data.data;
  } else {
    ElMessage({
      type: 'error',
      message: role_list.data.msg,
    });
  }
  // Tabs菜单的完整数据结构
  userTabs.value.forEach(item => {
    if (item.type === 'corp-tree') {
      item.data = deptList.value;
    }
    if (item.type === 'user-tree') {
      item.data = deptUserList.value;
    }
    if (item.type === 'role-list') {
      item.data = roleList.value;
    }
  });
});

watch(() => {
  // 监听弹框状态
  if (props.visible) {
    dialogUserFormVisible.value = true;
    // 同步显示tag框选中的用户
    // checkTab(tabCheckedData.value);
    if (!tabCheckedData.value.type) { // 未点击过tab栏，默认设置组织结构项
    nextTick(() => {
      // 把用户选中的节点注入树结构显示选中状态
        corpTreeRef.value.setCheckedKeys(userTags.value.map(ele => ele.id), false)
      });
    }
  } else {
    dialogUserFormVisible.value = false;
    // 用户选择弹框关闭时，清空数据
    is_active_search.value = false;
    userTabType.value = "corp-tree";
    activeTabId.value = "tab-corp";
    activeTabIdx.value = 0;
    tabOffset.value = 0;
  }
});

watch(
  // watch dialogUserFormVisible.value 监听弹框显示，修改tab文字宽度
  () => dialogUserFormVisible.value,
  val => {
    if (val) {
      nextTick(() => {
        tabTextWidth.value = $("#" + activeTabId.value).width() + "px";
      });
      userTags.value = _.cloneDeep(props.list);
      // 第一项目是组织结构树，默认展开第一个节点
      if (userTabs.value[activeTabIdx.value]['type'] === 'corp-tree') {
        if (userTabs.value[activeTabIdx.value]['data'].length) {
          // 默认展开第一个节点
          defaultExpandedKeys.value = [userTabs.value[activeTabIdx.value]['data'][0]['id']];
          // 把用户选中的节点注入树结构显示选中状态
          nextTick(() => {
            currentCheckedNodeKey.value = userTags.value.map(ele => ele.id);
          });
        }
      }
    }
  }
);
watch(
  () => props.list,
  val => {
    if (val) {
      userTags.value = _.cloneDeep(val);
      // 第一项目是组织结构树，默认展开第一个节点
      if (userTabs.value[activeTabIdx.value]['type'] === 'corp-tree') {
        if (userTabs.value[activeTabIdx.value]['data'].length) {
          // 默认展开第一个节点
          defaultExpandedKeys.value = [userTabs.value[activeTabIdx.value]['data'][0]['id']];
          // 把用户选中的节点注入树结构显示选中状态
          nextTick(() => {
            currentCheckedNodeKey.value = userTags.value.map(ele => ele.id);
          });
        }
      }
    }
  }
);

/**
 * 点击Tab切换回调
 *
 * @param {object} tab - The tab object that was clicked.
 * @param {object} event - The event object generated by the click event.
 * @param {number} idx - The index of the clicked tab.
 */
const handleTabClick = (tab, event, idx) => {
  tabSelectData.value = tab.data; // tab选中数据提供给左右选择结构使用
  tabCheckedData.value = tab; // tab选中数据
  userList.value = []; // 清空用户列表
  checkedUserList.value = []; // 清空选中用户列表
  activeTabContent.value = ""; // 清空侧边栏显示
  defaultExpandedKeys.value = []; // 清空树形的默认展开
  currentNodeKey.value = []; // 清空树形的默认展开
  // 设置当前激活的tab
  userTabType.value = tab.type;
  activeTabId.value = tab.id;
  activeTabIdx.value = idx;
  // 子容器相对于父容器的相对x轴位移, 第一项为0
  if (idx) {
    tabOffset.value = $("#" + tab.id).position().left + 20 + "px";
  } else {
    tabOffset.value = "0px";
  }
  // 文字宽度
  tabTextWidth.value = $("#" + tab.id).width() + "px";
  // 检查tab是否选中
  checkTab(tab);
};

const checkTab = (tab) => {
  if (!tab.type) { // 未点击过tab栏，默认设置组织结构项
    nextTick(() => {
      // 把用户选中的节点注入树结构显示选中状态
      corpTreeRef.value.setCheckedKeys(userTags.value.map(ele => ele.id), false)
    });
  }
  // 组织结构树
  if (tab.type === 'corp-tree') {
    if (tab.data.length) {
      // 默认展开第一个节点
      defaultExpandedKeys.value = [tab.data[0]['id']];
      nextTick(() => {
        // 把用户选中的节点注入树结构显示选中状态
        corpTreeRef.value.setCheckedKeys(userTags.value.map(ele => ele.id), false)
      });
    }
  }
  // 成员选择树
  if (tab.type === 'user-tree') {
    if (tab.data.length) {
      // 默认展开第一个节点
      defaultExpandedKeys.value = [tab.data[0]['id']];
      // 当前选中的节点
      currentNodeKey.value = tab.data[0]['id'];
      // 多选列表数据展示
      userList.value = tab.data[0]['user'];
      checkedUserList.value = userTags.value.map(ele => ele.id);
    }
  }
  // 角色选择列表
  if (tab.type === 'role-list') {
    // 多选列表数据展示
    userList.value = tab.data;
    checkedUserList.value = userTags.value.map(ele => ele.id);
  }
}

/**
 * 侧边栏Tab点击回调
 *
 * @param {type} tab - description of parameter
 * @param {type} event - description of parameter
 */
// const handleTabContentClick = (tab, event) => {
//   tabSelectData.value.forEach(ele => {
//     if (ele.name === tab.props.name) {
//       // 设置右侧显示数据
//       userList.value = ele.list;
//       checkedUserList.value = ele.list
//         .filter(ele => {
//           return ele.checked;
//         })
//         .map(ele => {
//           return ele.id;
//         });
//     }
//   });
// };

/**
 * 成员选择树 点击回调
 *
 * @param {object} data - The data associated with the clicked node.
 * @return {void}
 */
const handleNodeClick = data => {
  if (data.user) {
    // 如果节点下存在 user 字段，设置为右侧显示数据列表
    userList.value = data.user;
    checkedUserList.value = userTags.value
      .map(ele => {
        return ele.id;
      });
    // 默认展开相应ID节点
    defaultExpandedKeys.value = [data.id];
  }
};

/**
 * 组织结构树 选中回调
 *
 * @param {*} obj 传递给 data 属性的数组中该节点所对应的对象
 * @param {*} status 树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性
 * @return {void}
 */
const checkNode = (obj, status) => {
  // 判断当前节点是选中还是取消选中
  if (status.checkedKeys.indexOf(obj.id) > -1) { // 选中
    // 新增勾选的用户
    let check_nodes = status.checkedNodes.map(ele => {
      return { id: ele.id, name: ele.name, type: ele.type };
    });
    userTags.value = userTags.value.concat(check_nodes);
    // 如果ID相同，需要数据去重
    userTags.value = _.uniqBy(userTags.value, 'id');
  } else {
    // 移除勾选的用户
    userTags.value = userTags.value.filter(ele => {
      return ele.id!== obj.id;
    });
  }
}

/**
 * 递归查找匹配字段，并修改字段的值为新值
 *
 * @param {object} obj - 修改对象
 * @param {string} fieldName - 查找字段
 * @param {any} fieldValue - 匹配值
 * @param {any} targetName - 目标字段
 * @param {any} newValue - 修改新值
 */
// function modifyFieldValue(obj, fieldName, fieldValue, targetName, newValue) {
//   // 检查当前层级的字段值是否匹配目标值
//   if (obj[fieldName] === fieldValue) {
//     obj[targetName] = newValue;
//   }

//   // 遍历当前层级的子项（如果有）
//   for (var key in obj) {
//     if (typeof obj[key] === "object" && obj[key] !== null) {
//       modifyFieldValue(obj[key], fieldName, fieldValue, targetName, newValue);
//     }
//   }
// }

/**
 * 勾选框 操作回调
 *
 * @param {type} user - description of parameter
 * @param {type} checked - description of parameter
 * @return {type} description of return value
 */
const handleCheckedUserListChange = (user, checked) => {
  if (checked) { // 新增勾选的用户
    userTags.value = userTags.value.concat({ id: user.id, name: user.name, type: user.type });
    // 如果ID相同，需要数据去重
    userTags.value = _.uniqBy(userTags.value, 'id');
  } else {
    // 移除勾选的用户
    userTags.value = userTags.value.filter(ele => {
      return ele.id!== user.id;
    });
  }
  // 适配搜索栏结果的勾选显示
  const element = searchUserList.value[user.type];
  if (element) {
    for (let index = 0; index < element.length; index++) {
      const ele = element[index];
      if (user.id === ele.id) {
        ele.checked = checked;
      }
    }
  }
};

/**
 * 递归获取树形结构下的所有 list 字段数据
 *
 * @param {Array} arr - The array to traverse.
 * @return {Array} - The list items found.
 */
// function getAllListItems(arr) {
//   var result = [];

//   function recursiveGetListItems(subArr) {
//     for (var i = 0; i < subArr.length; i++) {
//       var item = subArr[i];
//       if (item.list && Array.isArray(item.list)) {
//         result = result.concat(item.list);
//       }
//       if (item.children && Array.isArray(item.children)) {
//         recursiveGetListItems(item.children);
//       }
//     }
//   }

//   recursiveGetListItems(arr);
//   return result;
// }


// watch(
//   // watch userTabs.value 监听数据结构选中值变化
//   () => userTabs.value,
//   val => {
//     if (val) {
//     }
//   },
//   { deep: true }
// );

/**
 * 移除 tags 成员标签回调
 *
 * @param {string} tag - The tag to be closed.
 * @return {undefined} No return value.
 */
const handleTagClose = tag => {
  userTags.value.splice(userTags.value.indexOf(tag), 1); // 删除标签列表中的项
  // 处理不同分支选中显示问题
  switch (activeTabId.value) {
    case 'tab-corp': // 组织结构
      // 把选中的节点注入树结构显示选中状态
      corpTreeRef.value.setCheckedKeys(userTags.value.map(ele => ele.id), false)
      break;
    case 'tab-uer': // 成员
      checkedUserList.value = userTags.value
        .map(ele => {
          return ele.id;
        });
      break;
    case 'tab-role': // 角色
      checkedUserList.value = userTags.value
        .map(ele => {
          return ele.id;
        });
      break;
  }
  // // ID集合
  // let tagsId = userTags.value.map(ele => {
  //   return ele.id;
  // });
  // // 处理tags列表和下面选中列表同步问题
  // let checkDataList = [];
  // if (is_active_search.value) {
  //   // 激活搜索状态
  //   checkDataList = checkedSearchUserList.value;
  // } else {
  //   // 激活非搜索状态
  //   checkDataList = checkedUserList.value;
  // }
  // // 获取 tags 中已删除的, 勾选列表中还勾选的值
  // let result = checkDataList.filter(value => !tagsId.includes(value));
  // // 如果存在不同步的值，需要在列表中删除勾选列表中的项
  // if (result.length) {
  //   result.forEach(ele => {
  //     checkDataList.splice(checkDataList.indexOf(ele), 1);
  //   });
  // }
};

/**
 * 关闭用户列表表单回调
 *
 * @return {void} - No return value.
 */
const closeUserForm = () => {
  dialogUserFormVisible.value = false;
  emit("close", dialogUserFormVisible.value);
};
/**
 * 确认用户列表表单回调
 *
 * @return {void} No return value.
 */
const confirmUserForm = () => {
  dialogUserFormVisible.value = false;
  emit("close", dialogUserFormVisible.value);
  emit("confirm", userTags.value);
};

/**
 * 激活搜索按钮操作
 *
 * @return {void} No return value.
 */
const activeSearchBtn = () => {
  is_active_search.value = !is_active_search.value;
  search_input.value = '';
  searchUserList.value = {};
};

/**
 * 在搜索框中同步显示tag框选中的用户
 *
 * @return {void}
 */
const checkSearchStatus = () => {
  userTags.value.forEach(tag => {
    for (const key in searchUserList.value) {
      const element = searchUserList.value[key];
      for (let index = 0; index < element.length; index++) {
        const ele = element[index];
        if (tag.id === ele.id) {
          ele.checked = true;
        }
      }
    }
  });
};

/**
 * 清空搜索回调
 *
 * @return {void}
 */
const onClearSearch = () => {
  is_active_search.value = !is_active_search.value;
  // 同步显示tag框选中的用户
  checkTab(tabCheckedData.value);
};

/**
 * 搜索栏input回调
 * @param {*} val
 */
const onSearchInput = (val) => {
  axios.get('/admin/?a=search_user_dept_role&word=' + val)
  .then(res => {
    if (res.data.code) {
      searchUserList.value = res.data.data;
      // 给列表数据绑定默认选中状态
      for (const key in searchUserList.value) {
        const element = searchUserList.value[key];
        if (element.length) {
          for (let index = 0; index < element.length; index++) {
            const ele = element[index];
            ele.checked = false;
          }
        }
      }
      // 如果 tags 里存在的值，需要在搜索列表中勾选
      checkSearchStatus();
    } else {

    }
  })
  .catch(err => {
    console.warn(err);
  });
}
</script>

<style lang="scss">
.flow-tag__wrapper {
  border: 1px dashed #dcdfe6;
  padding: 10px;
  .text-empty {
    text-align: center;
    color: #dcdfe6;
  }
}

.flow-tabs__wrapper {
  border: 1px solid #dcdfe6;
  padding: 10px;
  margin-top: 10px;

  .search_box {
    padding: 0;
    position: relative;
    margin: 0 0 15px;
  }

  .flow-tabs__nav-wrap {
    overflow: hidden;
    margin-bottom: -1px;
    position: relative;
  }
  .flow-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #e4e7ed;
    /* z-index: 1; */
  }

  .flow-tabs__nav-scroll {
    /* overflow: hidden; */
    overflow: scroll;
  }

  .flow-tabs__active-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: #009688;
    z-index: 1;
    transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
      transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    list-style: none;
  }

  .flow-tabs__nav {
    display: flex;
    white-space: nowrap;
    position: relative;
    transition: transformX(0px);
    float: left;
    .flow-tabs__item {
      padding: 0 20px;
      height: 40px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      list-style: none;
      font-size: 14px;
      font-weight: 500;
      color: #303133;
      position: relative;
      &:hover {
        color: #009688;
        cursor: pointer;
      }
      &.is-active {
        color: #009688;
      }
      &.is-top:nth-child(2) {
        padding-left: 0;
      }
    }
  }

  .flow-tab-search {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    display: flex;
    align-items: center;
    background-color: #e4e7ed;
    padding: 5px 5px 5px 15px;
    border-radius: 15px;
    color: #b1b3b8;
    &:hover {
      cursor: pointer;
    }
  }
}

.flow-checkbox-box {
  border-left: 2px solid #e4e7ed;
  /* width: 2px; */
  height: 100%;
  padding-left: 10px;
}

.flow-checkbox-group {
  .el-checkbox {
    display: flex !important;
  }
}

.search-btn-wrapper {
  .el-input-group__append {
    width: 100px !important;
    padding: 0 !important;
    box-shadow: none!important;
  }
  .search-group {
    display: flex;
    text-align: center;
    .confirm-btn {
      width: 50px;
      color: #fff;
      background-color: #009688;
      &:hover {
        cursor: pointer;
      }
    }
    .cancel-btn {
      width: 50px;
      &:hover {
        cursor: pointer;
      }
    }
  }
}

.el-tag {
  background-color: #009688!important;
  color: white !important;
}
.el-tag .el-tag__close {
  color: white !important;
}
.el-button:focus, .el-button:hover {
  color: #009688!important;
  border-color: #009688!important;
  background-color: white!important;
  outline: 0;
}
.el-checkbox__input.is-checked+.el-checkbox__label {
  color: #009688!important;
}
</style>