<!--
 * @Date: 2023-11-01 10:18:53
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2023-11-01 11:33:00
 * @FilePath: /vue-flow-editor/doc/selectUserView.vue
 * @Description: 文件描述
-->
<template>
  <el-dialog v-model="dialogUserFormVisible" title="成员列表">
    <div style="border: 1px dashed #DCDFE6; padding: 10px;">
      <el-tag
        v-if="userTags.length"
        v-for="tag in userTags"
        :key="tag.name"
        class=""
        style="margin-left: 0.25rem; margin-right: 0.25rem;"
        closable
        @close="handleTagClose(tag)"
      >
        {{ tag.name }}
      </el-tag>
      <div v-else style="text-align: center; color: #DCDFE6;">请选择成员</div>
    </div>
    <div style="border: 1px solid #DCDFE6; padding: 10px; margin-top: 10px;">
      <div style="height: 40px">
        <div style="padding: 0; position: relative; margin: 0 0 15px;">
          <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"
                />
              </el-col>
              <el-col :span="16">
                <div
                  style="border-left: 2px solid #e4e7ed; width: 2px; height: 100%; padding-left: 10px;"
                >
                  <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(() => {
  // console.log(props.visible);
  // // 显示提示框的标志位
  // var showConfirmation = true;
  // // 监听 beforeunload 事件
  // window.addEventListener('beforeunload', function (event) {
  //   if (showConfirmation) {
  //     // 取消事件的默认行为（弹出确认对话框）
  //     event.preventDefault();
  //     // Chrome 和 Firefox 需要返回一个值以显示确认对话框
  //     event.returnValue = '';
  //     // 显示自定义的提示信息
  //     var confirmationMessage = '确定要离开此页面吗？';
  //     (event || window.event).returnValue = confirmationMessage;  // 兼容旧版浏览器
  //     return confirmationMessage;
  //   }
  // });
  // // 监听 unload 事件
  // window.addEventListener('unload', function () {
  //   // 设置标志位为 false，避免在刷新页面时再次显示提示框
  //   showConfirmation = false;
  // });
  // axios.get('/srv/?a=query_form_all_field')
  // .then(res => {
  //   console.warn(res.data);
  // });
  // $('.el-tabs__nav')
  // 根据数据获取选中的tag标签
  // setTagsList(userTabs);
  // TODO:查询到的用户列表数据
  userTags.value = [{ id: "user-1-1", name: "用户1-1" }];
  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, true);
  });
});

watch(() => {
  //
  if (props.visible) {
    dialogUserFormVisible.value = true;
  } else {
    dialogUserFormVisible.value = false;
  }
});

const handleTabClick = (tab, event, idx) => {
  // 点击Tab切换回调
  tabSelectData.value = tab.data; // tab选中数据提供给list类型使用
  userList.value = []; // 清空用户列表
  checkedUserList.value = []; // 清空选中用户列表
  activeTabContent.value = ""; // 清空侧边栏显示
  currentNodeKey.value = []; // 清空树形的默认展开
  // console.log(tab, event);
  // 设置当前激活的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;
  //     });
  // }
};

const handleTabContentClick = (tab, event) => {
  // 侧边栏Tab点击回调
  // console.log(activeTabContent.value);
  // console.log(tab);
  // console.log(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;
        });
    }
  });
};

const handleNodeClick = data => {
  // 树形结构点击回调
  // console.log(data);
  if (data.list) {
    userList.value = data.list;
    checkedUserList.value = data.list
      .filter(ele => {
        return ele.checked;
      })
      .map(ele => {
        return ele.id;
      });
    // console.warn(checkedUserList.value);
    currentNodeKey.value = [data.id];
  }
};

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

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

const handleCheckedUserListChange = (user, checked) => {
  // 勾选用户回调
  // 修改选中值状态
  modifyFieldValue(userTabs.value, "id", user.id, 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 }
);

const handleTagClose = tag => {
  // 移除 tags 成员标签回调
  userTags.value.splice(userTags.value.indexOf(tag), 1); // 删除标签列表中的项
  // 移除数据结构中的选中值
  modifyFieldValue(userTabs.value, "id", tag.id, false);
  //
  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);
    });
  }
};

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

const activeSearchBtn = () => {
  // 激活搜索按钮操作
  is_active_search.value = !is_active_search.value;
  searchUserList.value = []; // 清空搜索列表
};

const checkSearchStatus = () => {
  // 在搜索框中同步显示tag框选中的用户
  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);
};
const checkUserStatus = () => {
  // 在搜索框中同步显示tag框选中的用户
  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);
};

const onClearSearch = () => {
  // 清空搜索回调
  is_active_search.value = !is_active_search.value;
  // 同步显示tag框选中的用户
  checkUserStatus();
};
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-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-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>