<template>
  <Card :bordered="false" :loading="isLoading">
    <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 } from 'vue';
  import { useRoute } from 'vue-router';
  import { useAsyncState } from '@vueuse/core';
  import { ComputedRef } from '@vue/reactivity';
  import { Descriptions, Card } from 'ant-design-vue';
  import { descriptionColumns } from './schema';
  import * as SurgicalTypeApi from '/@/api/system/surgicalTypeApi';
  import { SurgicalType } from '/@/api/model/surgicalType';

  const route = useRoute();
  const id = ref(route.params?.id);

  // id 查询
  const {
    state: detail,
    isReady: isDetailReady,
    isLoading,
    execute,
  } = useAsyncState(
    () => {
      return SurgicalTypeApi.getById(id.value).then((res: SurgicalType) => res);
    },
    null,
    {
      immediate: false,
    },
  );

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

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

<style scoped></style>
