<template>
    <el-dialog title="交易金额返还" :visible.sync="dialogVisible" width="420px">
        <el-form :model="form" label-width="120px">
            <el-form-item label="返还骑行费：">
                <el-input v-model="form.ridePayMoney" style="width:200px"/>
            </el-form-item>
            <el-form-item label="返还调度费：">
                <el-input v-model="form.dispatchFeeMoney" style="width:200px"/>
            </el-form-item>
            <el-form-item label="交易金额：">
                <span class="money">{{ Number(sumMoney) - Number(form.ridePayMoney) - Number(form.dispatchFeeMoney) }}</span>元
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import api from '@/api/order'
    export default {
        name: "order-back",
        data() {
            return {
                dialogVisible: false,
                sumMoney: 0,
                form: {
                    mode: 2,
                    id: '',
                    ridePayMoney: 0,
                    dispatchFeeMoney: 0
                },
                orderData: {}
            }
        },
        watch: {
            "form.ridePayMoney"(cur) {
                if(this.orderData.ridingFeeMoney-cur<0) {
                    this.$message({
                        message: '返回骑行费金额不能超过'+this.orderData.ridingFeeMoney,
                        type: 'warning'
                    });
                }
            },
            "form.dispatchFeeMoney"(cur) {
                if(this.orderData.dispatchFeeMoney-cur<0) {
                    this.$message({
                        message: '返回调度费金额不能超过'+this.orderData.dispatchFeeMoney,
                        type: 'warning'
                    });
                }
            }
        },
        methods: {
            open(data) {
                this.dialogVisible = true
                this.form.id = data.id
                this.form.ridePayMoney = 0
                this.form.dispatchFeeMoney = 0
                this.sumMoney = data.totalPayMoney
                this.orderData = data
                console.log(data)
            },
            submit() {
                if((this.sumMoney-this.form.dispatchFeeMoney-this.form.ridePayMoney)<0) {
                    this.$message({
                        message: '返回金额不能超过交易金额',
                        type: 'warning'
                    });
                } else {
                    api.updateOrder(this.form).then(res => {
                        console.log(res)
                        this.$message({
                            type: 'success',
                            message: '返还成功!'
                        });
                        this.dialogVisible = false
                        this.$emit('updateList')
                    }).catch(err => {
                        console.log(err)
                    })
                }

            }
        }
    }
</script>

<style scoped>
    .money {
        font-weight: bold;
        font-size: 1rem;
        color: dodgerblue;
        margin-right: 5px;
    }
</style>
