@extends('layouts.base')
@section('title', '会员中心1模板设置')
@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')}}"/>
    <style>
        .el-checkbox-group {
            position: relative;
            z-index: 0;
        }

        .el-checkbox {
            margin-top: 10px !important;
        }
    </style>
    <div id='re_content'>

        <div class="con">
            <div class="setting">
                <el-form ref="form" label-width="15%">
                    <div class="block">
                        <div class="title"><span
                                    style="width: 4px;height: 18px;background-color: #29ba9c;margin-right:15px;display:inline-block;"></span><b>模板管理>会员中心模板1>设置</b>
                        </div>
                        <el-tabs v-model="activeName" style="margin-left: 20px">
                            <el-tab-pane label="应用显示" name="first">
                                <el-form-item label="模板设置">
                                    <el-switch v-model="form.open_state" :active-value="1"
                                               :inactive-value="0"></el-switch>
                                    <div class="tip">
                                        开启后按设置内容显示
                                    </div>
                                    <div class="tip">部分应用强制同时显示(隐藏)、排序,如拍卖与拍卖管理</div>
                                </el-form-item>

                                <template v-for="(v,k) in this.form.plugin_list">
                                    <el-form-item :label="v.name">
                                        <template v-for="(vv,kk) in v.plugin">
                                            <div style="float: left;margin-right: 20px;margin-bottom: 15px">
                                                <el-checkbox @change="pluginCheckChange(vv.name,vv.status)"
                                                             v-model="vv.status"
                                                             :true-label="1" :false-label="0"
                                                             :disabled="pluginIsDisabled(vv)"
                                                >
                                                    [[vv.title]]
                                                </el-checkbox>
                                                <el-input @change="sortChange(vv)" v-model="vv.sort"
                                                          style="width: 150px"
                                                          placeholder="排序"></el-input>
                                            </div>
                                        </template>
                                    </el-form-item>
                                </template>
                            </el-tab-pane>


                            <el-tab-pane label="tab列表显示" name="second">

                                <template v-for="(v,k) in this.form.nav_list">
                                    <div style="margin-right: 20px;margin-bottom: 15px">
                                        <el-checkbox v-model="v.status" :true-label="1" :false-label="0">
                                            [[v.name]]
                                        </el-checkbox>
                                        <el-input v-model="v.title" style="width: 150px"
                                                  placeholder="名称"></el-input>
                                        <el-input v-model="v.sort" style="width: 150px"
                                                  placeholder="排序"></el-input>
                                    </div>
                                    <br>
                                </template>
                            </el-tab-pane>

                            </el-tab-pane>
                        </el-tabs>


                    </div>

                </el-form>
            </div>
            <div class="confirm-btn" style="z-index:999;">
                <el-button :loading="submit_loading" type="primary" @click="submit">提交</el-button>
            </div>


        </div>
    </div>
    <script>

        var app = new Vue({
            el: "#re_content",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                return {
                    form: {
                        status: 0,
                        plugin_list: [],
                        nav_list: [],
                    },
                    is_max: false,
                    activeName: 'first',
                    submit_loading: false,
                }
            },
            created() {
                // this.getMemberData();
                this.getData();
            },
            mounted() {
            },
            methods: {
                pluginIsDisabled(data) {
                    if (this.is_max == 0) {
                        return false;
                    }
                    if (data.status == 1) {
                        return false;
                    }
                    return true;
                },
                sortChange(data) {
                    this.form.plugin_list.forEach(function (v) {
                        v.plugin.forEach(function (vv) {
                            if (vv.name == data.name) {
                                vv.sort = data.sort;
                            }
                            // if (vv.status == 1) {
                            //     count = count + 1;
                            // }
                            // if (name != '' && status != -1 && vv.name == name) {
                            //     if(vv.status == 0 && status == 1){
                            //         vv.status = 1;
                            //         count = count + 1;
                            //     }else if(vv.status == 1 && status == 0){
                            //         vv.status = 0;
                            //         count = count - 1;
                            //     }
                            // }
                        })
                    })
                },
                pluginCheckChange(name, status) {
                    console.log(name);
                    var count = 0;
                    this.form.plugin_list.forEach(function (v) {
                        v.plugin.forEach(function (vv) {
                            if (vv.status == 1) {
                                count = count + 1;
                            }
                            if (name != '' && status != -1 && vv.name == name) {
                                if (vv.status == 0 && status == 1) {
                                    vv.status = 1;
                                    count = count + 1;
                                } else if (vv.status == 1 && status == 0) {
                                    vv.status = 0;
                                    count = count - 1;
                                }
                            }
                        })
                    })
                    if (count == 19) {
                        this.is_max = true;
                    } else if (count > 19) {
                        var lex = 19 - (count - 19);
                        if (name != '') {
                            this.$message({message: '存在关联应用,需要已勾选应用少于'+lex+'个才可勾选', type: 'error'});
                            this.form.plugin_list.forEach(function (v) {
                                v.plugin.forEach(function (vv) {
                                    if (vv.name == name) {
                                        vv.status = 0;
                                    }
                                })
                            })
                            this.pluginCheckChange('', -1);
                        } else {
                            this.is_max = true;
                        }
                    } else {
                        this.is_max = false;
                    }
                    console.log(count);
                },
                getData() {
                    this.$http.post('{!! yzWebFullUrl('plugin.decorate.admin.decorate-default-template.index') !!}', {
                        'id': this.form.id,
                        'is_json': 1
                    }).then(response => {
                        if (response.data.result) {
                            this.form = response.data.data;
                            this.pluginCheckChange('', -1);
                        } else {
                            this.$message({message: response.data.msg, type: 'error'});
                        }
                    }, response => {
                        this.$message({message: response.data.msg, type: 'error'});
                    })
                },
                submit() {
                    let that = this;
                    this.submit_loading = true;
                    this.$http.post('{!! yzWebFullUrl('plugin.decorate.admin.decorate-default-template.edit') !!}', this.form).then(response => {
                        if (response.data.result) {
                            console.log(response.data.data);
                            // this.form.id = response.data.data;
                            this.$message({message: response.data.msg, type: 'success'});
                            this.submit_loading = false;
                            this.getData();
                        } else {
                            this.$message({message: response.data.msg, type: 'error'});
                            this.submit_loading = false;
                        }
                    }, response => {
                        this.$message({message: response.data.msg, type: 'error'});
                        this.submit_loading = false;
                    })
                }
            },
        })

    </script>
@endsection