<template>
    <div>
        <span align="center">
            <h4>Billing Charge Setting</h4>
        </span>
        <br>
        <el-form>
            <el-form-item align="center">
                Billing Charge Rate : 
                <el-input size="mini" v-model="billing_charge_setting.billing_charge_rate" style=width:20%></el-input> %
            </el-form-item>
            <el-form-item align="center">
                <el-button type="primary" align="center" :loading="loading_btn" size="primary" @click="updateBillingChargeSetting">Update</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        // TODO : update credit limit and timeout 
        data() {
            return {
                loading_btn: false,
                billing_charge_setting: {
                    billing_charge_rate : null
                },
            };
        },
        beforeMount() {
            this.getBillingChargeSetting();
        },
        methods: {
            getBillingChargeSetting() {
                axios.get('/api/setting-billing-charge').then(response => {
                    this.billing_charge_setting = response.data
                })
            },
            updateBillingChargeSetting (){
                this.loading_btn = true
				axios.put('/api/setting-billing-charge', this.billing_charge_setting)
				.then((response) => {
                    this.loading_btn = false
						this.$message({
						showClose: true,
						message: 'Success',
						type: 'success',
						duration: 5000
					});
				})
				.catch((error) => {
                    this.loading_btn = false
					console.log(error);
					this.$message({
						showClose: true,
						message: 'Update failed, please contact support',
						type: 'error',
						duration: 10000
					});
				})
			},
        }
    };
</script>