<template>
  <div class="container">
    <a-space size="large" direction="vertical" fill>
      <a-typography-title :heading="3">DD373充值查询系统</a-typography-title>
      <a-card>
        <a-row justify="space-between">
          <a-col :span="18">
            <a-input
              v-model="account"
              placeholder="请输入您的游戏账号查询"
            ></a-input>
          </a-col>
          <a-col :span="6">
            <a-button type="primary" long @click="query">查询</a-button>
          </a-col>
        </a-row>
      </a-card>
      <a-card title="查询结果">
        <a-descriptions class="description" size="large" :column="1">
          >
          <a-descriptions-item label="订单来源">
            {{ renderData.sourceOfShop }}
          </a-descriptions-item>
          <a-descriptions-item label="订单号">
            {{ renderData.orderNo }}
          </a-descriptions-item>
          <a-descriptions-item label="充值游戏">
            {{ renderData.category }}
          </a-descriptions-item>
          <a-descriptions-item label="充值账号">
            {{ renderData.account }}
          </a-descriptions-item>
          <a-descriptions-item label="充值金额">
            {{ renderData.amount }}
          </a-descriptions-item>
          <a-descriptions-item label="充值时间">
            {{ renderData.topUpTime }}
          </a-descriptions-item>
          <a-descriptions-item label="充值状态">
            <a-tag v-if="renderData.status === 1" color="green">充值成功</a-tag>
            <a-tag v-else-if="renderData.status === 0" color="red">
              充值失败
            </a-tag>
          </a-descriptions-item>
        </a-descriptions>
      </a-card>
    </a-space>
  </div>
</template>

<script lang="ts" setup>
import {
  GameCategory,
  OrderFakeRes,
  queryFakeOrder,
  queryGameCategory
} from '@/api/t-mall-game-order';
import { onMounted, ref } from 'vue';

const account = ref<string>('');
const category = ref<string>('');
const renderData = ref<OrderFakeRes>({
  account: '',
  amount: null,
  category: '',
  id: '',
  orderNo: '',
  sourceOfShop: '',
  status: null,
  topUpTime: null
});
const categoryList = ref<GameCategory[]>([]);
const query = async () => {
  const { data } = await queryFakeOrder({ account: account.value });
  renderData.value = data;
};
// onMounted(() => {
//   queryGameCategory().then(res => {
//     categoryList.value = res.data.list;
//   });
// });
</script>

<style lang="less" scoped>
.container {
  height: 100vh;
  padding: 20px;
  background-color: var(--color-neutral-1);
}

.description {
  // 居中对齐
  margin: 0 auto;
}
</style>
