<template>
    <div class="table-box" style="background: #ffffff; border-radius: 6px">
        <div v-show="false">
            <div id="barcode-box">
                <svg id="barcode"></svg>
            </div>
        </div>
        <div v-show="false" id="qrcode-box">
            <div id="qrcode-box">
                <svg id="qrcode"></svg>
            </div>
        </div>
        <DetailsBtns
            @handleParentCallback="handleParentCallback"
            :ruleForm="datas.ruleForm"
            :isPrint="datas.isPrint"
            :isGenerate="datas.isGenerate"
        />
        <div>
            <div>
                <DetailsSearch
                    :formData="datas.formData"
                    :ruleForm="datas.ruleForm"
                    :labelWidth="labelWidth"
                    @getSearchValue="getSearchValue"
                    @setMaterialList="setMaterialList"
                />
            </div>
            <div>
                <DetailsSearch
                    :formData="datas.formData1"
                    :ruleForm="datas.ruleForm"
                    :labelWidth="labelWidth"
                    @getSearchValue="getSearchValue"
                />
            </div>
            <div>
                <DetailsSearch
                    :formData="datas.formData2"
                    :ruleForm="datas.ruleForm"
                    :labelWidth="labelWidth"
                    @getSearchValue="getSearchValue"
                />
            </div>
            <div>
                <DetailsSearch
                    :formData="datas.formData3"
                    :ruleForm="datas.ruleForm"
                    :labelWidth="labelWidth"
                    @getSearchValue="getSearchValue"
                />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="boxMarkDetails">
import { boxMarkListPrint } from "@/utils/print/boxMark/boxMarkListPrint.js";
import { cloneDeep } from "lodash-es";
import DetailsSearch from "@/components/DetailsSearch/index.vue";
import DetailsBtns from "@/components/DetailsBtns/index.vue";
import { FORMDATA, RULEFORM, FORMDATA2, FORMDATA1, FORMDATA3 } from "./constant/details/search";
import { handleAddDisNo, handleGenerateDisYes, initFormData } from "./init/details";
let datas = reactive({
    isPrint: true,
    isGenerate: false,
    ruleForm: cloneDeep(RULEFORM), // 表单值
    formData: cloneDeep(FORMDATA), //表单配置
    formData1: cloneDeep(FORMDATA1), //表单配置
    formData2: cloneDeep(FORMDATA2), //表单配置
    formData3: cloneDeep(FORMDATA3), //表单配置
    printList: [],
    printNumber: 2
});
let labelWidth = ref<any>("107px");

// 获取单据头数据
const getSearchValue = (params: any) => {
    if (!params) {
        return false;
    }
    const { val } = params;
    datas.ruleForm = val;
};
const handleParentCallback = (result?: any) => {
    const { type, data } = result;
    if (type === "Switch") {
        datas.printNumber = data;
        return;
    }
    if (type === "Add") {
        initFormData(datas);
        handleAddDisNo(datas);
        datas.isGenerate = false;
        datas.isPrint = true;
    }
    if (type === "Generate") {
        for (let key in result.data) {
            datas.ruleForm[key] = result.data[key];
        }
        datas.printList = [];
        datas.printList = result.printList;
        datas.isPrint = false;
        datas.isGenerate = true;
        handleGenerateDisYes(datas);
    }
    if (type === "Print") {
        nextTick(() => {
            setTimeout(() => {
                boxMarkListPrint(datas.printList, datas.printNumber);
            }, 200);
        });
    }
};
const setMaterialList = (params: any) => {
    const { data } = params;
    datas.formData[1].options = data;
};
</script>

<style scoped lang="scss">
.tabs-box {
    height: 100%;
    padding: 16px 16px 0;
    background-color: #ffffff;
    border-radius: 6px;
}
</style>
