<template>
    <div>
        <!-- 输入框 -->
        <template v-if="item.type === 'input'">
            <el-input
                :placeholder="item.placeholder"
                :maxlength="item.maxlength || 255"
                v-model.trim="_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' || item.type === 'selectRemote1' || item.type === 'selectRemote2'">
            <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.code" v-for="option in item.options" :key="option.code" />
            </el-select>
            <!--item.prop -->
        </template>

        <!-- 多选带模糊搜索 -->
        <template v-if="item.type === 'selectMultiple'">
            <!-- multiple -->
            <el-select
                v-model="_searchParam[`${item.prop}`]"
                filterable
                clearable
                multiple
                :disabled="item.disabled"
                :placeholder="item.placeholder"
                class="m-2 select"
                style="width: 224px"
            >
                <!-- 循环渲染选项：label 为显示文本，value 为实际提交值 -->
                <el-option
                    v-for="option in item.options"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                ></el-option>
            </el-select>
        </template>
        <template v-if="item.type === 'selectMultipleD'">
            <!-- multiple -->
            <el-select
                v-model="_searchParam[`${item.prop}`]"
                filterable
                clearable
                :disabled="item.disabled"
                :placeholder="item.placeholder"
                class="m-2 select"
                style="width: 224px"
            >
                <!-- 循环渲染选项：label 为显示文本，value 为实际提交值 -->
                <el-option
                    v-for="option in item.options"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                ></el-option>
            </el-select>
        </template>
        <!-- 双 -->
        <template v-if="item.type === 'inputs'">
            <el-input
                v-model.trim="_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.trim="_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";
//getCustomersApi
import { getSupplierApi, getCustomersApi } from "@/api/modules/global";

import { ref } from "vue";
// const $router = useRouter();
// const routeName: any = ref($router.currentRoute.value.name);
interface SearchFormItem {
    item: { [key: string]: any };
    searchParam: { [key: string]: any };
    search: (params: any) => void; // 搜索方法
    handleEmitClear?: (item: any) => void;
}

const props = defineProps<SearchFormItem>();
const _searchParam = computed(() => props.searchParam);

let loading = ref(false);
//日期选择后重选赋值
const handlePicker = (item: any) => {
    const { prop } = item;
    if (prop === "Time" || prop === "Time1") {
        if (Array.isArray(_searchParam.value[prop]) && _searchParam.value[prop].length > 0) {
            _searchParam.value[item.startDate] = _searchParam.value[prop].join(",");
        } else {
            _searchParam.value[item.startDate] = "";
        }
    }
};
//供应商
const getSupplier = async (keywords: any, item: any) => {
    let org_number = _searchParam.value.org_number.join(",");
    const result: any = await getSupplierApi({ keywords, org_number });
    if (result?.code === 0) {
        const { data } = result;
        item.options = data;
    }
};
//客戶
const getCustomers = async (keywords: any, item: any) => {
    let org_number = _searchParam.value.org_number.join(",");
    const result: any = await getCustomersApi({ keywords, org_number });
    if (result?.code === 0) {
        const { data } = result;
        console.log(item);
        console.log(data);
        // item.options = data;
    }
};

//远程搜索(供应商)
const remoteMethod = async (query: any, item: any) => {
    loading.value = true;
    if (!query) {
        loading.value = false;
        return;
    }
    //去除字符串首尾的所有空白字符。
    let valClone = query.replace(/^\s*|\s*$/g, "");
    if (!valClone.length) {
        loading.value = false;
        return;
    }
    //供应商
    if (item.type === "selectRemote") {
        getSupplier(valClone, item);
    } else if (item.type === "selectRemote1") {
        //客戶編碼
        getCustomers(valClone, item);
    } else if (item.type === "selectRemote2") {
        //品线
    }
    loading.value = false;
};

const handleClear = (item: any) => {
    item.options = [];
};

//input输入监听
const handleInput = (item: any) => {
    //验证
    verificationInput(item, _searchParam);
};

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