@extends('layouts.base')
@section('title', trans('基础设置'))
@section('content')
    <link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}"/>
    <link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-ohter.css')}}"/>
    <div id="app" v-cloak>
        <el-form ref="form" :model="form" label-width="15%">
            <div class="vue-head">
                <div class="vue-main-title">
                    <div class="vue-main-title-left"></div>
                    <div class="vue-main-title-content">基础设置</div>
                </div>

                <div class="vue-main-form">
                    <el-form-item label="开启小程序广告" prop="">
                        <el-switch v-model="form.open_state" :active-value="1"
                                   :inactive-value="0"></el-switch>
                    </el-form-item>
                </div>

                <div class="vue-main-form">
                    <el-form-item label="广告">
                        <el-radio-group border="true" v-model="form.adv_type">
                            <el-radio :label="1">营销云广告</el-radio>
                            <el-radio :label="2">小程序官方流量主广告</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </div>

                <template v-if="form.adv_type==1">
                    <div class="vue-main-form">
                        <el-form-item label="APPID">
                            <el-input width="70%" v-model="form.app_id"></el-input>
                            <div class="tip">营销云应用ID</div>
                        </el-form-item>
                    </div>

                    <div class="vue-main-form">
                        <el-form-item label="第三方广告域名">
                            <el-input width="70%" v-model="form.adv_url"></el-input>
                            <div class="tip">小程序服务域名需配置该域名才可正常使用</div>
                        </el-form-item>
                    </div>

                    <div class="vue-main-form">
                        <el-form-item label="广告ID">
                            <el-input width="70%" v-model="form.adv_id"></el-input>
                            <div class="tip">多个广告ID使用逗号(英文格式)分隔</div>
                        </el-form-item>
                    </div>

                    <div class="vue-main-form">
                        <el-form-item label="微信广告单元ID">
                            <el-input width="70%" v-model="form.mini_form_id"></el-input>
                        </el-form-item>
                    </div>
                </template>

                <template v-if="form.adv_type==2">
                    <div class="vue-main-form">
                        <el-form-item label="微信广告位ID">
                            <el-input width="70%" v-model="form.mini_id"></el-input>
                        </el-form-item>
                    </div>
                </template>


            </div>

            <div class="vue-head">
                <div class="vue-main-title">
                    <div class="vue-main-title-left"></div>
                    <div class="vue-main-title-content">奖励设置</div>
                </div>

                <div class="vue-main-form">
                    <el-form-item label="观看奖励设置">
                        <template v-for="(v,k) in form.reward_data">
                            <el-row :gutter="1">
                                <el-col :span="8">
                                    <el-input v-model="v.amount">
                                        <template slot="prepend">[[v.level_name]]：每个视频奖励</template>
                                        <template slot="append">积分</template>
                                    </el-input>
                                </el-col>
                                <el-col :span="8">
                                    <el-input v-model="v.day_max_count">
                                        <template slot="prepend">每天最多观看</template>
                                        <template slot="append">个视频</template>
                                    </el-input>
                                </el-col>
                            </el-row>
                            <p></p>
                        </template>
                    </el-form-item>
                </div>
            </div>
            <div class="vue-page">
                <div class="vue-center">
                    <el-button type="primary" @click="submitForm('form')">提交</el-button>
                    <el-button @click="goBack">返回</el-button>
                </div>
            </div>
        </el-form>
    </div>
    <script>

        new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                return {
                    form: {
                        open_state: 0,
                        adv_type: 1,
                        app_id: '',
                        adv_id: '',
                        adv_url: '',
                        mini_form_id: '',
                        reward_type: 1,
                        reward_data: [],
                    },
                }
            },
            created() {
            },
            mounted() {
                this.getData();
            },
            methods: {
                getData() {
                    let loading = this.$loading({
                        target: document.querySelector(".content"),
                        background: 'rgba(0, 0, 0, 0)'
                    });
                    this.$http.post('{!! yzWebFullUrl('plugin.flyers-advertise.admin.setting.miniSetting',['is_json'=>1]) !!}').then(function (response) {
                            if (response.data.result) {
                                this.form = response.data.data;
                            } else {
                                this.$message({message: response.data.msg, type: 'error'});
                            }
                            loading.close();
                        }, function (response) {
                            this.$message({message: response.data.msg, type: 'error'});
                            loading.close();
                        }
                    );
                },
                submitForm(formName) {
                    console.log(this.form);
                    this.$http.post("{!! yzWebFullUrl('plugin.flyers-advertise.admin.setting.editMiniSetting') !!}", this.form).then(response => {
                        if (response.data.result) {
                            this.$message({type: 'success', message: '操作成功!'});
                            window.location.reload();
                        } else {
                            this.$message({message: response.data.msg, type: 'error'});
                        }
                    });
                },
                goBack() {
                    history.go(-1)
                },
            },
        })

    </script>

@endsection