@extends('layouts.base')
@section('title', "等级编辑")
@section('content')
    <style>
        .rightlist #app{margin-left:30px;}
        .el-form-item__label{padding-right:30px;}
        .el-button{margin-right:30px;}
        /* 滑块选择小白点 */
        .el-switch.is-checked .el-switch__core::after {left: 100%;margin-left: -17px;}
        .el-switch__core::after {content: "";position: absolute;top: 1px;left: 1px;border-radius: 100%;transition: all .3s;width: 16px;height: 16px;background-color: #fff;}
        .el-textarea__inner{height:400px; width:80%;}
        .tip{font-size:12px;color:#999;font-weight:500}
        .title{margin-top:20px;font-size:20px;border-bottom:1px solid #ccc;padding-bottom:10px;margin-bottom:10px}
        .el-input-group__append, .el-input-group__prepend {padding: 0 5px;}
    </style>
    <div class="rightlist">
        <div id="app"  v-loading="submit_loading">
            <div class="title">等级编辑(编辑状态下点击保存即重置当前等级所有会员直推进度！)</div>
            <template>
                <el-form ref="form" :model="form" :rules="rules" label-width="15%">
                    <el-form-item label="等级名称">
                            [[level_name]]
                    </el-form-item>
                    <el-form-item label="封顶金额" prop="total_amount">
                        <el-input v-model="form.total_amount" style="width:70%" ></el-input>
                    </el-form-item>
                    <el-form-item label="指定会员等级" prop="">
                        <el-select v-model="form.target_level" placeholder="请选择">
                            <el-option
                                    v-for="item in levels"
                                    :key="item.level_id"
                                    :label="item.name"
                                    :value="item.level_id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="直推获得份数">
                        <div style="margin-bottom:5px;" v-for="(item,index) in form.detail" :key="index">
                            <el-input v-model="item.amount" style="width:35%" onkeyup="value=value.replace(/[^\d]/g,'')">
                                <template slot="prepend">直推</template>
                                <template slot="append">人</template>
                            </el-input>
                            <el-input v-model="item.bonus" style="width:35%" onkeyup="value=value.replace(/[^\d]/g,'')">
                                <template slot="prepend">获得份数</template>

                            </el-input>
                            <el-button icon="el-icon-delete" @click="delPerson(index)"></el-button>
                        </div>
                        <div>
                            <el-button type="primary" @click="addPerson">新增阶梯</el-button>
                        </div>
                    </el-form-item>

                    <el-form-item>
                        <a href="#">
                            <el-button type="success" @click="submitForm('form')">
                                提交
                            </el-button>
                        </a>
                    </el-form-item>
                </el-form>
            </template>
        </div>
    </div>
    <script src="{{resource_get('static/yunshop/tinymce4.7.5/tinymce.min.js')}}"></script> 
    <script src="{{resource_get('static/yunshop/tinymceTemplate.js')}}"></script>
    <script>
        var vm = new Vue({
            el:"#app",
            delimiters: ['[[', ']]'],
            data() {
                let set = {!! Json.$set ? $set : '{}'  !!};
                let level_name = {!! $name  !!};
                let record_id = {!! $record_id  !!};
                let levels = {!! $levels  !!};
                return{
                    set:set,
                    level_name:level_name,
                    levels:levels,
                    form: {
                        id:record_id,
                        is_open:'0',
                        total_amount:'',
                        target_level:'',
                        detail:[
                            // {amount:'',bonus:''}
                        ],
                        ...set
                    },
                    loading: false,
                    submit_loading: false,

                    rules: {

                    },
                }
            },
            mounted() {
                
            },
            
            methods: {
                addPerson() {
                    this.form.detail.push({amount:'',bonus:''});
                },
                delPerson(index) {
                    this.form.detail.splice(index,1)
                },
                submitForm(formName){
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            this.submit_loading = true;
                            this.$http.post("{!! yzWebFullUrl('plugin.share-partner.admin.levels.edit') !!}",{'form_data':this.form}).then(response => {
                                if (response.data.result) {
                                this.$message({type: 'success',message: '操作成功!'});
                                this.submit_loading = false;
                                window.location.reload();
                            } else {
                                this.$message({message: response.data.msg,type: 'error'});
                                this.submit_loading = false;
                            }
                        },response => {
                                this.submit_loading = false;
                            });
                        }
                        else {
                            return false;
                        }
                    });
                },
                
            },
        });
    </script>
@endsection