<template>
  <div class="top-right-btn"
    :style="style">
    <el-row>
      <el-tooltip class="item"
        effect="dark"
        :content="showSearch ? '隐藏搜索' : '显示搜索'"
        placement="top"
        v-if="search">
        <el-button circle
          icon="Search"
          @click="toggleSearch()" />
      </el-tooltip>
      <el-tooltip class="item"
        effect="dark"
        content="刷新"
        placement="top">
        <el-button circle
          icon="Refresh"
          @click="refresh()" />
      </el-tooltip>
      <el-tooltip class="item "
        effect="dark"
        content="显隐列"
        placement="top"
        v-if="columns">
        <el-button circle
          icon="Menu"
          @click="showColumn()"
          v-if="showColumnsType == 'transfer'" />
        <el-dropdown trigger="click"
          :hide-on-click="false"
          style="padding-left: 12px"
          v-if="showColumnsType == 'checkbox'"
          class="columns-dropdown">
          <el-button circle
            icon="Menu" />
          <template #dropdown>
            <el-dropdown-menu>
              <template v-for="item in columns"
                :key="item.key">
                <el-dropdown-item>
                  <el-checkbox v-model="item.visible"
                    :label="item.label" />
                </el-dropdown-item>
              </template>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <!-- 树结构选择方式 -->
        <el-dropdown trigger="click"
          :hide-on-click="false"
          style="padding-left: 12px"
          v-if="showColumnsType == 'tree'"
          >
          <el-button circle
            icon="Menu" />
          <template #dropdown>
            <el-dropdown-menu class="tree-dropdown-menu">
              <el-tree
                :data="treeData"
                show-checkbox
                node-key="prop"
                ref="columnTree"
                :props="treeProps"
                default-expand-all
                check-on-click-node
                :default-checked-keys="defaultCheckedKeys"
                @check="handleTreeCheck" />
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-tooltip>
      <!-- 自定义功能 -->
      <slot></slot>
    </el-row>
    <el-dialog :title="title"
      v-model="open"
      append-to-body
      draggable overflow>
      <el-transfer :titles="['显示', '隐藏']"
        v-model="value"
        :data="columns"
        @change="dataChange"></el-transfer>
    </el-dialog>
  </div>
</template>

<script setup>
const props = defineProps({
  /* 是否显示检索条件 */
  showSearch: {
    type: Boolean,
    default: true,
  },
  /* 显隐列信息 */
  columns: {
    type: Array,
  },
  /* 是否显示检索图标 */
  search: {
    type: Boolean,
    default: true,
  },
  /* 显隐列类型（transfer穿梭框、checkbox复选框、tree树形结构） */
  showColumnsType: {
    type: String,
    default: "checkbox",
  },
  /* 右外边距 */
  gutter: {
    type: Number,
    default: 10,
  },
  /* 树形结构配置（可选） */
  treeConfig: {
    type: Object,
    default: () => ({
      labelKey: 'label',
      childrenKey: 'children'
    })
  },
  /* 树形结构默认选中的节点 */
  defaultCheckedKeys: {
    type: Array,
    default: () => []
  }
})

const emits = defineEmits(['update:showSearch', 'queryTable']);

// 显隐数据
const value = ref([]);
// 弹出层标题
const title = ref("显示/隐藏");
// 是否显示弹出层
const open = ref(false);
// 树结构数据
const treeData = ref([]);
// 树结构配置
const treeProps = {
  label: props.treeConfig.labelKey || 'label',
  children: props.treeConfig.childrenKey || 'children'
};
// 树引用
const columnTree = ref(null);

const style = computed(() => {
  const ret = {};
  if (props.gutter) {
    ret.marginRight = `${props.gutter / 2}px`;
  }
  return ret;
});

// 搜索
function toggleSearch() {
  emits("update:showSearch", !props.showSearch);
}

// 刷新
function refresh() {
  emits("queryTable");
}

// 右侧列表元素变化
function dataChange(data) {
  for (let item in props.columns) {
    const key = props.columns[item].key;
    props.columns[item].visible = !data.includes(key);
  }
}

// 打开显隐列dialog
function showColumn() {
  open.value = true;
}

// 树形结构节点勾选变化
function handleTreeCheck(currentNode, checkedInfo) {
  const node = currentNode;
  
  // 判断当前节点是否被勾选（检查当前节点prop是否在checkedKeys中）
  const isChecked = checkedInfo.checkedKeys.includes(node.prop);
  
  // 处理父节点的特殊情况：如果是父节点（有children），则更新其所有子节点
  if (node.children && node.children.length > 0) {
    // 获取该父节点下的所有子节点prop
    const allChildProps = [];
    const collectChildProps = (nodes) => {
      nodes.forEach(child => {
        if (child.children && child.children.length > 0) {
          collectChildProps(child.children);
        } else {
          allChildProps.push(child.prop);
        }
      });
    };
    collectChildProps(node.children);
    
    // 更新所有子节点的visible属性
    allChildProps.forEach(prop => {
      updateColumnVisibilityByProp(prop, isChecked);
    });
  } else {
    // 对于单个节点，直接更新其visible属性
    updateColumnVisibilityByProp(node.prop, isChecked);
  }
}
// 新增：根据prop更新对应列的visible属性
function updateColumnVisibilityByProp(prop, visible) {
  const updateColumn = (columns) => {
    for (let i = 0; i < columns.length; i++) {
      const item = columns[i];
      
      if (item.children && item.children.length > 0) {
        // 递归查找子节点
        const found = updateColumn(item.children);
        if (found) return true;
      } else if (item.prop === prop) {
        // 找到匹配的节点，更新其visible属性
        item.visible = visible;
        return true;
      }
    }
    return false;
  };
  
  // 从props.columns中查找并更新
  updateColumn(props.columns);
}

// 3. 修改initTreeData方法，确保正确处理prop字段
function initTreeData() {
  if (props.columns && props.showColumnsType === 'tree') {
    // 创建树数据但不深拷贝，保持引用关系
    treeData.value = props.columns;
  }
}
watch(() => props.columns, () => {
  if (props.showColumnsType === 'tree') {
    initTreeData();
  }
})
// 再添加一个watcher来监听showColumnsType变化
watch(
  () => props.showColumnsType,
  (newType, oldType) => {
    if (newType === 'tree') {
      initTreeData();
    }
  }
)

if (props.showColumnsType == 'transfer') {
  // 显隐列初始默认隐藏列
  for (let item in props.columns) {
    if (props.columns[item].visible === false) {
      value.value.push(parseInt(item));
    }
  }
} else if (props.showColumnsType === 'tree') {
  // 初始化树数据
  initTreeData();
}

// 勾选 - 修改为更健壮的实现
// function checkboxChange(event, label) {
//   // 使用find方法而不是filter，更高效
//    const column = props.columns.find(item => item.label === label);
//   if (column) {
//     column.visible = event;
//   }
// }
</script>

<style lang='scss'
  scoped>
  :deep(.el-transfer__button) {
    border-radius: 50%;
    display: block;
    margin-left: 0px;
  }

  :deep(.el-transfer__button:first-child) {
    margin-bottom: 10px;
  }

  :deep(.el-dropdown-menu__item) {
    line-height: 30px;
    padding: 0 17px;
  }

  :deep(.el-button) {
    margin-left: 12px;
  }

  .el-dropdown {
    .el-button {
      margin-left: 0;
    }
  }
  
  /* 树结构下拉菜单样式 */
  .tree-dropdown-menu {
    max-height: 400px;
    overflow-y: auto;
    min-width: 300px;
    padding: 10px;
  }
  
  :deep(.el-tree) {
    max-height: 380px;
    overflow-y: auto;
  }
  
  /* 添加选中节点文字蓝色样式 */
  :deep(.el-tree-node.is-checked > .el-tree-node__content .el-tree-node__label) {
    color: #409EFF;
  }
  
  :deep(.el-tree-node__content .el-checkbox__input.is-checked + .el-checkbox__label) {
    color: #409EFF;
  }
</style>