@extends('layouts.app')
@section('title')录入-角色@endsection

@section('content')
    <div id="nav2">
        @component('maintenance.menu')@endcomponent
        @component('maintenance.role.menu')@endcomponent
    </div>
    <div class="container-fluid" id="editPanel">
        <div class="card col-md-8 offset-md-2">
            <div class="card-body">
                @if(Session::has('successTip'))
                    <div class="alert alert-success h1">{{Session::get('successTip')}}</div>
                @endif
                <form method="POST" action="{{ url('maintenance/role') }}">
                    @csrf
                    <div class="form-group row">
                        <label for="name" class="col-2 col-form-label text-right">角色名称</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('name') is-invalid @enderror"
                                   name="name" autocomplete="off" value="{{ old('name') }}" required>
                            @error('name')
                            <span class="invalid-feedback">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="authority" class="col-2 col-form-label text-md-right">允许权限</label>
                        <div class="col-8">
                        <input type="text"  class="form-control tooltipTarget" placeholder="定位权限" @input="filterAuthority($event)" title="输入关键词快速定位下拉列表" ></div>
                    </div>
                    <div class="form-group row">
                        <label class="col-2"></label>
                        <div class="col-5">
                            <input name="authority" hidden   v-model="authorities" >
                            <div class="input-group" style="max-height: 245px; overflow-y: scroll;border-radius:5px;opacity:0.5;text-align: center;">
                                <ul class="list-group tooltipTarget" style="width: 100%"  onselectstart="return false;">
                                    <li  :data-original-title="authority.style ? '双击删除权限' :'双击添加权限'"    v-for="authority in authoritiesAllFilter" v-if="authority.permission=='允许'" :id="authority.name" class="tooltipTarget list-group-item list-group-item-action pt-0 pb-0"
                                         @dblclick="selectedAuthority(authority)" :class="authority.style ? 'active' :''"><span style="cursor: default;" > @{{ authority.name }}  </span></li>
                                </ul>
                            </div>
                            @error('authority')
                            <span class="invalid-feedback">
                                        <strong>{{ $message }}</strong>
                                    </span>
                            @enderror
                        </div>
                        <div class="col-3" v-if="authoritiesList.length>0">
                            <div class="input-group" style="max-height: 245px; overflow-y: scroll;border-radius:5px;text-align: center;">
                                <ul class="list-group tooltipTarget" style="width: 100%"  onselectstart="return false;">
                                    <li  title="双击删除权限"    v-for="authority in authoritiesList"  v-if="authority.permission=='允许'" class=" list-group-item list-group-item-action pt-0 pb-0"
                                         @dblclick="selectedAuthority(authority)"><span style="cursor: default;"> @{{ authority.name }}  </span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="authority" class="col-2 col-form-label text-md-right">禁止权限</label>
                        <div class="col-8">
                            <input type="text"  class="form-control tooltipTarget" placeholder="定位权限"
                                   @input="filterForbiddenPermissions($event)" title="输入关键词快速定位下拉列表"></div>
                    </div>
                    <div class="form-group row">
                        <label class="col-2"></label>
                        <div class="col-5">
                            <div class="input-group" style="max-height: 150px; overflow-y: scroll;border-radius:5px;opacity:0.5;text-align: center;">
                                <ul class="list-group tooltipTarget" style="width: 100%"  >
                                    <li  :data-original-title="authority.style ? '双击删除权限' :'双击添加权限'"    v-for="authority in authoritiesFilter" v-if="authority.permission=='禁止'" :id="authority.name" class="tooltipTarget list-group-item list-group-item-action pt-0 pb-0"
                                         @dblclick="selectedAuthority(authority)" :class="authority.style ? 'active' :''"><span style="cursor: default;" > @{{ authority.name }}  </span></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-3" v-if="authoritiesList.length>0">
                            <div class="input-group" style="max-height: 150px; overflow-y: scroll;border-radius:5px;text-align: center;">
                                <ul class="list-group tooltipTarget" style="width: 100%"  >
                                    <li  title="双击删除权限"    v-for="authority in authoritiesList" v-if="authority.permission=='禁止'"  class=" list-group-item list-group-item-action pt-0 pb-0"
                                         @dblclick="selectedAuthority(authority)"><span style="cursor: default;"> @{{ authority.name }}  </span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-8 offset-2">
                            <input type="submit" class="btn btn-success form-control">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        let vueList=new Vue({
            el:"#editPanel",
            data:{
                authoritiesAll:[
                        @foreach( $authoritiesAll as $authority )
                    {id:'{{$authority->id}}',name:'{{$authority->alias_name}}',style:false,permission:'{{$authority->permission}}'},
                    @endforeach
                ],
                authoritiesAllFilter:[],
                authoritiesFilter:[],
                authorities:[{{old('authority')}}],
                authoritiesList:[],
            },
            mounted:function(){
                $(".tooltipTarget").tooltip({'trigger':'hover'});
                if (this.authorities.length>0){
                    let authoritiesList=this.authoritiesList;
                    let authoritiesAll=this.authoritiesAll;
                    let authorities=this.authorities;
                    for (let i = 0; i < authorities.length; i++) {
                        authoritiesAll.every(function (authorityAll) {
                            if (authorityAll.id == authorities[i]) {
                                authorityAll.style = true;
                                authoritiesList.push({'id':authorityAll.id,'name':authorityAll.name,'permission':authorityAll.permission});
                                return false;
                            }
                            return true;
                        });
                    }
                }
                this.authoritiesAllFilter=this.authoritiesAll
                this.authoritiesFilter=this.authoritiesAll
            },
            methods:{
                selectedAuthority:function (e) {
                    let authorities=this.authorities;
                    let authoritiesAll=this.authoritiesAll;
                    let authoritiesList=this.authoritiesList;
                    let isAuthorty=true;
                    if (authorities) {
                        for (let i = 0; i < authorities.length; i++) {
                            if (authorities[i] == e.id) {
                                authorities.splice(i,1);
                                authoritiesAll.every(function (authorityAll) {
                                    if (authorityAll.id == e.id) {
                                        authorityAll.style = false;
                                        return false;
                                    }
                                    return true;
                                });
                                authoritiesList.every(function (authority,i) {
                                    if (authority.id==e.id){
                                        authoritiesList.splice(i,1);
                                        return false;
                                    }
                                    return  true;
                                });
                                isAuthorty= false;
                                break;
                            }
                            isAuthorty= true;
                        }
                    }
                    if (isAuthorty || !authorities){
                        authorities.push(e.id);
                        authoritiesAll.every(function (authorityAll) {
                            if (authorityAll.id==e.id){
                                authorityAll.style=true;
                                authoritiesList.push({'id':authorityAll.id,'name':authorityAll.name,'permission':authorityAll.permission});
                                return false;
                            }
                            return  true;
                        });
                    }
                    setTimeout(function(){
                        $(".tooltipTarget").tooltip({'trigger':'hover'});
                    },10)
                },
                seekAuthority:function (e) {
                    let $val=e.target.value;
                    let authoritiesAll=this.authoritiesAll;
                    let bool = false;
                    authoritiesAll.every(function (authorityAll) {
                        let name=authorityAll.name;
                        if (name.includes($val)){
                            location.href="#"+authorityAll.name;
                            bool = true;
                            return false;
                        }
                        return  true;
                    });
                    setTimeout(function () {
                        if(bool){ $(e.target).focus();}
                    },10)
                },
                filterAuthority(e){
                    let _arr = [];
                    let value = $(e.target).val();
                    this.authoritiesAll.forEach(item=>{
                        if(item.name.includes(value)){
                            _arr.push(item)
                        }
                    })
                    this.authoritiesAllFilter = _arr
                },
                filterForbiddenPermissions(e){
                    let _arr = [];
                    let value = $(e.target).val();
                    this.authoritiesAll.forEach(item=>{
                        if(item.name.includes(value)){
                            _arr.push(item)
                        }
                    })
                    this.authoritiesFilter = _arr
                }
            },
        });

    </script>
@endsection