<template>
    <div v-loading="loading">
        <div class="white-box">
            <el-form ref="form" :model="form" label-width="250px" class="form-page" style="margin-top: 25px;">
                <el-form-item :label="form.TITLE" :key="form.CONFIG_NAME">
                    <el-input v-model="form.VALUE">
                        <template slot="append">naira / $</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="刷新商品价格">
                    <el-switch v-model="synchronize"></el-switch>
                </el-form-item>
                <el-form-item label="" v-show="notice">
                    <span style="font-weight: bold; color: red; font-size: 14px;">开启后会根据最新汇率刷新商品的奈拉价格，请谨慎操作！！</span>
                </el-form-item>
                <el-form-item>
                    <el-button :type="btnType" size="medium" @click="onSubmit" :loading="submitButtonStat">{{ btnTxt }}</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import network from '@/utils/network'
import locale from "element-ui/lib/locale/lang/en";
export default {
    name: 'config_exchange_rate',
    created() {
        this.getData()
    },
    data() {
        return {
            form: {
                CONFIG_NAME: '',
                VALUE: 0,
                TITLE: '',
            },
            loading: true,
            submitButtonStat: false,
            btnType: 'primary',
            btnTxt: '保存汇率',
            notice: false,
            synchronize: false,
        }
    },
    methods: {
        onSubmit() {
            this.$confirm(this.btnTxt, 'Hint', {
                confirmButtonText: 'confirm', // 确定
                cancelButtonText: 'cancel', // 取消

                type: 'warning'
            }).then(() => {
                this.submitButtonStat = true

                let param = this.form
                param.synchronize = this.synchronize
                return network.postData('config/exchange-rate', param).then(response => {
                    this.$message({
                        message: response,
                        type: 'success'
                    })
                    this.submitButtonStat = false
                    location.reload()
                }).catch(_ => {
                    this.submitButtonStat = false
                    this.getData()
                })
            }).catch(() => {
                this.submitButtonStat = false
            })
        },
        getData() {
            network.getData('config/exchange-rate').then(response => {
                this.form = response
                this.loading = false
            })
        }
    },
    watch: {
        // 监听是否同步刷新商品价格
        synchronize: {
            handler(modern, origin) {
                this.btnType = (modern === true) ? 'danger' : 'primary'
                this.btnTxt = (modern === true) ? '保存并刷新商品价格' : '保存汇率'
                this.notice = (modern === true)
            },
            // 深度监听
            deep: true,
        }
    }
}
</script>

<style scoped>

</style>
