<template>
  <a-drawer
    v-model:visible="visible"
    :width="'60%'"
    :footer="false"
    title="天猫订单"
  >
    <div class="container">
      <a-space size="medium" direction="vertical" fill>
        <a-card class="general-card" title="淘宝订单">
          <a-descriptions :data="descData" layout="inline-vertical" />
        </a-card>
        <a-card class="general-card" title="订单记录">
          <a-table :columns="columns" :data="renderTableData" />
        </a-card>
        <shop-detail :shop-id="props.shopId" />
      </a-space>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
import {
  RechargeTMallOrderHistory,
  queryTMallOrderHistory,
  queryTMallShopOrder
} from '@/api/t-mall-game-order';
import shopDetail from '../shop-info/components/shopDetail.vue';
import { DescData, TableColumnData, TableData } from '@arco-design/web-vue';
import { ref, watchEffect } from 'vue';
const props = defineProps({
  shopId: {
    type: Number,
    default: 0
  },
  orderNo: {
    type: String,
    default: ''
  }
});
const visible = defineModel<boolean>('visible', {
  type: Boolean,
  default: false
});
const renderTableData = ref<RechargeTMallOrderHistory[]>([]);
const descData = ref<DescData[]>([]);
// 请求淘宝订单数据
const fetchOrderData = () => {
  descData.value = [];
  queryTMallShopOrder({
    orderNo: props.orderNo
  }).then(res => {
    descData.value = [
      {
        label: '充值账号',
        value: res.data.buyerMessage
      },
      {
        label: '淘宝订单',
        value: BigInt(res.data.tMallOrderNo).toString()
      },
      {
        label: '支付宝订单',
        value: res.data.alipayNo
      },
      {
        label: '买家昵称',
        value: res.data.buyerNick
      },
      {
        label: '买家昵称',
        value: res.data.buyerNick
      },
      {
        label: '状态',
        value: transfromStatusLabel(res.data.status)
      },
      // {
      //   label: '交易状态',
      //   value: transfromTradeStatusLabel(res.data.tradeStatus)
      // },
      {
        label: '创建时间',
        value: res.data.created
      },
      {
        label: '支付时间',
        value: res.data.payTime
      }
    ];
  });
};

const transfromStatusLabel = (status: string) => {
  switch (status) {
    case 'created':
      return '已创建';
    case 'callback':
      return '回调';
    case 'delivery_failed':
      return '虚拟发货失败';
    case 'delivery_succeed':
      return '虚拟发货成功';
    case 'finished':
      return '完结';
    case 'paid':
      return '已付款';
    case 'evaluation':
      return '已评价';
    case 'callback_succeed':
      return '回调成功';
    case 'callback_failed':
      return '回调失败';
    case 'trade_rated_add_succeed':
      return '评价成功';
    case 'trade_rated_add_failed':
      return '评价失败';
    case 'finished_with_wrong_amount':
      return '完结(金额不符)';
    case 'finished_with_wrong_status':
      return '完结(非好评)';
    case 'callback_manual_succeed_manuel':
      return '手动回调成功';
    case 'callback_manual_failed_manuel':
      return '手动回调失败';
    case 'wait_for_evaluation':
      return '等待用户评价';
    case 'bind_shop_succeed':
      return '绑定账号成功';
    default:
      return '其他状态，待更新';
  }
};

const columns: TableColumnData[] = [
  {
    title: '状态',
    dataIndex: 'status',
    render(data: {
      record: TableData;
      column: TableColumnData;
      rowIndex: number;
    }) {
      return transfromStatusLabel(data.record.status);
    }
  },
  {
    title: '来源',
    dataIndex: 'sourceType',
    render(data: {
      record: TableData;
      column: TableColumnData;
      rowIndex: number;
    }) {
      return data.record.sourceType === 'tMall' ? '天猫' : '阿奇索';
    }
  },
  {
    title: '创建时间',
    dataIndex: 'createdAt'
  }
];
const fetchOrderHistoryData = () => {
  queryTMallOrderHistory({
    orderNo: props.orderNo
  }).then(res => {
    renderTableData.value = res.data.list;
  });
};
watchEffect(() => {
  if (visible.value) {
    fetchOrderData();
    fetchOrderHistoryData();
  }
});
</script>

<style lang="less" scoped>
.container {
  padding: 20px;
  background-color: var(--color-fill-2);
}
</style>
