<template>
  <div class="detail-container">
    <Card :bordered="false" :loading="isLoading">
      <PageHeader
        :title="title"
        @back="() => $router.go(-1)"
      >
        <template #extra>
          <a-button type="primary" @click="$router.go(-1)">返回上一页面</a-button>
        </template>
      </PageHeader>
      <Descriptions bordered :column="1">
        <Descriptions.Item
          v-for="p in displayProps"
          :key="p.key"
          :label="p.title">
            {{ p.value }}
        </Descriptions.Item>
      </Descriptions>
    </Card>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted, computed, ref, Ref } from 'vue';
  import { useRoute } from 'vue-router';
  import { useAsyncState } from '@vueuse/core';
  import { PageHeader, Descriptions, Card } from 'ant-design-vue';
  import { descriptionColumns } from './schema';
  import * as TaskApi from '@/api/data/taskApi';
  import { Task } from '@/api/model/task';

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

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

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

  const displayProps: Ref<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 lang="scss" scoped>
  @use '@/assets/custom.scss';
  .detail-container {
    padding: 10px;
  }
</style>

