<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.isTxt">
                                <span :data-clipboard-text="result[`${item.prop}`]" class="copyBtn" style="cursor: pointer">
                                    KG
                                </span>
                            </template>
                        </el-input>
                    </template>
                    <template v-if="item.type === 'inputs'">
                        <el-input
                            v-model.trim="result[`${item.startProp}`]"
                            :placeholder="item.startPlaceholder"
                            :disabled="item.startDisabled"
                            maxlength="255"
                            style="width: 144px !important"
                            @input="valueVerifyInputs(item)"
                        />
                        <span style="margin: 0 3px">-</span>
                        <el-input
                            v-model.trim="result[`${item.endProp}`]"
                            :placeholder="item.endPlaceholder"
                            :disabled="item.endDisabled"
                            maxlength="255"
                            style="width: 144px !important"
                            @input="valueVerifyInputs(item)"
                        />
                    </template>
                    <template v-if="item.type === 'textarea'">
                        <el-input
                            v-model.trim="result[`${item.prop}`]"
                            :placeholder="item.placeholder"
                            type="textarea"
                            :disabled="item.disabled"
                            @input="handleTextarea(item)"
                        >
                        </el-input>
                        <!-- show-word-limit -->
                        <!--   :autosize="item.autosize" -->
                        <!--       :maxlength="item.maxLength ? item.maxLength : 255" -->
                    </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>
                </el-form-item>
            </template>
        </el-form>
    </div>
</template>

<script lang="ts" setup name="Search">
import { ref } from "vue";
import { FormInstance } from "element-plus";
import { formDataIProps } from "./interface/index";
import { integerRexg, numberDecimalSeparatorRexg } from "@/utils/regexp/index";
import { getMaterialListApi } from "@/api/modules/boxMark";
const ruleFormRef = ref<FormInstance>();
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 remoteMethod = async (query: any) => {
    if (!query) {
        return;
    }
    let valClone = query.replace(/^\s*|\s*$/g, "");
    if (!valClone) {
        return;
    }
    const result = await getMaterialListApi(valClone);
    if (result.status === 200) {
        const { data } = result;
        emits("setMaterialList", {
            data
        });
    }
};

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

const maxLength = 10;

const handleTextarea = (item: any) => {
    let charCount = 0;
    const inputValue = result.value[item.prop];
    for (let i = 0; i < inputValue.length; i++) {
        const char = inputValue[i];
        if (/[\u4e00-\u9fa5]/.test(char)) {
            charCount += 1;
        } else {
            charCount += 0.5;
        }
    }

    if (charCount > maxLength) {
        let newInput = "";
        let newCount = 0;
        for (let i = 0; i < inputValue.length; i++) {
            const char = inputValue[i];
            if (/[\u4e00-\u9fa5]/.test(char)) {
                if (newCount + 1 <= maxLength) {
                    newInput += char;
                    newCount += 1;
                } else {
                    break;
                }
            } else {
                if (newCount + 0.5 <= maxLength) {
                    newInput += char;
                    newCount += 0.5;
                } else {
                    break;
                }
            }
        }
        result.value[item.prop] = newInput; // 这里使用 result.value 来修改值
    }
};
const valueVerifyInputs = (item: any) => {
    //只能输入整数
    if (item.reg === "integerRexg") {
        let value = integerRexg(result.value[item.startProp]);
        result.value[item.startProp] = 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;
        }
        .form-item2 {
            width: 494px !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-select {
                width: 226px !important;
            }
            .el-input__wrapper {
                width: 204px !important;
            }
            .el-form-item__label {
                font-size: 12px !important;
            }
        }
    }
    .form-box6 {
        .form-item {
            width: 433px !important;
            height: 32px;
            margin-bottom: 8px !important;
            .el-select {
                width: 226px !important;
            }
            .el-input__wrapper {
                width: 304px !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>
