import { Card, Radio, RadioGroup } from '@arco-design/web-vue';
import { defineComponent, reactive } from 'vue';
import { PaymentRecordTable } from '../../management/components/payment-list-drawer.tsx';

export default defineComponent({
  name: 'UerPaymentRecord',
  setup() {
    const state = reactive<{ transcationType: string }>({
      transcationType: ''
    });
    return () => (
      <Card
        class='general-card'
        title='充值/消费流水'
        size='small'
        v-slots={{
          extra: () => (
            <RadioGroup
              v-model={state.transcationType}
              size='small'
              type='button'
            >
              <Radio value=''>全部</Radio>
              <Radio value='deposit'>充值</Radio>
              <Radio value='consumption'>消费</Radio>
              <Radio value='Manual Adjustment'>扣除</Radio>
            </RadioGroup>
          )
        }}
      >
        <PaymentRecordTable
          size='small'
          transactionType={state.transcationType}
        />
      </Card>
    );
  }
});
