<template>
  <div class="warn-detail">
    <div class="info">
      <Info :labelData="labelData" :valueData="valueData">
        <template v-slot:[key]="{ item, valueData }" v-for="(value, key) in slots">
          <slot :name="key" :item="item" :valueData="valueData"></slot>
        </template>
      </Info>
    </div>
    <div class="tabs">
      <Tab :labels="tabLabels" :data="tabDatas" />
    </div>
  </div>
</template>

<script setup>
import { useSlots, computed } from "vue";
import Info from "./info.vue";
import Tab from "./tab.vue";
const slots = useSlots();
const props = defineProps({
  labelData: {
    type: Array,
    default: () => [],
  },
  valueData: {
    type: Object,
    default: () => ({}),
  },
  tabLabels: {
    type: Array,
    default: () => [],
  },
  tabDatas: {
    type: Object,
    default: () => ({}),
  },
});
</script>

<style lang="scss" scoped>
.warn-detail {
  max-width: 1072px;
  width: 100%;
  height: 100%;
  .tabs {
    margin-top: 30px;
  }
}
</style>
