<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"
            :isNumberSwitch="datas.isNumberSwitch"
            :isNumberCode="datas.isNumberCode"
        />
        <div>
            <div>
                <DetailsSearch
                    :formData="datas.formData"
                    :ruleForm="datas.ruleForm"
                    :labelWidth="labelWidth1"
                    @getSearchValue="getSearchValue"
                    @setMaterialList="setMaterialList"
                />
            </div>
            <div v-if="datas.isNumberCode">
                <DetailsSearch
                    :formData="datas.formData4"
                    :ruleForm="datas.ruleForm"
                    :labelWidth="labelWidth1"
                    @getSearchValue="getSearchValue"
                />
            </div>
            <div>
                <DetailsSearch
                    :formData="datas.formData1"
                    :ruleForm="datas.ruleForm"
                    :labelWidth="labelWidth1"
                    @getSearchValue="getSearchValue"
                />
            </div>

            <div>
                <DetailsSearch
                    :formData="datas.formData2"
                    :ruleForm="datas.ruleForm"
                    :labelWidth="labelWidth1"
                    @getSearchValue="getSearchValue"
                />
            </div>
            <div>
                <DetailsSearch
                    :formData="datas.formData3"
                    :ruleForm="datas.ruleForm"
                    :labelWidth="labelWidth1"
                    @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, FORMDATA4 } from "./constant/details/search";
import { useAuthStore } from "@/stores/modules/auth";
const router = useRouter();
import {
    handleAddDisNo,
    handleGenerateDisYes,
    initFormData,
    initNumberCode,
    getEndNumber,
    setStartDisabled
} from "./init/details";
import { useUserStore } from "@/stores/modules/user";
// 获取用户信息(组织id)
const userStore = useUserStore();
let datas = reactive({
    isPrint: true,
    isGenerate: false,
    ruleForm: cloneDeep(RULEFORM), // 表单值
    formData: cloneDeep(FORMDATA), //表单配置
    formData1: cloneDeep(FORMDATA1), //表单配置
    formData2: cloneDeep(FORMDATA2), //表单配置
    formData3: cloneDeep(FORMDATA3), //表单配置
    formData4: cloneDeep(FORMDATA4),
    printList: [],
    printNumber: 2,
    isNumberCode: false,
    isNumberSwitch: true
});
let labelWidth1 = ref<any>("125px");
const authStore = useAuthStore();
// 获取单据头数据
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 === "numberCode") {
        datas.isNumberCode = data;
        datas.isNumberSwitch = data;
    }
    if (type === "Add") {
        initFormData(datas);
        handleAddDisNo(datas);
        datas.isGenerate = false;
        datas.isPrint = true;
        datas.ruleForm.orgCode = userStore.orgCode;
        datas.isNumberCode = false;
        datas.isNumberSwitch = false;
    }
    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);
        datas.formData4[0].startDisabled = true;
    }
    if (type === "Print") {
        nextTick(() => {
            setTimeout(() => {
                boxMarkListPrint(datas.printList, datas.printNumber);
            }, 200);
        });
    }
};
const setMaterialList = (params: any) => {
    const { data } = params;
    datas.formData[1].options = data;
};
//监听组织ID
watch(
    () => userStore.orgCode,
    newVal => {
        datas.ruleForm.orgCode = newVal;
    },
    {
        immediate: true,
        deep: true
    }
);
//监听产品数量输入(产品数量有值就放开数字序列号区间)
watch(
    () => datas.ruleForm.productQty,
    newVal => {
        if (newVal) {
            setStartDisabled(datas);
            getEndNumber(datas);
        } else {
            initNumberCode(datas);
        }
    },
    {
        immediate: true,
        deep: true
    }
);
//监听数字序列号区间
watch(
    () => datas.ruleForm.beginNumber,
    newVal => {
        if (newVal && newVal != 0) {
            getEndNumber(datas);
        }
        if (!newVal) {
            datas.ruleForm.endNumber = "";
        }
    }
);
//监听选择数字序列号模板开关
watch(
    () => datas.isNumberCode,
    newVal => {
        if (newVal && datas.ruleForm.productQty) {
            setStartDisabled(datas);
        }
        if (!newVal) {
            initNumberCode(datas);
        }
    }
);
watch(
    () => authStore.btnsAuthList["boxMarkIndex"],
    newVal => {
        if (!newVal.includes("boxMarkAdd")) {
            router.push("/404");
        }
    },
    {
        immediate: true,
        deep: true
    }
);
</script>

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