<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(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-pay",
        data() {
            return {
                dialogVisible: false,
                form: {
                    mode: 0,
                    id: '',
                    ridePayMoney: 0,
                    dispatchFeeMoney: 0,
                }
            }
        },
        methods: {
            open(data) {
                this.dialogVisible = true
                this.form.id = data.id
                this.form.ridePayMoney = data.totalPayMoney
                console.log(data)
            },
            submit() {
                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: red;
    margin-right: 5px;
}
</style>
