<!--
 * @Date: 2023-11-01 10:18:53
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2023-11-22 11:39:41
 * @FilePath: /vue-flow-editor/doc/selectUserView.vue
 * @Description: 成员列表选择控件
-->
<template>
  <el-dialog
    v-model="dialogUserFormVisible"
    title="成员列表"
    @close="closeUserForm"
  >
    <div class="flow-tag__wrapper">
      <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)"
      >
        {{ tag.name }}
      </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)"
                  >
                    {{ item.name }}
                  </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"
              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="confirm-btn" @click="onSearch">搜索</div>
                  <div class="cancel-btn" @click="onClearSearch">取消</div>
                </div>
              </template>
            </el-input>
          </div>
        </div>
      </div>
      <!-- 未激活搜索框 -->
      <div v-if="!is_active_search" style="max-height: 300px; overflow: scroll;">
        <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">
                <el-tree
                  ref="corpTreeRef"
                  :data="item.data"
                  :props="defaultProps"
                  show-checkbox
                  node-key="id"
                  :default-expanded-keys="currentNodeKey"
                  :default-checked-keys="currentCheckedNodeKey"
                  :check-strictly="true"
                  empty-text="暂无数据"
                  @check="checkNode"
                  style="margin-top: 10px;"
                />
              </el-col>
            </el-row>
          </div>
          <!-- 成员选择树 -->
          <div v-if="item.id === activeTabId && item.type === 'user-tree'">
            <el-row>
              <el-col :span="8">
                <el-tree
                  ref="userTreeRef"
                  :data="item.data"
                  :props="defaultProps"
                  node-key="id"
                  :default-expanded-keys="currentNodeKey"
                  :highlight-current="true"
                  empty-text="暂无数据"
                  @node-click="handleNodeClick"
                  style="margin-top: 10px;"
                />
              </el-col>
              <el-col :span="16">
                <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>
          <div v-if="item.id === activeTabId && item.type === 'role-list'">
            <el-row>
              <el-col :span="24">
                <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 === ''">
            <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>
        <el-checkbox-group
          class="flow-checkbox-group"
          style="padding-left: 10px;"
          v-model="checkedSearchUserList"
        >
          <el-checkbox
            v-for="(user, idx) in searchUserList"
            :key="idx"
            :label="user.id"
            :disabled="user.disabled"
            @change="handleCheckedUserListChange(user, $event)"
            >{{ user.name }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeUserForm">取消</el-button>
        <el-button type="primary" @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";

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

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

const dialogUserFormVisible = ref(false);
const userTags = ref([]); // 现在只维护选中的用户列表，以它为基准维护其他列表选中情况
const currentNodeKey = ref([]); // 当前展开的节点
const currentCheckedNodeKey = ref([]); // 当前选中的节点
const activeTabId = ref("tab-corp"); // TODO: 需要获取默认第一个ID
const activeTabIdx = ref(0); // 默认激活tab的index
const activeTabContent = ref("");
const userTabs = ref([
  {
    id: "tab-corp",
    name: "组织结构",
    type: "corp-tree",
    data: []
  },
  {
    id: "tab-uer",
    name: "成员",
    type: "user-tree",
    data: []
  },
  {
    id: "tab-role",
    name: "角色",
    type: "role-list",
    data: []
  }
]);
const tabSelectData = ref([]);
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 () => {
  // TAG：接口获取组织结构数据
  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);
  }
  if (role_list.data.code) {
    roleList.value = role_list.data.data;
  }
  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;
    }
  });
  // 根据数据获取选中的tag标签
  // setTagsList(userTabs);
  // TODO: 查询到的用户选中列表数据
  userTags.value = [{ id: 35697, name: "西园寺" },{ id: 492081, name: "营员" }];
  // //
  // const role_raw_data = [
  //   {
  //     "id": 624337,
  //     "name": "八关斋戒"
  //   },
  //   {
  //     "id": 82983,
  //     "name": "场地管理"
  //   },
  //   {
  //     "id": 83245,
  //     "name": "场地使用"
  //   },
  // ];
  // let role_list = ref([]);
  // role_raw_data.forEach(item => {
  //   role_list.value.push({
  //     id: item.id,
  //     label: item.name,
  //     checked: false,
  //     disabled: false
  //   })
  // })
  // const role_data = ref({
  //   id: "tab-2",
  //   label: "角色",
  //   type: "select",
  //   data: [
  //     {
  //       id: "",
  //       label: "",
  //       children: [],
  //       list: role_list.value
  //     },
  //   ]
  // })
  // TODO: 查询到的用户列表数据
  // userTabs.value = [
  //   {
  //     id: "tab-0",
  //     label: "组织架构",
  //     type: "corp-tree",
  //     data: [
  //       {
  //         id: "corp-1",
  //         label: "组织结构 1",
  //         children: [
  //           {
  //             id: "dept-1-1",
  //             label: "组织结构 1-1",
  //             children: [],
  //             list: [
  //               {
  //                 id: "user-1-1",
  //                 label: "组织1-1",
  //                 checked: false,
  //                 disabled: false
  //               },
  //               {
  //                 id: "user-1-2",
  //                 label: "组织1-2",
  //                 checked: false,
  //                 disabled: false
  //               },
  //               {
  //                 id: "user-1-3",
  //                 label: "组织1-3",
  //                 checked: false,
  //                 disabled: true
  //               }
  //             ]
  //           }
  //         ]
  //       },
  //       {
  //         id: "dept-2",
  //         label: "上级部门 2",
  //         children: [
  //           {
  //             id: "dept-2-1",
  //             label: "部门名称 2-1",
  //             children: [],
  //             list: [
  //               {
  //                 id: "user-2-1",
  //                 label: "用户2-1",
  //                 checked: false,
  //                 disabled: false
  //               },
  //               {
  //                 id: "user-2-2",
  //                 label: "用户2-2",
  //                 checked: false,
  //                 disabled: false
  //               },
  //               {
  //                 id: "user-2-3",
  //                 label: "用户2-3",
  //                 checked: false,
  //                 disabled: true
  //               }
  //             ]
  //           }
  //         ]
  //       }
  //     ]
  //   },
  //   {
  //     id: "tab-1",
  //     label: "成员",
  //     type: "user-tree",
  //     data: [
  //       {
  //         id: "dept-1",
  //         label: "上级部门 1",
  //         children: [
  //           {
  //             id: "dept-1-1",
  //             label: "部门名称 1-1",
  //             children: [],
  //             list: [
  //               {
  //                 id: "user-1-1",
  //                 label: "用户1-1",
  //                 checked: false,
  //                 disabled: false
  //               },
  //               {
  //                 id: "user-1-2",
  //                 label: "用户1-2",
  //                 checked: false,
  //                 disabled: false
  //               },
  //               {
  //                 id: "user-1-3",
  //                 label: "用户1-3",
  //                 checked: false,
  //                 disabled: true
  //               }
  //             ]
  //           }
  //         ]
  //       },
  //       {
  //         id: "dept-2",
  //         label: "上级部门 2",
  //         children: [
  //           {
  //             id: "dept-2-1",
  //             label: "部门名称 2-1",
  //             children: [],
  //             list: [
  //               {
  //                 id: "user-2-1",
  //                 label: "用户2-1",
  //                 checked: false,
  //                 disabled: false
  //               },
  //               {
  //                 id: "user-2-2",
  //                 label: "用户2-2",
  //                 checked: false,
  //                 disabled: false
  //               },
  //               {
  //                 id: "user-2-3",
  //                 label: "用户2-3",
  //                 checked: false,
  //                 disabled: true
  //               }
  //             ]
  //           }
  //         ]
  //       }
  //     ]
  //   },
  //   {
  //     id: "tab-2",
  //     label: "角色",
  //     type: "role-list",
  //     data: [
  //       {
  //         id: "role-1-1",
  //         label: "流程发起人",
  //         children: [],
  //         list: [
  //           {
  //             id: "user-1-1",
  //             label: "用户1-1",
  //             checked: true,
  //             disabled: false
  //           },
  //           {
  //             id: "user-2-2",
  //             label: "用户2-2",
  //             checked: false,
  //             disabled: false
  //           },
  //           {
  //             id: "role-1-4",
  //             label: "选项 C",
  //             checked: false,
  //             disabled: true
  //           }
  //         ]
  //       },
  //       {
  //         id: "role-1-2",
  //         label: "成员字段",
  //         children: [],
  //         list: []
  //       },
  //       {
  //         id: "role-1-3",
  //         label: "部门字段",
  //         children: [],
  //         list: []
  //       },
  //       {
  //         id: "role-1-4",
  //         label: "主管",
  //         children: [],
  //         list: []
  //       }
  //     ]
  //   }
  // ];
  // userTabs.value = userTabs.value.concat(role_data.value);
  // 对比选中的用户的 ID，选中的 ID 同步状态到 userTabs 的数据结构上
  // userTags.value.forEach(ele => {
  //   modifyFieldValue(userTabs.value, "id", ele.id, "checked", true);
  // });
  // TODO: 组织结构处理可能需要优化
  // 因为第一个是组织结构树，默认展开第一个节点
  if (userTabs.value[activeTabIdx.value]['type'] === 'corp-tree') {
    if (userTabs.value[activeTabIdx.value]['data'].length) {
      currentNodeKey.value = [userTabs.value[activeTabIdx.value]['data'][0]['id']];
      // 把选中的节点注入树结构显示选中状态
      nextTick(() => {
        currentCheckedNodeKey.value = userTags.value.map(ele => ele.id);
      });
    }
  }
});

watch(() => {
  // TAG：监听弹框状态
  if (props.visible) {
    dialogUserFormVisible.value = true;
  } else {
    dialogUserFormVisible.value = false;
  }
});

/**
 * 点击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选中数据提供给list类型使用
  userList.value = []; // 清空用户列表
  checkedUserList.value = []; // 清空选中用户列表
  activeTabContent.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";
  //
  console.warn(tab);
  // 组织结构树，默认展开第一个节点, 把选中用户ID显示到数
  if (tab.type === 'corp-tree') {
    if (tab.data.length) {
      currentNodeKey.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) {
      currentNodeKey.value = [tab.data[0]['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) {
      console.warn(ele);
      // 设置右侧显示数据
      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节点
    currentNodeKey.value = [data.id];
  }
};

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

/**
 * 递归获取树形结构下的所有 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;
}

/**
 * 根据 userTabs 的选中状态，更新 tag 选中列表显示
 * 获取生成 list 集合的 checked 状态，生成 tags 的勾选显示
 *
 * @param {Array} val - userTabs
 */
const setTagsList = val => {
  let userList = []; // 存储所有的list数据
  val.forEach(ele => {
    let data = getAllListItems(ele.data);
    userList.push(data);
  });
  // 合并成一维数组列表
  userList = [...userList.flat()];
  // 如果ID相同，需要数据去重
  let uniqueArray = userList.filter(
    (value, index, self) => index === self.findIndex(obj => obj.id === value.id)
  );
  // 勾选变化后同步到选中列表
  userTags.value = uniqueArray
    .filter(ele => {
      return ele.checked;
    })
    .map(ele => {
      return {
        id: ele.id,
        name: ele.name
      };
    });
};

watch(
  // TAG: watch userTabs.value 监听数据结构选中值变化
  () => userTabs.value,
  val => {
    if (val) {
      // 更新 tags 选中列表显示
      // setTagsList(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': // 成员

      break;
    case 'tab-role': // 角色

      break;
  }
  // // 移除数据结构中的选中值
  // modifyFieldValue(userTabs.value, "id", tag.id, "checked", false);
  // // 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;
  searchUserList.value = []; // 清空搜索列表
};

/**
 * 在搜索框中同步显示tag框选中的用户
 *
 * @return {void}
 */
const checkSearchStatus = () => {
  userTags.value.forEach(ele => {
    searchUserList.value.forEach(item => {
      if (ele.id === item.id) {
        item.checked = true;
      }
    });
  });
  // 显示选中tags的用户
  checkedSearchUserList.value = searchUserList.value
    .filter(ele => ele.checked)
    .map(ele => ele.id);
};
/**
 * 在搜索框中同步显示tag框选中的用户
 *
 * @param {Array} userTags - The array of selected user tags.
 * @param {Array} userList - The array of all users.
 * @param {Array} checkedUserList - The array of users with selected tags.
 * @return {void} No return value.
 */
const checkUserStatus = () => {
  userTags.value.forEach(ele => {
    userList.value.forEach(item => {
      if (ele.id === item.id) {
        item.checked = true;
      }
    });
  });
  // 显示选中tags的用户
  checkedUserList.value = userList.value
    .filter(ele => ele.checked)
    .map(ele => ele.id);
};

/**
 * 清空搜索回调
 *
 * @return {void}
 */
const onClearSearch = () => {
  is_active_search.value = !is_active_search.value;
  // 同步显示tag框选中的用户
  checkUserStatus();
};
/**
 * 搜索回调
 *
 * @return {void} No return value.
 */
const onSearch = () => {
  // TODO: 获取后台数据
  searchUserList.value = [
    {
      id: "user-1-1",
      name: "用户1-1",
      checked: false,
      disabled: false
    },
    {
      id: "user-1-2",
      name: "用户1-2",
      checked: false,
      disabled: false
    },
    {
      id: "user-1-3",
      name: "用户1-3",
      checked: false,
      disabled: true
    }
  ];
  // 如果 tags 里存在的值，需要在搜索列表中勾选
  checkSearchStatus();
};

watch(
  // TAG: watch dialogUserFormVisible.value 监听弹框显示，修改tab文字宽度
  () => dialogUserFormVisible.value,
  val => {
    if (val) {
      nextTick(() => {
        tabTextWidth.value = $("#" + activeTabId.value).width() + "px";
      });
    }
  }
);
</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: #409eff;
    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: #409eff;
        cursor: pointer;
      }
      &.is-active {
        color: #409eff;
      }
      &.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;
  }
  .search-group {
    display: flex;
    text-align: center;
    .confirm-btn {
      width: 50px;
      color: #fff;
      background-color: #409eff;
      &:hover {
        cursor: pointer;
      }
    }
    .cancel-btn {
      width: 50px;
      &:hover {
        cursor: pointer;
      }
    }
  }
}
</style>