<template>
  <div class="container">
    <a-typography-title style="text-align: center">
      订单明细查询
    </a-typography-title>
    <a-row>
      <a-input-search
        size="large"
        :loading="loading"
        placeholder="输入待查询的商户订单号"
        search-button
        @search="search"
      >
        <template #button-icon>
          <icon-search />
        </template>
        <template #button-default>查询</template>
      </a-input-search>
    </a-row>
    <div class="body">
      <a-space direction="vertical" fill>
        <a-typography-title
          v-show="renderData?.list?.length"
          :heading="5"
          style="text-align: center"
        >
          查询结果
        </a-typography-title>
        <a-descriptions
          v-show="renderData.createTime"
          title="订单信息"
          :column="2"
        >
          <a-descriptions-item label="平台订单号">
            <a-tag>{{ state.value }}</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="系统订单号">
            <a-tag>{{ renderData.bankOrderId }}</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="订单时间">
            <a-tag>{{ renderData.createTime }}</a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="订单金额">
            <a-tag>{{ renderData.amount }}</a-tag>
          </a-descriptions-item>
        </a-descriptions>
        <a-typography-paragraph
          v-for="(item, index) in renderData?.list"
          :key="index"
        >
          【{{ item.createdAt }}】{{ item.operation }} {{ item.remark }}
        </a-typography-paragraph>
        <a-typography-paragraph
          v-show="!renderData?.list?.length"
          style="text-align: center"
        >
          {{
            loading
              ? '正在查询'
              : state.value
                ? '没有查询到结果'
                : '请输入查询条件'
          }}
        </a-typography-paragraph>
      </a-space>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { apiClient } from '@/api';
import { KamiApiMerchantV1OrderQueryRes } from '@/api/generated';
import useLoading from '@/hooks/loading';
import { reactive, ref } from 'vue';

const renderData = ref<KamiApiMerchantV1OrderQueryRes>({});
const { loading, setLoading } = useLoading(false);
const state = reactive({
  value: ''
});

const search = async (value: string, ev: MouseEvent) => {
  try {
    state.value = value;
    setLoading(true);
    const data = await apiClient.apiMerchantOrderQueryGet({
      merchantOrderNo: value
    });
    renderData.value = data.data;
  } catch (error) {
  } finally {
    setLoading(false);
  }
};
</script>

<style lang="less" scoped>
.container {
  max-width: 800px;
  padding: 200px 20px;
  margin: 0 auto;

  :deep(.arco-input-wrapper) {
    background-color: var(--color-white);

    .arco-input {
      background-color: var(--color-white);
    }
  }

  .body {
    min-height: calc(100vh - 600px);
    padding: 20px;
    margin-top: 20px;
    background-color: var(--color-white);
  }
}
</style>
