<template>
    <div>
        <span align="center">
            <h4>Tax Setting</h4>
        </span>
        <br>
        <el-form>
            <el-form-item align="center">
                Tax : 
                <el-input size="mini" v-model="tax_setting.tax_rate" style=width:20%></el-input> <br>(Example : 1%, input 1.01 and 0% input 1.0)
            </el-form-item>
            <el-form-item align="center">
                <el-button type="primary" align="center" :loading="loading_btn" size="primary" @click="updateTaxSetting">Update</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        data() {
            return {
                loading_btn: false,
                tax_setting: {
                    tax_rate : null
                },
            };
        },
        mounted() {
            this.getTaxSetting();
        },
        methods: {
            getTaxSetting() {
                axios.get('/api/setting-tax').then(response => {
                    this.tax_setting = response.data;
                    console.log(this.tax_setting);
                })
            },
            updateTaxSetting (){
                this.loading_btn = true
                console.log(this.tax_setting);
				axios.put('/api/setting-tax', this.tax_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>