<template>
    <!-- 顶部操作按钮 -->
    <!-- 单据体 -->
    <div class="search-box1" ref="searchRef">
        <el-form
            ref="ruleFormRef"
            :model="result"
            :inline="true"
            class="form-box"
            :show-message="false"
            style="height: 100%; font-size: 14px"
        >
            <template v-for="item in formData" :key="item.prop">
                <el-form-item
                    :label="item.label"
                    :prop="item.prop"
                    :label-width="labelWidth || '81px'"
                    :rules="item.rules"
                    :error="item.error"
                    :show-message="item.showMessage ? item.showMessage : false"
                    :inline-message="item.inlineMessage"
                    :style="item.style ? item.style : 'margin-right:8px;position: relative;'"
                    :required="item.required"
                    :class="item.class ? item.class : 'form-item'"
                >
                    <template v-if="item.type === 'input'">
                        <el-input
                            v-model.trim="result[`${item.prop}`]"
                            :placeholder="item.placeholder"
                            :disabled="item.disabled"
                            :maxlength="item.maxLength ? item.maxLength : 255"
                            @input="valueVerify(item)"
                        >
                            <!-- <template #append v-if="item.isCopy">
                                <span
                                    :data-clipboard-text="result[`${item.prop}`]"
                                    v-copy="result[`${item.prop}`]"
                                    class="copyBtn"
                                    style="cursor: pointer"
                                >
                                    <el-icon><DocumentCopy /></el-icon>
                                </span>
                            </template> -->

                            <template #append v-if="item.isTxt">
                                <span :data-clipboard-text="result[`${item.prop}`]" class="copyBtn" style="cursor: pointer">
                                    KG
                                </span>
                            </template>
                        </el-input>
                    </template>
                    <template v-if="item.type === 'textarea'">
                        <el-input
                            v-model.trim="result[`${item.prop}`]"
                            :placeholder="item.placeholder"
                            type="textarea"
                            :disabled="item.disabled"
                            show-word-limit
                            :maxlength="item.maxLength ? item.maxLength : 255"
                            :autosize="item.autosize"
                            @input="filterInput(item.prop)"
                        >
                        </el-input>
                    </template>
                    <template v-if="item.type === 'select'">
                        <el-select
                            v-model="result[`${item.prop}`]"
                            :placeholder="item.placeholder"
                            clearable
                            :disabled="item.disabled"
                        >
                            <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="result[`${item.prop}`]"
                            :type="item.type"
                            :placeholder="item.placeholder"
                            format="YYYY-MM-DD"
                            :style="item.style"
                            value-format="YYYY-MM-DD"
                        />
                    </template>
                    <template v-if="item.type === 'selectRemote'">
                        <el-select
                            v-model="result[`${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,
                                  );
                                }
                              "
                            :disabled="item.disabled"
                        >
                            <el-option
                                :label="option.specifications"
                                :value="option.materialNumber"
                                v-for="option in item.options"
                                :key="option.materialNumber"
                            />
                        </el-select>
                        <!--item.prop -->
                    </template>
                    <template v-if="item.type === 'selectRemote1'">
                        <el-select
                            v-model="result[`${item.prop}`]"
                            :placeholder="item.placeholder"
                            clearable
                            remote
                            reserve-keyword
                            filterable
                            ref="slectRef1"
                            class="m-2 select"
                            remote-show-suffix
                            :remote-method="
                                (query:any) => {
                                  remoteMethod1(
                                    query,
                                  );
                                }
                              "
                            :disabled="item.disabled"
                        >
                            <!--     item.prop -->
                            <el-option
                                :label="option.label"
                                :value="option.value"
                                v-for="option in item.options"
                                :key="option.value"
                                @click="handleRemoteClick(item.prop)"
                            />
                        </el-select>
                    </template>
                </el-form-item>
            </template>
        </el-form>
    </div>
</template>

<script lang="ts" setup name="Search">
import { ref } from "vue";
import { FormInstance } from "element-plus";
// import { DocumentCopy } from "@element-plus/icons-vue";
import { formDataIProps } from "./interface/index";
import { integerRexg, numberDecimalSeparatorRexg } from "@/utils/rexg/index";
import { getMaterialListApi } from "@/api/modules/boxMark";
import { getCustomersNoOrgApi } from "@/api/modules/subscription";
import { debounce } from "lodash-es";
const ruleFormRef = ref<FormInstance>();
import { cloneDeep } from "lodash-es";
const props = defineProps<{
    formData: formDataIProps[];
    labelWidth?: string;
    ruleForm: Record<string, any>;
    style?: string;
    getSearchValue?: () => void;
    setMaterialList?: () => void;
    setRuleFormValue?: () => void;
}>();
let result = ref<any>(null);
const emits = defineEmits<{
    (e: "getSearchValue", result: Record<string, any>): void;
    (e: "setMaterialList", result: Record<string, any>): void;
    (e: "setRuleFormValue", result: Record<string, any>): void;
}>();
watch(
    () => props.ruleForm,
    newVal => {
        result.value = newVal;
    },
    {
        deep: true,
        immediate: true
    }
);
const removeSpaces = (str: any) => {
    return str.replace(/\s+/g, "");
};
//将中文逗号(,)和分号(;)替换为英文逗号(,)
const convertSeparators = (str: any) => {
    let strClone = cloneDeep(str);
    return strClone.replace(/，/g, ",");
};
const filterInput = (prop: any) => {
    if (prop === "emails" || prop === "telephones") {
        result.value[prop] = removeSpaces(result.value[prop]);
        result.value[prop] = result.value[prop].indexOf("，") > -1 ? convertSeparators(result.value[prop]) : result.value[prop];
    }
};
const remoteMethod = debounce(async (query: any) => {
    if (!query) {
        return;
    }
    const result = await getMaterialListApi(query);
    if (result.status === 200) {
        const { data } = result;
        emits("setMaterialList", {
            data
        });
    }
}, 1000);

const remoteMethod1 = debounce(async (query: any) => {
    if (!query) {
        return;
    }
    const result = await getCustomersNoOrgApi(query);
    if (result.status === 200) {
        const { data } = result;
        emits("setMaterialList", {
            data
        });
    }
}, 1000);
const handleRemoteClick = (pro: any) => {
    emits("setRuleFormValue", {
        pro
    });
};
//input输入验证
const valueVerify = (item: any) => {
    //只能输入整数
    if (item.reg === "integerRexg") {
        let value = integerRexg(result.value[item.prop]);
        result.value[item.prop] = value;
    }
    if (item.reg === "numberDecimalSeparatorRexg") {
        let value = numberDecimalSeparatorRexg(result.value[item.prop]);
        result.value[item.prop] = value;
    }
    emits("getSearchValue", {
        val: result.value,
        prop: item.prop
    });
};
</script>
<style lang="scss" scope>
.search-box1 {
    position: relative;
    display: flex;
    min-width: 1280px;
    .img-style {
        position: absolute;
    }

    padding: 16px;
    background: #ffffff;
    border-radius: 6px;

    // 单据头用的样式
    .form-box {
        // width: 85%;
        .form-item {
            width: 292px !important;
            height: 32px;
            margin-bottom: 8px !important;
            .el-form-item__label {
                font-size: 12px !important;
            }
            .el-select {
                width: 213px;
            }
            .el-form-item--default {
                width: 213px;
            }
            .el-cascader {
                width: 213px;
            }
        }
        .form-item1 {
            width: 594px !important;
        }

        margin-bottom: 8px !important;
    }

    // 新增物料用成品信息样式
    .form-box1 {
        display: flex;
        flex-wrap: wrap;

        // justify-content: space-between;
        .form-item {
            width: 292px !important;
            height: 32px;
            margin-bottom: 8px !important;
            .el-form-item__label {
                font-size: 12px !important;
            }
            .el-select {
                width: 213px;
            }
            .el-form-item--default {
                width: 213px;
            }
            .el-cascader {
                width: 213px;
            }
        }

        margin-bottom: 8px !important;
    }

    // 增物料尺寸/质量信息
    .form-box2 {
        .form-item {
            width: 341px !important;
            height: 32px;
            margin-bottom: 8px !important;
            .el-input {
                width: 160px !important;
            }
            .el-form-item__label {
                font-size: 12px !important;
            }
        }
    }

    // 新增bom详情
    .form-box3 {
        .form-item {
            width: 320px !important;
            height: 32px;
            margin-bottom: 8px !important;

            // .el-input {
            //     width: 241px !important;
            // }
            .el-select {
                width: 213px !important;
            }
            .el-input__wrapper {
                width: 191px !important;
            }
            .el-form-item__label {
                font-size: 12px !important;
            }
        }
    }
    .form-box4 {
        .form-item {
            width: 241px !important;
            height: 32px;
            margin-bottom: 0 !important;
        }
        .el-input {
            width: 241px !important;
        }
        .el-form-item__label {
            font-size: 12px !important;
        }
        .el-select {
            width: 241px !important;
        }
    }

    // 新增bom详情
    .form-box5 {
        .form-item {
            width: 333px !important;
            height: 32px;
            margin-bottom: 8px !important;

            // .el-input {
            //     width: 241px !important;
            // }
            .el-select {
                width: 226px !important;
            }
            .el-input__wrapper {
                width: 204px !important;
            }
            .el-form-item__label {
                font-size: 12px !important;
            }
        }
    }
    .upImg-box {
        flex: 1;
        height: 112px;
    }
}
.el-form-item--default .el-form-item__label {
    height: 32px;
    margin-bottom: 8px;

    // font-size: 12px;
    line-height: 32px;
    color: rgb(92 92 92 / 100%);
}
</style>
