<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"
                :render-after-expand="false"
                show-checkbox
                style="width: 224px"
                clearable
            />
        </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 $Bus from "@/utils/mittBus";
import { cloneDeep } from "lodash-es";
import { ref } from "vue";
const $router = useRouter();

const routeName: any = ref($router.currentRoute.value.name);
// 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(1);
const options = [
    {
        value: 1,
        label: "序号"
    },
    {
        value: 2,
        label: "数字序列号"
    }
];

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 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);

    if (routeName.value === "barCode") {
        $Bus.emit("clearBarCodeCreateUser");
    }
    if (routeName.value === "boxCode") {
        $Bus.emit("clearBoxCodeCreateUser");
    }
    if (routeName.value === "boxMarkIndex") {
        $Bus.emit("clearBoxMarkIndexCreator");
    }
};
</script>
<style lang="scss" scope>
@import "../index.scss";
</style>
