<template>
  <el-descriptions :column="column" border>
    <template v-for="item in options" :key="item.key">
      <el-descriptions-item v-if="!item.hidden" :label="item.label" :span="item.span || 1">
        <slot :name="item.key">
          <template v-if="item.value">{{ item.value }}</template>
          <template v-if="!item.value">{{ info[item.key] }}</template>
        </slot>
      </el-descriptions-item>
    </template>
  </el-descriptions>
</template>

<script setup>
import { ElDescriptions, ElDescriptionsItem } from "element-plus";
import "element-plus/es/components/descriptions/style/css";
import "element-plus/es/components/descriptions-item/style/css";

defineOptions({
  name: "AppInfoBuilder",
});
defineProps({
  info: { type: Object, required: true },
  options: { type: Array, required: true },
  column: { type: Number, default: 2 },
});
</script>

<style scoped lang="scss"></style>
