<template>
  <Card :bordered="false" :loading="isLoading">
    <Descriptions bordered :column="3">
      <Descriptions.Item label="发货单号">
        {{ id }}
      </Descriptions.Item>
      <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'">
          <ImagePreview :imageList="[p.value]" style="width: 120px" />
        </span>
        <template v-else>
          {{ p.value }}
        </template>
      </Descriptions.Item>
    </Descriptions>

    <a-table
      :dataSource="productList"
      :columns="detailColumns"
      :pagination="false"
      childrenColumnName="batchWorkOrderDetailProductDetailList"
      rowKey="uuid"
      :scroll="{ y: 450 }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'total'">
          {{ record.goodsId ? '' : record.price * record.quantity }}
        </template>
        <template v-if="column.key === 'price'">
          {{ record.goodsId ? '' : record.price }}
        </template>
        <template v-if="column.key === 'ordered'">
          {{ record.goodsId ? '' : record.ordered }}
        </template>
        <template v-if="column.key === 'quantity'">
          {{ record.goodsId ? '' : record.quantity }}
        </template>
        <template v-if="column.key === 'goodsType'">
          <span v-if="record.goodsType === 'PRODUCT'">产品</span>
          <span v-else-if="record.goodsType === 'KIT'">套件</span>
        </template>
      </template>
    </a-table>
  </Card>
</template>
<script lang="ts" setup>
  import { onMounted, computed, ref } from 'vue';
  import { Card, Descriptions } from 'ant-design-vue';
  import { ComputedRef } from '@vue/reactivity';
  import { useAsyncState } from '@vueuse/core';
  import * as BatchWorkOrderApi from '/@/api/order/batchWorkOrderApi';
  import { useRoute, useRouter } from 'vue-router';
  import { descriptionColumns } from '/@/views/order/batch-order/schema';
  import * as BatchOrderApi from '/@/api/order/batchOrderApi';
  import { detailColumns } from '/@/views/order/batch-work-order/schema';
  import { BatchOrderDetail } from '/@/api/model/batchOrderDetail';
  import { BatchWorkOrder } from '/@/api/model/batchWorkOrder';

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

  const {
    state: detail,
    isReady: isDetailReady,
    isLoading,
    execute,
  } = useAsyncState(
    () => {
      return BatchOrderApi.getById(batchOrderId.value).then((res: BatchOrder) => {
        return res;
      });
    },
    null,
    {
      immediate: false,
    },
  );

  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;
  });

  const productList = ref<BatchOrderDetail[] | undefined>();

  const getOrderWorkDetail = () => {
    BatchWorkOrderApi.getById(id.value)
      .then((res: BatchWorkOrder) => {
        const thirdProductId = {};
        res.batchOrder?.batchOrderDetailList.forEach((item) => {
          item.batchOrderDetailProductDetailList.forEach((el) => {
            thirdProductId[el.thirdProductId] = el.quantity;
          });
        });

        res.batchWorkOrderDetailList?.forEach((item) => {
          item.uuid = item.goodsId + '';
          item.batchWorkOrderDetailProductDetailList.forEach((el) => {
            el.uuid = item.goodsId + '-' + el.id;
            el.ordered = thirdProductId[el.thirdProductId];
            el.goodsType = item.goodsType;
          });
        });

        productList.value = res.batchWorkOrderDetailList;
        console.log(res);
      })
      .finally(() => {
        // tableLoading.value = false
      });
  };

  onMounted(() => {
    execute();
    getOrderWorkDetail();
  });
</script>

<style scoped>
  .ant-table-wrapper {
    margin-top: 20px;
  }
</style>
