import { getOrderSummary, type OrderSummary } from '@/api/t-mall-game-order.ts';
import type { Pagination } from '@/types/global';
import {
  Card,
  Radio,
  RadioGroup,
  Table,
  type TableColumnData
} from '@arco-design/web-vue';
import { defineComponent, onMounted, reactive, ref, watch } from 'vue';

export const TmallSummaryTable = defineComponent({
  name: 'tMallOrderSummary',
  props: {
    callbackType: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const basePagination: Pagination = {
      current: 1,
      pageSize: 50
    };
    const pagination = reactive({
      ...basePagination
    });
    const renderTable = ref<OrderSummary[]>([]);
    const columns: TableColumnData[] = [
      {
        title: '序号',
        slotName: 'index',
        render({ rowIndex }) {
          return rowIndex + 1;
        }
      },
      {
        title: '总量',
        dataIndex: 'count'
      },
      {
        title: '总成功量',
        dataIndex: 'succeedCount'
      },
      {
        title: '总金额',
        dataIndex: 'amount'
      },
      {
        title: '成功总金额',
        dataIndex: 'succeedAmount'
      },
      {
        title: '成功率',
        dataIndex: 'rate'
      },
      {
        title: '日期',
        dataIndex: 'createdAt'
      }
    ];
    onMounted(() => {
      getOrderSummary(pagination).then(res => {
        renderTable.value = res.data.list;
      });
    });
    watch(
      () => props.callbackType,
      val => {
        getOrderSummary({ ...pagination, callbackType: val }).then(res => {
          renderTable.value = res.data.list;
        });
      }
    );
    return () => <Table data={renderTable.value} columns={columns} />;
  }
});

export default defineComponent({
  name: 'UerPaymentRecord',
  setup() {
    const state = reactive<{ callbackType: string }>({
      callbackType: ''
    });
    return () => (
      <Card
        class='general-card'
        title='充值/消费流水'
        size='small'
        v-slots={{
          extra: () => (
            <RadioGroup v-model={state.callbackType} size='small' type='button'>
              <Radio value=''>全部</Radio>
              <Radio value='confirm'>确认收货</Radio>
              <Radio value='evaluation'>好评</Radio>
            </RadioGroup>
          )
        }}
      >
        <TmallSummaryTable callbackType={state.callbackType} />
      </Card>
    );
  }
});
