<template>
  <a-modal
    :title="title"
    :visible="visible"
    :width="width"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    :footer="null"
    @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">
      <a-steps class="steps" :current="currentTab">
        <a-step title="当前支付信息" />
        <a-step title="确认支付信息" />
        <a-step title="完成支付" />
      </a-steps>
      <div class="content">
        <step1 v-if="currentTab === 0" :model="model" @nextStep="nextStep"/>
        <step3 v-if="currentTab === 1" :model="model" @nextStep="nextStep" @prevStep="prevStep" @finish="finish"/>
        <step4 v-if="currentTab === 2" @prevStep="prevStep" @finish="finish" @ok="modalFormOk"/>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
  import Step1 from './HlwPaymentStep1'
  import Step3 from './HlwPaymentSubcontractorStep3'
  import Step4 from './HlwPaymentStep4'
  import { Arithmetic } from '@/mixins/Arithmetic'

  export default {
    name: "StepForm",
    mixins:[Arithmetic],
    components: {
      Step1,
      Step3,
      Step4
    },
    data () {
      return {
        description: '支付分步表单',
        currentTab: 0,
        // form
        form: null,
        title: '',
        visible: false,
        width: 1000,
        confirmLoading: false,
        model: {},
      }
    },
    methods: {
      edit(record) {
        console.log(record)
        this.confirmLoading = true;
        setTimeout(()=>{
          this.confirmLoading = false
        },400)
        this.model = Object.assign({}, record)
        this.visible = true
      },
      handleCancel() {
        if(this.currentTab === 2){
          this.$emit('ok');
        }
        this.close()
      },
      close() {
        this.currentTab = 0;
        this.visible = false
      },
      // handler
      nextStep (model) {
        this.model = model;
        if (this.currentTab < 2) {
          this.currentTab += 1
        }
      },
      prevStep (model) {
        this.model = model;
        if (this.currentTab > 0) {
          this.currentTab -= 1
        }
      },
      finish () {
        this.close()
      },
      modalFormOk(){
        this.$emit('ok');
        this.close()
      }
    }
  }
</script>

<style lang="less" scoped>
  .steps {
    max-width: 750px;
    margin: 16px auto;
  }
</style>