<template>
    <div>
        <!-- 输入框 -->
        <template v-if="item.type === 'input'">
            <el-input
                :placeholder="item.placeholder"
                :maxlength="item.maxlength || 255"
                v-model="_searchParam[`${item.prop}`]"
                style="width: 224px"
                @input="handleInput(item)"
                @keyup.enter="search"
                clearable
                @clear="handleEmitClear(item)"
            />
        </template>
        <!-- 下拉框 -->
        <template v-if="item.type === 'select'">
            <el-select
                v-model="_searchParam[`${item.prop}`]"
                :placeholder="item.placeholder"
                clearable
                ref="selectRef"
                style="width: 224px"
            >
                <el-option v-for="option in item.options" :label="option.label" :value="option.value" :key="option.label" />
            </el-select>
        </template>
        <!-- 开始-结束-日期选择器 -->
        <template v-if="item.type === 'daterange'">
            <el-date-picker
                v-model="_searchParam[`${item.prop}`]"
                :type="item.type"
                :start-placeholder="item.startPlaceholder"
                :end-placeholder="item.endPlaceholder"
                :defaultTime="item.value"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                style="width: 205px"
                @change="handlePicker(item)"
            />
        </template>
        <!-- 远程搜索 -->
        <template v-if="item.type === 'selectRemote'">
            <el-select
                v-model="_searchParam[`${item.prop}`]"
                :placeholder="item.placeholder"
                clearable
                remote
                filterable
                @clear="handleClear(item)"
                :loading="loading"
                class="m-2 select"
                remote-show-suffix
                :remote-method="
                          (query:any) => {
                            remoteMethod(
                              query,
                              item
                            );
                          }
                        "
                :disabled="item.disabled"
                style="width: 224px"
            >
                <el-option :label="option.name" :value="option.id" v-for="option in item.options" :key="option.id" />
            </el-select>
            <!--item.prop -->
        </template>
        <!-- el-tree-select -->
        <template v-if="item.type === 'treeSelect'">
            <el-tree-select
                v-model="_searchParam[`${item.prop}`]"
                :data="item.options"
                :placeholder="item.placeholder"
                multiple
                :render-after-expand="false"
                :check-strictly="false"
                show-checkbox
                style="width: 224px"
                ref="treeSelectRef"
                @change="handleTreeSelectChange(item)"
                @remove-tag="handleRemoveTag(item, $event)"
            />
        </template>
        <!-- 双 -->
        <template v-if="item.type === 'inputs'">
            <el-input
                v-model="_searchParam[`${item.startProp}`]"
                :placeholder="item.startPlaceholder"
                :disabled="item.disabled"
                maxlength="255"
                style="width: 105px !important"
                @input="handleInput(item)"
            >
            </el-input>
            <span style="margin: 0 3px">-</span>
            <el-input
                v-model="_searchParam[`${item.endProp}`]"
                :placeholder="item.endPlaceholder"
                :disabled="item.disabled"
                maxlength="255"
                style="width: 106px !important"
                @input="handleInput(item)"
            />
        </template>
        <template v-if="item.type === 'dateTimerange'">
            <el-date-picker
                v-model="_searchParam[`${item.prop}`]"
                type="datetimerange"
                range-separator="至"
                :start-placeholder="item.startPlaceholder"
                :end-placeholder="item.endPlaceholder"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                style="width: 205px"
            />
        </template>

        <!-- <template v-if="item.type === 'selectInputs'">
            <div></div>
            <el-select
                v-model="selectInputValue"
                placeholder="Select"
                style="width: 102px; height: 30px; margin-right: 6px"
                class="selectInputs-box"
                @change="handleChange(item)"
            >
                <el-option
                    v-for="optionsItem in options"
                    :key="optionsItem.value"
                    :label="optionsItem.label"
                    :value="optionsItem.value"
                />
            </el-select>

            <el-input
                v-model="_searchParam[`${item.startProp}`]"
                :placeholder="item.startPlaceholder"
                :disabled="item.disabled"
                maxlength="255"
                style="width: 105px !important"
                @input="handleInput(item)"
            >
            </el-input>
            <span style="margin: 0 3px">-</span>
            <el-input
                v-model="_searchParam[`${item.endProp}`]"
                :placeholder="item.endPlaceholder"
                :disabled="item.disabled"
                maxlength="255"
                style="width: 106px !important"
                @input="handleInput(item)"
            />
        </template> -->
    </div>
</template>

<script lang="ts" setup name="SearchFormItem">
// import { verificationInput } from "./utils/verificationInput";
import { getCountryListApi } from "@/api/modules/global";
import { cloneDeep } from "lodash-es";
// import { ref } from "vue";
const $router = useRouter();

const routeName: any = ref($router.currentRoute.value.name);
const treeSelectRef = ref<any>(null);
// const userStore: any = useUserStore();
interface SearchFormItem {
    item: { [key: string]: any };
    searchParam: { [key: string]: any };
    search: (params: any) => void; // 搜索方法
    handleEmitClear?: (item: any) => void;
}
// let selectInputValue = ref();

// const treeSelectValue = ref(null);
const props = defineProps<SearchFormItem>();
const _searchParam = computed(() => props.searchParam);

let loading = ref(false);
//日期选择后重选赋值
const handlePicker = (item: any) => {
    const { prop } = item;
    if (Array.isArray(_searchParam.value[prop]) && _searchParam.value[prop].length > 0) {
        let _date: any = cloneDeep(_searchParam.value[prop]);
        _date[0] = _date[0] + " " + "00:00:00";
        _date[1] = _date[1] + " " + "23:59:59";
        _searchParam.value[item.startDate] = _date.join(",");
    } else {
        _searchParam.value[item.startDate] = "";
    }
};
//远程搜索(供应商)
const remoteMethod = async (query: any, item: any) => {
    console.log(query, item);
    loading.value = true;
    if (!query) {
        loading.value = false;
        return;
    }
    let valClone = query.replace(/^\s*|\s*$/g, "");
    if (!valClone.length) {
        loading.value = false;
        return;
    }
    const result = await getCountryListApi({ name: valClone });
    if (result?.code === 0) {
        const { data } = result;
        console.log(data, "=======data=======");
        item.options = data;
    }
    loading.value = false;
};

// 关闭标签时同步 - 修复版
const handleRemoveTag = (item: any, removedValue: any) => {
    nextTick(() => {
        // 从item.options获取树形数据，这是我们传递给组件的数据源
        const allNodes = Array.isArray(item.options) ? item.options : [];
        console.log(allNodes, "=allNodes=");
        // 找到被删除的节点
        const removedNode = findNode(allNodes, removedValue);
        console.log(removedNode, "=removedNode=");
        let ids: any = [];
        if (removedNode) {
            // 判断被删除的是父节点还是子节点
            if (removedNode.children && Array.isArray(removedNode.children) && removedNode.children.length > 0) {
                // 是父节点，需要删除所有子节点
                const childIds = getAllChildIds(removedNode);
                // 从选中值中移除父节点和所有子节点
                ids = (_searchParam.value[item.prop] || []).filter((id: any) => !childIds.includes(id) && id !== removedNode.id);
                nextTick(() => {
                    _searchParam.value[item.prop] = ids;
                    _searchParam.value[item.prop1] = ids.join(",");
                });
            } else {
                // 是子节点，需要找到其父节点并删除
                const parentNode = findParentNode(allNodes, removedValue);
                if (parentNode) {
                    // 从选中值中移除子节点和父节点
                    ids = (_searchParam.value[item.prop] || []).filter((id: any) => id !== removedValue && id !== parentNode.id);
                    nextTick(() => {
                        _searchParam.value[item.prop] = ids;
                        _searchParam.value[item.prop1] = ids.join(",");
                    });
                } else {
                    ids = (_searchParam.value[item.prop] || []).filter((id: any) => id !== removedValue && id !== parentNode.id);
                    nextTick(() => {
                        _searchParam.value[item.prop] = ids;
                        _searchParam.value[item.prop1] = ids.join(",");
                    });
                }
            }
        }

        syncCheckedIds(item);
    });
};

// 辅助方法：查找节点
const findNode = (nodes: any[], value: any): any => {
    if (!Array.isArray(nodes)) return null;

    for (const node of nodes) {
        if (node?.id === value) {
            return node;
        }
        if (node?.children && Array.isArray(node.children) && node.children.length > 0) {
            const found = findNode(node.children, value);
            if (found) return found;
        }
    }
    return null;
};

// 辅助方法：查找父节点
const findParentNode = (nodes: any[], value: any, parent: any = null): any => {
    if (!Array.isArray(nodes)) return null;

    for (const node of nodes) {
        if (node?.id === value) {
            return parent;
        }
        if (node?.children && Array.isArray(node.children) && node.children.length > 0) {
            const foundParent = findParentNode(node.children, value, node);
            if (foundParent) return foundParent;
        }
    }
    return null;
};

// 辅助方法：获取所有子节点ID
const getAllChildIds = (node: any): any[] => {
    let ids: any[] = [];
    if (node?.children && Array.isArray(node.children) && node.children.length > 0) {
        for (const child of node.children) {
            if (child?.id) {
                ids.push(child.id);
                ids = [...ids, ...getAllChildIds(child)];
            }
        }
    }
    return ids;
};

// 统一同步选中ID的方法
const syncCheckedIds = (item: any) => {
    // 获取所有全选中的节点（包括父节点）
    const allCheckedNodes = treeSelectRef.value.getCheckedNodes(false, false);

    const allCheckedIds = allCheckedNodes.map((node: any) => node.id);
    _searchParam.value[item.prop] = allCheckedIds;
    // 同步到搜索参数
    _searchParam.value[item.prop1] = allCheckedIds.length ? allCheckedIds.join(",") : null;
};

const handleTreeSelectChange = (item: any) => {
    console.log(routeName.value);
    if (routeName.value === "articleListIndex") {
        // 通过ref获取组件实例
        if (treeSelectRef.value) {
            syncCheckedIds(item);
            return;
        }
    }

    if (_searchParam.value[item.prop].length) {
        let values = cloneDeep(_searchParam.value[item.prop]);
        _searchParam.value[item.prop1] = values.join(",");
    } else {
        _searchParam.value[item.prop1] = "";
    }
};
const handleClear = (item: any) => {
    item.options = [];
};

//input输入监听
const handleInput = (item: any) => {
    console.log(item, "=====item=====");
    //验证
    // verificationInput(item, _searchParam, selectInputValue.value);
};
// const handleChange = (item: any) => {
//     _searchParam.value[item.endProp] = "";
//     _searchParam.value[item.startProp] = "";
//     _searchParam.value["serialNumberBegin"] = "";
//     _searchParam.value["numberCodeBegin"] = "";
//     _searchParam.value["serialNumberEnd"] = "";
//     _searchParam.value["numberCodeEnd"] = "";
// };

const handleEmitClear = (item: any) => {
    console.log(item);
};
</script>
<style lang="scss" scope>
@import "../index.scss";
</style>
