<template>
  <div>
    <a-form style="max-width: 700px; margin: 40px auto 0;">

      <a-form-item
        label="当前余额"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 17}"
      >
        ￥ <span class="money" style="color: #52C41A;">{{model.accountBalance}}</span>
      </a-form-item>

      <a-form-item
        label="本次付款"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 17}"
      >
        ￥ <span class="money" style="color: #f50;">{{model.payment}}</span>
      </a-form-item>

      <a-form-item
        label="服务费"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 17}"
      >
        ￥ <span class="money" style="color: #f50;">{{model.serviceFee}}</span>
      </a-form-item>

      <a-form-item
        label="账户结余"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 17}"
      >
        ￥ <span class="money" style="color: #2db7f5;">{{model.surplus}}</span>
      </a-form-item>

      <a-form-item :wrapperCol="{span: 17, offset: 7}">
        <a-button type="primary" @click="nextStep">下一步</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
  export default {
    name: "Step1",
    data(){
      return{
      }
    },
    props:{
      model:{
        type:Object,
        default:function() {
          return {}
        }
      }
    },
    methods: {
      nextStep () {
        this.$emit('nextStep',this.model)
      }
    }
  }
</script>

<style lang="less" scoped>
  .money {
    font-family: "Helvetica Neue",sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 14px;
  }
</style>