<template>
    <div class="table-box" style="background: #ffffff; border-radius: 6px">
        <DetailsBtns
            @handleParentCallback="handleParentCallback"
            :ruleForm="datas.ruleForm"
            :isSubmit="datas.isSubmit"
            :isAdd="datas.isAdd"
        />
        <div>
            <div>
                <DetailsSearch
                    :formData="datas.formData"
                    :ruleForm="datas.ruleForm"
                    :labelWidth="labelWidth"
                    @getSearchValue="getSearchValue"
                    @setMaterialList="setMaterialList"
                    @setRuleFormValue="setRuleFormValue"
                />
            </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="subscriptionDetails">
import { getDetailsApi } from "@/api/modules/subscription";
import { useSetSearchData, useSearchInfoArray } from "@/hooks/useSearch";
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, handleSubmitDisYes, initFormData } from "./init/details";
let datas = reactive({
    isSubmit: false,
    isAdd: false,
    ruleForm: cloneDeep(RULEFORM), // 表单值
    formData: cloneDeep(FORMDATA), //表单配置
    formData1: cloneDeep(FORMDATA1), //表单配置
    formData2: cloneDeep(FORMDATA2), //表单配置
    formData3: cloneDeep(FORMDATA3) //表单配置
});
let labelWidth = ref<any>("117px");
const $route = useRoute();
// 获取单据头数据
const getSearchValue = (params: any) => {
    if (!params) {
        return false;
    }

    const { val } = params;
    datas.ruleForm = val;
};
// 獲取詳情
const getDetails = async () => {
    if (!$route.query.id) {
        return;
    }
    const result = await getDetailsApi($route.query.id);
    if (result.status === 200) {
        const { data } = result;
        datas.ruleForm = data;
    }
};
getDetails();

const handleParentCallback = (result?: any) => {
    const { type } = result;
    if (type === "Add") {
        initFormData(datas);
        handleAddDisNo(datas);
        datas.isSubmit = !datas.isSubmit;
    }
    if (type === "Submit" && !$route.query.id) {
        for (let key in result.data) {
            datas.ruleForm[key] = result.data[key];
        }
        datas.isSubmit = !datas.isSubmit;
        handleSubmitDisYes(datas);
    }
};
const setMaterialList = (params: any) => {
    const { data } = params;
    datas.formData = useSetSearchData(datas.formData, {
        customerName: useSearchInfoArray(data)
    });
};
const setRuleFormValue = (params: any) => {
    const { pro } = params;
    if (!datas.ruleForm[pro]) {
        return;
    }
    datas.formData[0].options.forEach((item: any) => {
        if (item.id === datas.ruleForm[pro]) {
            datas.ruleForm.customerNumber = item.code;
            datas.ruleForm.customerName = item.name;
        }
    });
};
watch(
    () => $route.query.id,
    newVal => {
        if (newVal) {
            datas.isAdd = true;
        }
    },
    {
        immediate: true,
        deep: true
    }
);
</script>

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