<template>
    <div>
        <span align="center">
            <h4>User Credit Limit Setting</h4>
        </span>
        <br>
        <el-form>
            <el-form-item align="center">
                Time Limit for Customer to Upload Bank Slip :
                <br>
                <el-input size="mini" v-model="credit_setting.time_limit" style=width:20%></el-input> Seconds
            </el-form-item>
            <el-form-item align="center">
                Credit Limit for RMB :
                <el-input placeholder="Amount" v-model="credit_setting.rmb_credit_limit" size="mini" style=width:10%></el-input>
            </el-form-item>
            <el-form-item align="center">
                <el-button type="primary" align="center" :loading="loading_btn" size="primary" @click="updateCreditSetting">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,
                credit_setting: {
                    rmb_credit_limit: null,
                    time_limit: null
                },
                TimeLimitDialogVisible: false,
                CreditLimitDialogVisible: false
            };
        },
        mounted() {
            this.getCreditSetting();
        },
        methods: {
            getCreditSetting() {
                axios.get('/api/setting-credit').then(response => {
                    this.credit_setting = response.data
                })
            },
            updateCreditSetting (){
                this.loading_btn = true
				axios.put('/api/setting-credit', this.credit_setting)
				.then((response) => {
                    this.loading_btn = false
						this.$message({
						showClose: true,
						message: 'Time Limit and Credit Limit Updated Successfully',
						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>