<template>
    <div class="search-box">
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :inline="true"
            class="form-box"
            :show-message="false"
            style="height: 100%"
            :label-width="100"
        >
            <template v-for="item in formData" :key="item.prop">
                <el-form-item
                    :label="item.label"
                    :prop="item.prop"
                    :label-width="item.labelWidth"
                    :rules="item.rules"
                    :error="item.error"
                    :show-message="item.showMessage ? item.showMessage : false"
                    :inline-message="item.inlineMessage"
                    :required="item.required"
                    class="form-item"
                    :style="item.formItemStyle"
                >
                    <!-- 输入框 -->
                    <template v-if="item.type === 'input'">
                        <el-input
                            v-model.trim="ruleForm[`${item.prop}`]"
                            :placeholder="item.placeholder"
                            :disabled="item.disabled"
                            :maxlength="item.maxLength || 255"
                            @input="handleInputValue(item.prop)"
                            :style="item.style"
                        >
                            <template #append v-if="item.isCopy">
                                <span :data-clipboard-text="ruleForm[`${item.prop}`]" class="copyBtn">
                                    <el-icon><DocumentCopy /></el-icon>
                                </span>
                            </template>
                        </el-input>
                        <template v-if="item.txt">
                            <span style="padding-left: 8px">{{ item.txt }}</span>
                        </template>
                    </template>
                    <!-- 下拉框 -->
                    <template v-if="item.type === 'select'">
                        <el-select
                            v-model="ruleForm[`${item.prop}`]"
                            :placeholder="item.placeholder"
                            clearable
                            :disabled="item.disabled"
                            style="width: 224px"
                            ref="selectRef"
                        >
                            <el-option
                                v-for="options in item.options"
                                :label="options.label"
                                :value="options.value"
                                :key="options.label"
                            />
                        </el-select>
                    </template>
                    <!-- 本地搜索下拉 -->
                    <template v-if="item.type === 'selectFilterable'">
                        <el-select
                            v-model="ruleForm[`${item.prop}`]"
                            :placeholder="item.placeholder"
                            clearable
                            :disabled="item.disabled"
                            style="width: 224px"
                            ref="selectRef"
                            filterable
                        >
                            <el-option
                                v-for="options in item.options"
                                :label="options.label"
                                :value="options.value"
                                :key="options.label"
                            />
                        </el-select>
                    </template>
                    <!-- 单个日期选择 -->
                    <template v-if="item.type === 'date'">
                        <el-date-picker
                            :disabled="item.disabled"
                            v-model="ruleForm[`${item.prop}`]"
                            :type="item.type"
                            :placeholder="item.placeholder"
                            format="YYYY-MM-DD"
                            :style="item.style || 'width: 224px'"
                            value-format="YYYY-MM-DD"
                        />
                    </template>
                    <!-- 开始-结束-日期选择器 -->
                    <template v-if="item.type === 'daterange'">
                        <el-date-picker
                            v-model="ruleForm[`${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"
                        />
                    </template>
                    <!-- 远程搜索下拉框 -->
                    <template v-if="item.type === 'selectRemote'">
                        <el-select
                            v-model="ruleForm[`${item.prop}`]"
                            :placeholder="item.placeholder"
                            clearable
                            remote
                            reserve-keyword
                            filterable
                            ref="slectRef1"
                            class="m-2 select"
                            remote-show-suffix
                            :remote-method="
                                (query:any) => {
                                  remoteMethod(
                                    query,
                                    item.prop
                                  );
                                }
                              "
                            :disabled="item.disabled"
                        >
                            <el-option
                                :label="option.label"
                                :value="option.value"
                                v-for="option in item.options"
                                :key="option.label"
                            />
                        </el-select>
                    </template>
                    <template v-if="item.type === 'selectRemote1'">
                        <el-select
                            v-model="ruleForm[`${item.prop}`]"
                            :placeholder="item.placeholder"
                            clearable
                            remote
                            reserve-keyword
                            filterable
                            class="m-2 select"
                            remote-show-suffix
                            :remote-method="
                                (query:any) => {
                                  remoteMethod(
                                    query,
                                    item.prop
                                  );
                                }
                              "
                            :disabled="item.disabled"
                        >
                            <el-option
                                :label="option.stockName"
                                :value="option.value"
                                v-for="option in item.options"
                                :key="option.label"
                            />
                        </el-select>
                    </template>
                    <template v-if="item.type === 'selectRemote2'">
                        <el-select
                            v-model="ruleForm[`${item.prop}`]"
                            :placeholder="item.placeholder"
                            clearable
                            remote
                            reserve-keyword
                            filterable
                            class="m-2 select"
                            remote-show-suffix
                            :remote-method="
                                (query:any) => {
                                  remoteMethod(
                                    query,
                                    item.prop
                                  );
                                }
                              "
                            :disabled="item.disabled"
                        >
                            <el-option
                                :label="option.label"
                                :value="option.value"
                                v-for="option in item.options"
                                :key="option.label"
                            />
                        </el-select>
                    </template>
                </el-form-item>
            </template>
        </el-form>
        <div class="btn-box">
            <el-button type="primary" @click="onSearch" style="margin-bottom: 0" @keyup.enter="onSearch"> 搜索 </el-button>
            <el-button @click="onReset" style="margin-bottom: 0">重置</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup name="Search">
import { ref, toRefs } from "vue";
import { FormInstance } from "element-plus";
import { DocumentCopy } from "@element-plus/icons-vue";
import { getSubUcStockApi, getOrgApi, getCustomersApi, getSupplierApi, getSubUcStockByNameApi } from "@/api/modules/global";
const ruleFormRef = ref<FormInstance>();
interface IProps {
    formData: any;
    ruleForm: any;
    handleReset?: () => void;
    handleSearch?: () => void;
    handleRemoteMehod?: () => void;
    handleConvertSeparators?: () => void;
}
const props = withDefaults(defineProps<IProps>(), {
    formData: () => [],
    ruleForm: {},
    handleReset: () => {},
    handleSearch: () => {},
    handleRemoteMehod: () => {},
    handleSetInputValue: () => {},
    handleConvertSeparators: () => {}
});

const emits = defineEmits<{
    (e: "handleReset"): void;
    (e: "handleSearch"): void;
    (e: "handleRemoteMehod", params: any): void;
    (e: "handleSetInputValue", prop: any): void;
    (e: "handleConvertSeparators", prop: any): void;
    //handleConvertSeparators
}>();

const state: any = toRefs(props);
const selectRef = ref<any>(null);
const slectRef1 = ref<any>(null);
const { ruleForm } = state;
const getSubUcStockByName = async (query: any, prop: any) => {
    const rulest = await getSubUcStockByNameApi(query);
    if (rulest.status === 200) {
        const { data } = rulest;
        emits("handleRemoteMehod", {
            prop,
            data
        });
    }
};

const handleInputValue = (prop: any) => {
    if (prop === "boxBillNos" || prop === "serialNumbers") {
        emits("handleConvertSeparators", prop);
    }
    if (prop === "qty") {
        emits("handleSetInputValue", prop);
    }
};
const getSubUcStock = async (query: any, prop: any) => {
    const rulest = await getSubUcStockApi(query);
    if (rulest.status === 200) {
        const { data } = rulest;
        emits("handleRemoteMehod", {
            prop,
            data
        });
    }
};
const getCustomers = async (query: any, prop: any) => {
    const rulest = await getCustomersApi(query);
    if (rulest.status === 200) {
        const { data } = rulest;
        emits("handleRemoteMehod", {
            prop,
            data
        });
    }
};
const getSupplier = async (query: any, prop: any) => {
    const rulest = await getSupplierApi(query);
    if (rulest.status === 200) {
        const { data } = rulest;
        emits("handleRemoteMehod", {
            prop,
            data
        });
    }
};
const getOrg = async (query: any, prop: any) => {
    const rulest = await getOrgApi(query);
    if (rulest.status === 200) {
        const { data } = rulest;
        emits("handleRemoteMehod", {
            prop,
            data
        });
    }
};
const remoteMethod = (query: any, prop: any) => {
    if (!query) {
        return;
    }
    if (prop === "receiptCustomer") {
        getCustomers(query, prop);
    }
    if (prop === "supplierId") {
        getSupplier(query, prop);
    }
    if (prop === "orgId" || prop === "deliveryOrgId") {
        getOrg(query, prop);
    }
    if (prop === "srcsubStockCode" || prop === "destsubStockCode") {
        getSubUcStock(query, prop);
    }

    if (prop === "subStockCode") {
        getSubUcStockByName(query, prop);
    }
};
const onSearch = () => {
    emits("handleSearch");
};
const onReset = () => {
    emits("handleReset");
};
const handleKeyupSearch = (e: any) => {
    if (e.keyCode === 13) {
        emits("handleSearch");
    }
};
onActivated(() => {
    document.addEventListener("keyup", handleKeyupSearch, false);
});
onDeactivated(() => {
    document.removeEventListener("keyup", handleKeyupSearch, false);
});
</script>
<style lang="scss" scope>
@import "./index.scss";
</style>
