<template>
  <Descriptions
    :bordered="viewModel.bordered"
    :title="viewModel.title"
    :layout="viewModel.layout"
  >
    <template v-for="item in viewModel.fields" :key="item.key">
      <DescriptionsItem :span="item.span" :label="item.label">
        <template v-if="item.slot">
          <slot :name="item.slot" :item="dataSource[item?.field]"></slot>
        </template>
        <template v-else>
          {{ dataSource[item?.field || ""] }}
        </template>
      </DescriptionsItem>
    </template>
  </Descriptions>
</template>
<script lang="ts">
import { defineComponent, PropType } from "vue";
export default defineComponent({
  name: "c-desc",
});
</script>
<script lang="ts" setup>
import { Descriptions, DescriptionsItem } from "ant-design-vue";

import type { CDescProps } from "../types";
const props = defineProps({
  /**
   * @description 配置字段
   */
  viewModel: {
    type: Object as PropType<CDescProps>,
    required: true,
  },
  /**
   * @description 填充数据
   */
  dataSource: {
    type: Object as PropType<any>,
    required: false,
  },
});
</script>
