<script setup lang="ts">
import { inject, watch, nextTick, unref } from "vue";
import { useDetail } from "../config/detail";
import { detailProps } from "../types";
import BasicDescriptions from "/@/components/BasicDescriptions";
import { purchaseOrderProduceColumns } from "/@/utils/details/_purchase";
import { injectStandBookKey } from "./../context";

const props = defineProps(detailProps);
const emit = defineEmits(["map-offset-top"]);

const { goodData } = inject(injectStandBookKey);

const getOffsetTop = () => {
  const instance = unref(defaultRef);
  const rect = (instance.$el as HTMLElement).getBoundingClientRect();
  return rect.y;
};

watch(
  () => goodData.value,
  () =>
    setTimeout(() => {
      const mapOffsetTop = {
        top: getOffsetTop() - 134,
        title: props.title
      };

      nextTick(() => emit("map-offset-top", mapOffsetTop));
    }, 1000)
);

const { defaultRef } = useDetail(props);
</script>

<template>
  <BasicDescriptions
    :show="Object.keys(goodData).length > 0"
    ref="defaultRef"
    :data="goodData"
    :columns="purchaseOrderProduceColumns"
  />
</template>
