@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" :rules="rules" label-width="15%">
            <div class="vue-main">
                <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>
                            <el-switch v-model="form.open" :active-value="1" :inactive-value="0"></el-switch>
                        </template>
                    </el-form-item>
                    <el-form-item label="广告商">
                        <template>
                            <el-radio-group v-model="form.advert_type" text-color="#29ba9c" @change="changeRewardData">
                                <el-radio :label="0">皓量广告</el-radio>
                                <el-radio :label="1">西域广告</el-radio>
                                <el-radio :label="2">赋能广告</el-radio>
                            </el-radio-group>
                        </template>
                    </el-form-item>

                    {{--营销云广告--}}
                    <div>
                        <el-form-item label="任务中心入口图" prop="banner_one">
                            <div class="upload-box" @click="openUpload('banner_one.img')" v-if="!form.banner_one.img_url">
                                <i class="el-icon-plus" style="font-size:32px"></i>
                            </div>
                            <div @click="openUpload('banner_one.img')" class="upload-boxed" v-if="form.banner_one.img_url">
                                <img :src="form.banner_one.img_url" alt="" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;">
                                <i class="el-icon-close" @click.stop="clearImg('banner_one','img')" title="点击清除图片"></i>
                                <div class="upload-boxed-text">点击重新上传</div>
                            </div>
                            <div class="tip">建议图片比例:16:4</div>
                        </el-form-item>

                        <el-form-item label="说明">
                            <template>
                                <el-input type="textarea":rows="4"  v-model="form.information" style="width:70%;"></el-input>
                            </template>
                            <div class="tip">不能超出5千字</div>
                        </el-form-item>
                        <el-form-item label="任务中心banner图1" prop="banner1">
                            <div class="upload-box" @click="openUpload('banner_two.img')" v-if="!form.banner_two.img_url">
                                <i class="el-icon-plus" style="font-size:32px"></i>
                            </div>
                            <div @click="openUpload('banner_two.img')" class="upload-boxed" v-if="form.banner_two.img_url">
                                <img :src="form.banner_two.img_url" alt="" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;">
                                <i class="el-icon-close" @click.stop="clearImg('banner_two','img')" title="点击清除图片"></i>
                                <div class="upload-boxed-text">点击重新上传</div>
                            </div>
                            <div class="tip">建议图片比例:16:9</div>
                        </el-form-item>
                        <el-form-item label="任务中心banner图2" prop="banner_three">
                            <div class="upload-box" @click="openUpload('banner_three.img')" v-if="!form.banner_three.img_url">
                                <i class="el-icon-plus" style="font-size:32px"></i>
                            </div>
                            <div @click="openUpload('banner_three.img')" class="upload-boxed" v-if="form.banner_three.img_url">
                                <img :src="form.banner_three.img_url" alt="" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;">
                                <i class="el-icon-close" @click.stop="clearImg('banner_three','img')" title="点击清除图片"></i>
                                <div class="upload-boxed-text">点击重新上传</div>
                            </div>
                        </el-form-item>
                        <el-form-item label="任务中心2自定义链接" prop="url">
                            <template>
                                <el-input v-model="form.url" style="width:80%">
                                </el-input>
                            </template>
                        </el-form-item>
                    </div>
                    {{--营销云广告--}}

                </div>
                <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>
                            <el-radio-group v-model="form.reward_type" text-color="#29ba9c" @change="changeRewardData">
                                <el-radio :label="1">会员等级奖励</el-radio>
                                <el-radio :label="2" v-if="is_commission">分销等级奖励</el-radio>
                            </el-radio-group>
                        </template>
                    </el-form-item>

                    {{--皓量广告--}}
                    <div v-if="form.reward_type == 1">
                        <el-form-item label="观看奖励">
                            <template>
                                <el-radio-group v-model="form.look_reward" text-color="#29ba9c">
                                    <el-radio :label="0">积分</el-radio>
                                    <el-radio :label="1">爱心值</el-radio>
                                </el-radio-group>
                            </template>
                        </el-form-item>
                        <el-form-item label="" prop="">
                            <table class="el-table" style="width:90%">
                                <tr style="border-bottom:1px solid #EBEEF5">
                                    <th style="width:120px;padding-top:0">等级名称</th>
                                    <th style="padding-top:0">奖励数量</th>
                                </tr>
                                <tr v-for="(item,index) in form.look_level">
                                    <td>
                                        [[item.level_name]]
                                    </td>
                                    <td>
                                        <el-input v-model="item.level_rate" style="width:80%">
                                        </el-input>
                                    </td>
                                </tr>
                            </table>

                        </el-form-item>
                        <el-form-item label="直推上级奖励">
                            <template>
                                <el-radio-group v-model="form.parent_reward" text-color="#29ba9c">
                                    <el-radio :label="0">积分</el-radio>
                                    <el-radio :label="1">爱心值</el-radio>
                                </el-radio-group>
                            </template>
                        </el-form-item>
                        <el-form-item label="" prop="">
                            <table class="el-table" style="width:90%">
                                <tr style="border-bottom:1px solid #EBEEF5">
                                    <th style="width:120px;padding-top:0">等级名称</th>
                                    <th style="padding-top:0">奖励数量</th>
                                </tr>
                                <tr v-for="(item,index) in form.parent_level">
                                    <td>
                                        [[item.level_name]]
                                    </td>
                                    <td>
                                        <el-input v-model="item.level_rate" style="width:80%">
                                        </el-input>
                                    </td>
                                </tr>
                            </table>
                        </el-form-item>
                    </div>

                    {{--西域广告--}}
                    <div v-if="form.reward_type == 2">
                        <el-form-item label="观看奖励">
                            <table class="el-table" style="width:90%">
                                <tr style="border-bottom:1px solid #EBEEF5">
                                    <th style="width:120px;padding-top:0">等级名称</th>
                                    <th style="padding-top:0">数据</th>
                                </tr>
                                <tr v-for="(item,index) in form.look_level">
                                    <td>
                                        [[item.level_name]]
                                    </td>
                                    <td>
                                        <el-input placeholder="" v-model="item.point" style="width: 18%">
                                            <template slot="append">积分</template>
                                        </el-input>
                                        <el-input placeholder="" v-model="item.integral" style="width: 18%" v-if="is_integral">
                                            <template slot="append">消费积分</template>
                                        </el-input>
                                        <el-input placeholder="" v-model="item.capping_point" style="width: 25%">
                                            <template slot="prepend">封顶奖励积分</template>
                                        </el-input>
                                        <el-input placeholder="" v-model="item.capping_integral" style="width: 25%" v-if="is_integral">
                                            <template slot="prepend">封顶奖励消费积分</template>
                                        </el-input>
                                    </td>
                                </tr>
                            </table>
                        </el-form-item>
                        <el-form-item label="直推上级奖励">
                            <table class="el-table" style="width:90%">
                                <tr style="border-bottom:1px solid #EBEEF5">
                                    <th style="width:120px;padding-top:0">等级名称</th>
                                    <th style="padding-top:0">数据</th>
                                </tr>
                                <tr v-for="(item,index) in form.parent_level">
                                    <td>
                                        [[item.level_name]]
                                    </td>
                                    <td>
                                        <el-input placeholder="" v-model="item.point" style="width: 18%">
                                            <template slot="append">积分</template>
                                        </el-input>
                                        <el-input placeholder="" v-model="item.integral" style="width: 18%" v-if="is_integral">
                                            <template slot="append">消费积分</template>
                                        </el-input>
                                        <el-input placeholder="" v-model="item.capping_point" style="width: 25%">
                                            <template slot="prepend">封顶奖励积分</template>
                                        </el-input>
                                        <el-input placeholder="" v-model="item.capping_integral" style="width: 25%" v-if="is_integral">
                                            <template slot="prepend">封顶奖励消费积分</template>
                                        </el-input>
                                    </td>
                                </tr>
                            </table>
                        </el-form-item>
                        <el-form-item label="二级上级奖励">
                            <table class="el-table" style="width:90%">
                                <tr style="border-bottom:1px solid #EBEEF5">
                                    <th style="width:120px;padding-top:0">等级名称</th>
                                    <th style="padding-top:0">数据</th>
                                </tr>
                                <tr v-for="(item,index) in form.parent_level2">
                                    <td>
                                        [[item.level_name]]
                                    </td>
                                    <td>
                                        <el-input placeholder="" v-model="item.point" style="width: 18%">
                                            <template slot="append">积分</template>
                                        </el-input>
                                        <el-input placeholder="" v-model="item.integral" style="width: 18%" v-if="is_integral">
                                            <template slot="append">消费积分</template>
                                        </el-input>
                                        <el-input placeholder="" v-model="item.capping_point" style="width: 25%">
                                            <template slot="prepend">封顶奖励积分</template>
                                        </el-input>
                                        <el-input placeholder="" v-model="item.capping_integral" style="width: 25%" v-if="is_integral">
                                            <template slot="prepend">封顶奖励消费积分</template>
                                        </el-input>
                                    </td>
                                </tr>
                            </table>
                        </el-form-item>
                        <el-form-item label="">
                            <div class="tips">
                                注：封顶金额每天重新统计。<br>
                                封顶金额若有修改，封顶金额按新的计算，例如：封顶金额100，A获得了50积分，<br>
                                若封顶金额改成了 50，那A无额度；封顶金额改为150，A就还有100的额度<br>
                                以上奖励均满足观看时间才会产生奖励，如果观看时间不足则不产生奖励！！！<br>
                                每个视频同一个会员每天只能获得一次观看奖励
                            </div>
                        </el-form-item>
                    </div>
                    {{--中旺科广告--}}
                </div>
            </div>
        </el-form>

        <!-- 分页 -->
        <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>
        <upload-img :upload-show="uploadShow" :name="chooseImgName" @replace="changeProp" @sure="sureImg"></upload-img>

    </div>
    <script src="{{resource_get('static/yunshop/tinymce4.7.5/tinymce.min.js')}}"></script>
    @include('public.admin.tinymceee')
    @include('public.admin.uploadImg')
    @include('public.admin.pop')
    @include('public.admin.program')
    <script>
        let level = JSON.parse('{!!$level ?: []!!}');
        let is_commission = '{!!$is_commission!!}';
        let is_integral = '{!!$is_integral!!}';

        let commission_level = JSON.parse('{!!$commission_level ?: []!!}');
        new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                return {
                    order_type: 1,
                    table_loading: false,
                    chooseMiniLink:'',
                    uploadShow:false,
                    chooseImgName:'',
                    form: {
                        open:0,
                        advert_type:0,
                        banner_one:{
                            img_url: ''
                        },
                        banner_two:{
                            img_url: ''
                        },
                        banner_three:{
                            img_url: ''
                        },

                    },
                    level:level,
                    is_integral:is_integral,
                    is_commission:is_commission,
                    commission_level:commission_level,
                    show: false,
                    chooseLink: '',
                    submit_url: '',
                    showVisible: false,
                    loading: false,
                    rules: {},
                }
            },
            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.index') !!}').then(function (response) {
                            if (response.data.result) {
                                this.form = response.data.data;
                                if (response.data.data.open == null) {
                                    this.form.banner_one = {};
                                    this.form.banner_two = {};
                                    this.form.banner_three = {};
                                }
                            } 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)
                    let json = this.form;
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            let loading = this.$loading({
                                target: document.querySelector(".content"),
                                background: 'rgba(0, 0, 0, 0)'
                            });
                            this.$http.post("{!! yzWebFullUrl('plugin.flyers-advertise.admin.setting.set') !!}", {'data':json}).then(response => {
                                if (response.data.result) {
                                    this.$message({type: 'success', message: '操作成功!'});
                                    window.location.reload();
                                } else {
                                    this.$message({message: response.data.msg, type: 'error'});
                                }
                                loading.close();
                            });
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                goBack() {
                    history.go(-1)
                },

                openUpload(str) {
                    this.chooseImgName = str;
                    this.uploadShow = true;
                },
                changeProp(val) {
                    if(val == true) {
                        this.uploadShow = false;
                    }
                    else {
                        this.uploadShow = true;
                    }
                },
                sureImg(name,image,image_url) {
                    let arr = []
                    if(name.indexOf(".") != -1) {
                        arr = name.split(".")
                        this.form[arr[0]] = {}
                        this.form[arr[0]][arr[1]] = image;
                        this.form[arr[0]][arr[1]+'_url'] = image_url;
                    }
                    else {
                        this.form[name] = image;
                        this.form[name+'_url'] = image_url;
                    }

                },
                clearImg(str,str2) {
                    if(str2) {
                        this.form[str][str2] = "";
                        this.form[str][str2+'_url'] = "";
                    }
                    else{
                        this.form[str] = "";
                        this.form[str+'_url'] = "";
                    }

                    this.$forceUpdate();
                },
                changeRewardData(value) {
                    console.log(value);
                    let levels = [];
                    if (this.form.reward_type == 1) {
                        levels = this.level;
                    } else {
                        levels = this.commission_level;
                    }
                    if (this.form.advert_type == 0) {
                        this.form.parent_level = [];
                        this.form.look_level   = [];
                        levels.forEach((list,index)=>{
                            let data = {
                                'level_id':list.id,
                                'level_name':list.level_name,
                                'level_rate': '',
                            };
                            this.form.parent_level.push(JSON.parse(JSON.stringify(data)));
                            this.form.look_level.push(JSON.parse(JSON.stringify(data)));
                        });
                    } else {
                        this.form.parent_level2 = [];
                        this.form.parent_level = [];
                        this.form.look_level   = [];
                        levels.forEach((list,index)=>{
                            let data = {
                                'level_id':list.id,
                                'level_name':list.level_name,
                                'point': '',
                                'capping_point': '',
                                'integral': '',
                                'capping_integral': '',
                            };
                            this.form.parent_level2.push(JSON.parse(JSON.stringify(data)));
                            this.form.parent_level.push(JSON.parse(JSON.stringify(data)));
                            this.form.look_level.push(JSON.parse(JSON.stringify(data)));
                        });
                    }
                },
            },
        })

    </script>
@endsection