<template>
  <!-- 退款 -->
  <el-dialog :visible.sync="showRefund" title="退款" width="400px" @open="onOpen">
    <el-form :model="form" :rules="rules">
      <el-form-item label="退款金额" prop="refundAmount">
        <el-input-number v-model="form.refundAmount" placeholder="请输入退款金额" :min="0" :max="amount" :precision="2" :step="0.01"/> 元
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitRefund" :loading="loading">确 定</el-button>
      <el-button @click="showRefund = false" >取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { refundBill } from '@/api/system/recharge'

export default {
  name: "RefundDialog",
  props: {
    show: {
      type: Boolean,
      default: false
    },
    billId: {
      type: String,
      default: null,
    },
    amount: {
      type: Number,
      default: null
    }
  },
  computed: {
    showRefund: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit('update:show', val);
      }
    },
  },
  data() {
    return {
      loading: false,
      form: {},
      // 表单
      rules: {
        refundAmount: [
          { required: true, type: 'number', message: "退款金额不能为空", trigger: "blur" }
        ]
      },
    }
  },
  created() {
    this.reset();
  },
  methods: {
    onOpen() {
      this.reset();
    },
    reset() {
      this.form = {
        billId: this.billId,
        refundAmount: this.amount,
      }
    },
    submitRefund() {
      this.loading = true;
      refundBill(this.form.billId, this.form.refundAmount).then(res => {
        if (res.code === 200) {
          this.$message.success("操作成功");
          this.showRefund = false;
          this.$emit('success');
        }
      }).finally(() => {
        this.loading = false;
      })
    },
  }
}

</script>
