@extends('layouts.base')
@section('title', '基础设置')

@section('content')

    <style>
        .tip{font-size:12px;color:#999;}
    </style>
    <div class="right-titpos">
        <ul class="add-snav">
            <li class="active"><a href="#"><i class="fa fa-circle-o"
                                              style="color: #33b5d2;"></i>基础设置</a>
            </li>
        </ul>
    </div>
    <div class="rightlist">
        <div id="test-vue">
            <el-form ref="form" :model="form" label-width="10%" :rules="rules">
                <el-form-item label="开启云喇叭">
                    <el-row :gutter="20">
                        <el-col :span="16">
                            <div class="grid-content bg-purple">
                                <template>
                                    <el-radio v-model="form.is_open" label="0">关闭</el-radio>
                                    <el-radio v-model="form.is_open" label="1">开启</el-radio>
                                </template>
                            </div>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="阿里云帐号 AccessKey" id="accessKey">
                    <el-row :gutter="20">
                        <el-col :span="10">
                            <el-input  type="text"  v-model="form.accessKey">
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="阿里云帐号 SecretKey" id="secretKey">
                    <el-row :gutter="20">
                        <el-col :span="10">
                            <el-input  type="text"  v-model="form.secretKey">
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item><el-form-item label="接入点地址" id="address">
                    <el-row :gutter="20">
                        <el-col :span="10">
                            <el-input  type="text"  v-model="form.address">
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item><el-form-item label="实例 ID" id="instanceId">
                    <el-row :gutter="20">
                        <el-col :span="10">
                            <el-input  type="text"  v-model="form.instanceId">
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item>


                <el-form-item label="Topic" id="topic">
                    <el-row :gutter="20">
                        <el-col :span="10">
                            <el-input  type="text"  v-model="form.topic">
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item>


                <el-form-item label="GroupID" id="groupId">
                    <el-row :gutter="20">
                        <el-col :span="10">
                            <el-input  type="text"  v-model="form.groupId">
                            </el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="喇叭类型">
                    <el-row :gutter="20">
                        <el-col :span="16">
                            <div class="grid-content bg-purple">
                                <template>
                                    <el-radio v-model="form.cloud_type" label="0">云喇叭</el-radio>
                                    <el-radio v-model="form.cloud_type" label="1">ZKC喇叭</el-radio>
                                </template>
                            </div>
                        </el-col>
                    </el-row>
                </el-form-item>

                <el-form-item label="播报内容" id="content">
                    <el-row :gutter="20">
                        <el-col :span="10">
                            <el-input  type="text"  v-model="form.content">
                            </el-input>
                        </el-col>
                    </el-row>
                    <div style="width:50%;">
                        <template >
                            <el-tag style="margin-right:10px;margin-bottom:10px;"  @click="addItem('[订单商品价格]')">[订单商品价格]</el-tag>
                            <el-tag style="margin-right:10px;margin-bottom:10px;"  @click="addItem('[订单实际支付金额]')">[订单实际支付金额]</el-tag>
                        </template>
                        <span class="tip">不填则默认播报内容为：收银台到账[订单实际支付金额]元</span>

                    </div>


                </el-form-item>
                <el-form-item>


                    <el-button type="success" @click.native.prevent="onSubmit"
                               v-loading="formLoading">提交
                    </el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </div>


    </div>

    <script>
        var app = new Vue({
            el: '#test-vue',
            delimiters: ['[[', ']]'],
            data() {
                // 默认数据
                let set = JSON.parse('{!! $set !!}');
                console.log(set);
                return {
                    form: {
                        is_open: '0',
                        content: '',
                        ...set
                    },
                    goods_loading: false,
                    formLoading: false,
                    rules: {
                    }
                }
            },
            methods: {
                addItem(item){
                    console.log(this.form['content']);
                    this.form.content = this.form.content + item;
                    this.$forceUpdate()
                },
                onSubmit() {
                    console.log(1)
                    if (this.formLoading) {
                        return;
                    }
                    this.$refs.form.validate((valid) => {
                        if (valid) {
                            this.$http.post("{!! yzWebUrl('plugin.cloud-speaker.admin.set') !!}", {'setting': this.form}).then(response => {
                                if (response.data.result) {
                                    this.$message({
                                        message: response.data.msg,
                                        type: 'success'
                                    });
                                    window.location.reload();
                                } else {
                                    this.$message({
                                        message: response.data.msg,
                                        type: 'error'
                                    });
                                }

                                this.formLoading = false;
                            }, response => {
                                console.log(response);
                            });
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                }
            }
        });
    </script>
@endsection