<template>
  <div>
    <a-spin :spinning="loading" :tip="tip">
      <a-icon slot="indicator" type="loading" style="font-size: 24px" spin />
      <a-form style="max-width: 700px; margin: 40px auto 0;">
        <a-alert
          :closable="true"
          message="确认支付后，资金将直接打入对方账户，无法退回。"
          style="margin-bottom: 24px;"
        />
        <a-form-item
          label="支付服务商"
          :labelCol="{span: 7}"
          :wrapperCol="{span: 17}"
          class="stepFormText"
        >
          {{model.subcontractorName}}
        </a-form-item>
        <a-form-item
          label="服务商到款"
          :labelCol="{span: 7}"
          :wrapperCol="{span: 17}"
          class="stepFormText"
        >
          ￥ <span class="money">{{model.totalPayment}}</span>
        </a-form-item>
        <a-form-item
          label="服务商支出"
          :labelCol="{span: 7}"
          :wrapperCol="{span: 17}"
          class="stepFormText"
        >
          ￥ <span class="money">{{model.payment}}</span>
        </a-form-item>
        <a-form-item
          label="交易结余(服务费)"
          :labelCol="{span: 7}"
          :wrapperCol="{span: 17}"
          class="stepFormText"
        >
          ￥ <span class="money">{{model.serviceFee}}</span>
        </a-form-item>
        <a-form-item :wrapperCol="{span: 17, offset: 7}">
          <a-button :loading="loading" type="primary" @click="nextStep">确认付款</a-button>
          <a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
        </a-form-item>

        <HlwPaymentErrorModal ref="errorModal" @ok="nextPayment" @close="closeModal"></HlwPaymentErrorModal>
      </a-form>
    </a-spin>
  </div>
</template>

<script>
  import HlwPaymentErrorModal from './HlwPaymentErrorModal'
  import { httpAction } from '@/api/manage'

  export default {
    name: "Step3",
    components: {
      HlwPaymentErrorModal
    },
    data () {
      return {
        loading: false,
        tip: '正在向银行提交付款申请，请稍等...',
        url:{
          payment: '/wisdom/hlwPayment/payment',
          nextPayment: '/wisdom/hlwPayment/nextPayment'
        }
      }
    },
    props:{
      model:{
        type:Object,
        default:function() {
          return {}
        }
      }
    },
    methods: {
      nextStep () {
        let that = this
        that.payment();
      },
      prevStep () {
        this.$emit('prevStep',this.model)
      },
      //付款
      payment(){
        const that = this

        //开始支付
        that.loading = true
        let httpurl = this.url.payment;
        let method = 'put';
        let formData = Object.assign(this.model, {});
        console.log("表单提交数据",formData)
        httpAction(httpurl,formData,method).then((res)=>{
          if(res.success){
            that.$emit('nextStep')
          }else{
            if(res.message === '超出第一级税率'){
              that.$refs.errorModal.edit(res.result,formData)
              that.$refs.errorModal.title = '提示'
              that.$refs.errorModal.disableSubmit = false
              that.$refs.errorModal.desc = '本月累计收款超出第一级税率'
            } else if(res.message === '当月累计金额找不到配置的税率'){
              that.$refs.errorModal.edit(res.result,formData)
              that.$refs.errorModal.title = '提示'
              that.$refs.errorModal.disableSubmit = true
              that.$refs.errorModal.desc = '找不到税率区间'
            }else{
              that.$error({
                title: '支付失败',
                content: res.message,
                okText: '知道了',
                centered: true,
                onOk: () => {
                  that.$emit('finish')
                }
              })
            }

          }
        }).finally(() => {
          that.loading = false;
        })
      },
      //继续付款
      nextPayment(){
        const that = this

        //开始支付
        that.loading = true
        let httpurl = this.url.nextPayment;
        let method = 'put';
        let formData = Object.assign(this.model, {});
        console.log("表单提交数据",formData)
        httpAction(httpurl,formData,method).then((res)=>{
          if(res.success){
            that.$emit('nextStep')
          }else{
            that.$error({
              title: '支付失败',
              content: res.message,
              okText: '知道了',
              centered: true,
              onOk: () => {
                that.$emit('finish')
              }
            })
          }
        }).finally(() => {
          that.loading = false;
        })
      },
      //取消
      closeModal () {
        this.$emit('finish')
      }
    }
  }
</script>

<style lang="less" scoped>
  .stepFormText {
    margin-bottom: 24px;

    .ant-form-item-label,
    .ant-form-item-control {
      line-height: 22px;
    }
  }
  .money {
    font-family: "Helvetica Neue",sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 14px;
  }
</style>