<template>
    <div>
        <el-form ref="form" :model="form" label-width="120px" label-position="left">
            <el-form-item label="货币单位">
                <el-radio-group v-model="form.currency">
                    <el-radio-button label="￥">￥</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="备用金">
                <el-input v-model="form.prepareAmount" placeholder="0.00" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="保留小数位">
                <el-radio-group v-model="form.decimalsDigits">
                    <el-radio-button label="0">元</el-radio-button>
                    <el-radio-button label="1">角</el-radio-button>
                    <el-radio-button label="2">分</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="语音通知">
                <el-switch v-model="form.voiceNotification" :active-value="1" :inactive-value="0"></el-switch>
                <div style="color: #999;">开启后将语音播报待处理事件</div>
            </el-form-item>
            <el-form-item label="移动端支付">
                <el-switch v-model="form.allowWebPay" :active-value="1" :inactive-value="0"></el-switch>
                <div style="color: #999;">是否允许用户在小程序端支付订单</div>
            </el-form-item>
            <el-form-item label="自动锁屏">
                <el-select v-model="form.autoLockScreen" placeholder="请选择锁屏时间">
                    <el-option label="不自动锁屏" :value="0"></el-option>
                    <el-option label="30s" value="30"></el-option>
                    <el-option label="1min" value="60s"></el-option>
                    <el-option label="2min" value="120s"></el-option>
                    <el-option label="5min" value="300s"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitHandle" :loading="formLoading">
                    <span v-if="!formLoading">保存</span>
                    <span v-else>保存中...</span>
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { tbShopCurrency, tbShopCurrencyPut } from '@/api/shop'
export default {
    data() {
        return {
            formLoading: false,
            form: {}
        }
    },
    mounted() {
        this.tbShopCurrency()
    },
    methods: {
        // 保存
        submitHandle() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    this.formLoading = true
                    try {
                        const res = await tbShopCurrencyPut(this.form)
                        this.formLoading = false
                        this.$notify({
                            title: '成功',
                            message: '提交成功',
                            type: 'success'
                        });
                    } catch (error) { }
                }
            })
        },
        // 获取基本配置
        async tbShopCurrency() {
            try {
                const res = await tbShopCurrency(localStorage.getItem('shopId'))
                this.form = res
            } catch (error) { }
        }
    }
}
</script>