<!-- 采购订单 -->
<template>
    <div class="table-box">
        <div
            style="height: 100%; padding: 16px; overflow-y: hidden; background-color: #ffffff; border-radius: 6px"
            ref="tableRef"
        >
            <div ref="searchRef" class="bt" style="height: 180px">
                <el-tabs v-model="formActiveName" class="demo-tabs">
                    <el-tab-pane label="基本信息" name="infoBasic">
                        <DetailsSearch
                            :formData="datas.formData"
                            :ruleForm="datas.ruleForm"
                            :labelWidth="labelWidth"
                            :formClass="datas.formClass"
                        >
                        </DetailsSearch>
                    </el-tab-pane>
                </el-tabs>
            </div>

            <el-tabs v-model="activeName" class="demo-tabs" id="myElement">
                <el-tab-pane label="箱信息" name="ofInboundInstructionsListDetails">
                    <el-table :data="datas.ruleForm.boxs" style="width: 100%" :height="datas.tableHeight" border>
                        <el-table-column
                            :show-overflow-tooltip="true"
                            :prop="item.prop"
                            :label="item.label"
                            :width="item.width ? item.width : ''"
                            v-for="(item, index) in datas.columns"
                            :key="index"
                        />
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup lang="ts" name="ofInboundInstructionsListDetails">
import DetailsSearch from "@/components/DetailsSearch/index.vue";
import { FORMDATA, RULEFORM, COLUMNS } from "./constant/details/index";
import { cloneDeep } from "lodash-es";
import { getTaskDetailsApi } from "@/api/modules/receiptAndWarehousing";

let labelWidth = "107px";

const tableRef = ref<any>(null);
const searchRef = ref<any>(null);

const datas = reactive<any>({
    columns: COLUMNS, //明细信息列表配置项
    ruleForm: cloneDeep(RULEFORM), // 表单
    formData: cloneDeep(FORMDATA), //表头配置项
    tableHeight: 0
});
const $route = useRoute();

let activeName = ref<any>("ofInboundInstructionsListDetails");
let formActiveName = ref<any>("infoBasic");
//获取详情
const getDetails = async (id: any) => {
    if (!id) {
        return false;
    }
    const result = await getTaskDetailsApi(id);
    if (result.status === 200) {
        const { data } = result;

        datas.ruleForm = data;
    }
};

//动态计算表格高度
const handleResize = () => {
    nextTick(() => {
        datas.tableHeight = tableRef.value.clientHeight - 280;
        if (datas.tableHeight <= 92) {
            datas.tableHeight = 92;
        }
    });
};
onMounted(() => {
    handleResize();
});
// 详情
onActivated(() => {
    getDetails($route.query.id);
    window.addEventListener("resize", handleResize);
});
onDeactivated(() => {
    window.removeEventListener("resize", handleResize);
});
onBeforeUnmount(() => {
    window.removeEventListener("resize", handleResize);
});
</script>
