<template>
  <Card :bordered="false">
    <Descriptions bordered :column="3">
      <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>
      </Descriptions.Item>
    </Descriptions>
  </Card>
</template>
<script lang="ts" setup name="DeviceDetail">
  import { onMounted, computed, ref, reactive } from 'vue';
  import { useRoute } from 'vue-router';
  import { ComputedRef } from '@vue/reactivity';
  import { Descriptions, Card } from 'ant-design-vue';
  import { descriptionColumns } from './schema';
  import * as ProductApi from '/@/api/product/productApi';
  import { Device } from '/@/api/model/device';

  const route = useRoute();
  const id = ref(route.params?.id);
  let data = reactive({
    detail: {},
    isOver: false,
  });
  const getDetail = () => {
    ProductApi.getById(id.value).then((res: Device) => {
      data.isOver = true;
      data.detail = res;
    });
  };

  onMounted(() => {
    getDetail();
  });

  const displayProps: ComputedRef<Array<any>> = computed(() => {
    if (!data.isOver) return {};
    const display: any = descriptionColumns.map(({ title, dataIndex = '', customRender }) => ({
      key: dataIndex,
      title,
      value: customRender ? customRender(data.detail[dataIndex], data.detail) : data.detail[dataIndex],
    }));
    return display;
  });
</script>

<style scoped></style>
