<!--
 * @Date: 2023-11-01 10:18:53
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2023-11-01 15:32:45
 * @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;"
        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.label }}
                  </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">
        <div v-for="(item, index) in userTabs" :key="index">
          <div v-if="item.id === activeTabId && item.type === 'tree'">
            <el-row>
              <el-col :span="8">
                <el-tree
                  :data="item.data"
                  :props="defaultProps"
                  node-key="id"
                  :default-expanded-keys="currentNodeKey"
                  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.label }}</el-checkbox
                    >
                  </el-checkbox-group>
                </div>
              </el-col>
            </el-row>
          </div>
          <div v-if="item.id === activeTabId && item.type === 'list'">
            <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.label"
                :label="role.label"
              >
                <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.label }}</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";

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

const dialogUserFormVisible = ref(false);
const userTags = ref([]);
const currentNodeKey = ref([]); // 当前展开的节点
const activeTabId = ref("tab-1"); // TODO: 需要获取默认第一个ID
const activeTabContent = ref("");
const userTabs = ref([]);
const tabSelectData = ref([]);
const userTabType = ref("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: "label"
});

onMounted(() => {
  // axios.get('/srv/?a=query_form_all_field')
  // .then(res => {
  //   console.warn(res.data);
  // });
  // 根据数据获取选中的tag标签
  // setTagsList(userTabs);
  // TODO: 查询到的用户选中列表数据
  userTags.value = [{ id: "user-1-1", name: "用户1-1" }];
  // TODO: 查询到的用户列表数据
  userTabs.value = [
    {
      id: "tab-1",
      label: "组织架构",
      type: "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: "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: []
        }
      ]
    }
  ];
  // 对比选中的用户的 ID，选中的 ID 同步状态到 userTabs 的数据结构上
  userTags.value.forEach(ele => {
    modifyFieldValue(userTabs.value, "id", ele.id, "checked", true);
  });
});

watch(() => {
  // 监听弹框状态
  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;
  // 子容器相对于父容器的相对x轴位移, 第一项为0
  if (idx) {
    tabOffset.value = $("#" + tab.id).position().left + 20 + "px";
  } else {
    tabOffset.value = "0px";
  }
  // 文字宽度
  tabTextWidth.value = $("#" + tab.id).width() + "px";
  // 检查列表第一项是否有值
  // if (tab?.data[0]?.list) {
  //   let list = tab.data[0].list;
  //   userList.value = list;
  //   checkedUserList.value = list
  //     .filter(ele => {
  //       return ele.checked;
  //     })
  //     .map(ele => {
  //       return 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.label === tab.props.label) {
      // 设置右侧显示数据
      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.list) {
    // 如果节点下存在 list 字段，设置为右侧显示数据列表
    userList.value = data.list;
    checkedUserList.value = data.list
      .filter(ele => {
        return ele.checked;
      })
      .map(ele => {
        return ele.id;
      });
    // 默认展开相应ID节点
    currentNodeKey.value = [data.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) => {
  // 修改选中值状态
  modifyFieldValue(userTabs.value, "id", user.id, "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;
}

/**
 * 根据 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.label
      };
    });
};

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); // 删除标签列表中的项
  // 移除数据结构中的选中值
  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",
      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
    }
  ];
  // 如果 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>