<template>
  <a-card :bordered="false">
    <a-descriptions bordered :column="3">
      <a-descriptions-item v-for="p in displayProps" :key="p.title" :label="p.title" :span="['avatar'].includes(p.name) ? 3 : 1">
        <span v-if="p.key === 'avatar'"><img :src="p.value" style="width: 120px; height: 120px;"></span>
        <template v-else>
          {{ p.value }}
        </template>
      </a-descriptions-item>
    </a-descriptions>
  </a-card>
</template>
<script lang="ts">
  import { defineComponent, computed, ref, reactive } from 'vue';
  import { useRoute } from 'vue-router';
  import { Descriptions, Card } from 'ant-design-vue';
  // import { ModelResponse } from '/@/api/model/model';
  import { columns } from './model.data';
  import { getById } from '/@/api/test/modelApi';

  export default defineComponent({
    components: { ACard: Card, ADescriptions: Descriptions, ADescriptionsItem: Descriptions.Item },
    setup() {
      const route = useRoute();
      const id = ref(route.params?.id);
      let data = reactive({
        detail: {},
        isOver: false,
      })
      function getList() {
        getById(id.value).then((res: any) => {
          data.isOver = true
          data.detail = res
        })
      }
      getList()
      const displayProps = computed(() => {
        if (!data.isOver) return {}
        const display = columns.map(({ title, dataIndex, customRender }) => ({
          key: dataIndex,
          title,
          value: customRender ? customRender({ text: data.detail[dataIndex], record: data.detail }) : data.detail[dataIndex]
        }))
        return display
      });
      return { displayProps, data };
    },
  });
</script>

<style scoped>
</style>
