import { Card, Statistic } from '@arco-design/web-vue';
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'userPaymentBalance',
  props: {
    balance: {
      type: Number,
      required: true,
      default: 0
    }
  },
  setup(props) {
    return () => (
      <Card
        title='余额'
        class='general-card'
        bodyStyle={{ textAlign: 'center' }}
      >
        <Statistic
          animation
          value={props.balance}
          precision={2}
          value-from={0}
          v-slots={{ suffix: () => <span class='unit'>元</span> }}
          value-style={{ fontSize: '3rem' }}
        />
      </Card>
    );
  }
});
