<template>
  <el-dialog
    title="充值未到账怎么办？"
    :visible.sync="dialogVisible"
    width="40%"
    :before-close="handleClose">
    <el-form :model="formData" :rules="rules" label-width="140px" ref="myForm">
      <el-form-item label="支付宝充值订单号" prop="payment">
        <el-input placeholder="请输入充值订单号(支付宝账单可查看)" v-model="formData.payment"></el-input>
      </el-form-item>
      <el-form-item label="充值金额" prop="amount">
        <el-input type="number" placeholder="请输入充值金额)" v-model.number="formData.payment"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
        <el-button type="primary" @click="submitForm('myForm')">确 定</el-button>
      </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'el-dialog',
  data () {
    return {
      dialogVisible: false,
      formData: {
        payment: '',
        amount: ''
      },
      rules: {
        payment: [
          { required: true, message: '请输入充值订单号', trigger: 'change' }
        ],
        amount: [
          { required: true, message: '请选择支付金额', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    submitForm (formName) {
      console.log(this.formData)
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          alert('submit!')
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
