@extends('layouts.app')
@section('title')编辑-用户@endsection

@section('content')
    <div id="nav2">
        @component('maintenance.menu')
        @endcomponent
        @component('maintenance.user.menu')
                <li class="nav-item">
                    <a class="nav-link" href="{{URL::current()}}" :class="{active:isActive('edit',4)}">修改</a>
                </li>
        @endcomponent
    </div>
    <div class="container-fluid" id="editPanel">
        <div class="card">
            <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/user/{$user->id}")}}'>
                    @csrf
                    @method('PUT')
                    <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="@if(old('name')){{old('name')}}@else{{$user->name}}@endif" required>
                            @error('name')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="email" class="col-2 col-form-label text-right">邮箱</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('email') is-invalid @enderror"
                                   name="email" autocomplete="off" value="@if(old('email')){{old('email')}}@else{{$user->email}}@endif" required>
                            @error('email')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="email" class="col-2 col-form-label text-right">手机号</label>
                        <div class="col-8">
                            <input type="text" class="form-control @error('phone') is-invalid @enderror"
                                   name="phone" autocomplete="off" value="@if(old('phone')){{old('phone')}}@else{{$user->userDetail ? $user->userDetail->mobile_phone : ''}}@endif">
                            @error('phone')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="userWorkgroup" class="col-2 col-form-label text-right">工作组</label>
                        <div class="col-8">
                            <select class="form-control" name="userWorkgroupID" id="userWorkgroupID" v-model="userWorkgroupID">
                                <option v-for="userWorkgroup in userWorkgroups" :value="userWorkgroup.id">@{{ userWorkgroup.name }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="role" class="col-md-3 col-form-label text-md-right">角色</label>
                        <div class="col-md-7">
                            <input type="text"  class="form-control tooltipTarget" placeholder="定位角色"
                                   @input="seekRole($event)" title="输入关键词快速定位"></div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3"></label>
                        <div class="col-md-4">
                            <input name="role" hidden    v-model="roles" >
                            <div class="input-group" style="max-height: 190px; 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="role.style ? '双击删除角色' :'双击添加角色'"    v-for="role in rolesFilter" :id="role.name" class="list-group-item list-group-item-action pt-0 pb-0"
                                         @dblclick="selectedRole(role)" :class="role.style ? 'active' :''"><span style="cursor: default;" :id="role.name"> @{{ role.name }}  </span></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="input-group" style="max-height: 190px; overflow-y: scroll;border-radius:5px;text-align: center;">
                                <ul class="list-group" style="width: 100%" onselectstart="return false;">
                                    <li  title="双击删除角色"    v-for="role in rolesList" :id="role.name" class="list-group-item list-group-item-action pt-0 pb-0"
                                         @dblclick="selectedRole(role)" ><span style="cursor: default;" > @{{ role.name }}  </span></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <hr class="col-8 offset-2 border-info">
                    {{--承运商--}}
                    <div class="form-group row">
                        <label for="logistic" class="col-md-3 col-form-label text-md-right">可见承运商</label>
                        <div class="col-md-7">
                            <input type="text"  class="form-control tooltipTarget" placeholder="定位承运商"
                                   @input="seekLogistic($event)" title="输入关键词快速定位"></div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3"></label>
                        <div class="col-md-4">
                            <input name="logistic" hidden   v-model="logistics" >
                            <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%" onselectstart="return false;">
                                    <li  :data-original-title="logistic.style ? '双击删除承运商' :'双击添加承运商'"    v-for="logistic in logisticsFilter" :id="logistic.name" class="list-group-item list-group-item-action pt-0 pb-0"
                                         @dblclick="selectedLogistic(logistic)" :class="logistic.style ? 'active' :''"><span style="cursor: default;" > @{{ logistic.name }}  </span></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <input name="logistic" hidden   v-model="logistics" >
                            <div class="input-group" style="max-height: 150px; overflow-y: scroll;border-radius:5px;text-align: center;">
                                <ul class="list-group" style="width: 100%" onselectstart="return false;">
                                    <li  title="双击删除承运商"    v-for="logistic in logisticsList"  class="list-group-item list-group-item-action pt-0 pb-0"
                                         @dblclick="selectedLogistic(logistic)" ><span style="cursor: default;" > @{{ logistic.name }}  </span></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <hr class="col-8 offset-2 border-info">
                    <div class="form-group row">
                        <label for="supplier" class="col-md-3 col-form-label text-md-right">供应商</label>
                        <div class="col-md-7">
                            <input type="text"  class="form-control tooltipTarget" placeholder="定位供应商"
                                   @input="seekSupplier($event)" title="输入关键词快速定位"></div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3"></label>
                        <div class="col-md-4">
                            <input name="supplier" hidden    v-model="suppliers" >
                            <div class="input-group" style="max-height: 190px; 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="supplier.style ? '双击删除供应商' :'双击添加供应商'"    v-for="supplier in suppliersFilter" :id="supplier.name" class="list-group-item list-group-item-action pt-0 pb-0"
                                         @dblclick="selectedSupplier(supplier)" :class="supplier.style ? 'active' :''"><span style="cursor: default;" :id="supplier.name"> @{{ supplier.name }}  </span></li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="input-group" style="max-height: 190px; overflow-y: scroll;border-radius:5px;text-align: center;">
                                <ul class="list-group" style="width: 100%" onselectstart="return false;">
                                    <li  title="双击删除供应商"    v-for="supplier in suppliersList" :id="supplier.name" class="list-group-item list-group-item-action pt-0 pb-0"
                                         @dblclick="selectedSupplier(supplier)" ><span style="cursor: default;" > @{{ supplier.name }}  </span></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <hr class="col-8 offset-2 border-info">
                    <div class="form-group row">
                        <div class="col-8 offset-2">
                            <input type="submit" class="btn btn-outline-dark form-control">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection


@section('lastScript')
    <script>
        let vueList=new Vue({
            el:"#editPanel",
            data:{
                userWorkgroupID:'{{old('userWorkgroupID')??($userWorkgroup?$userWorkgroup->id:'')}}',
                userWorkgroups:[
                    @foreach($userWorkgroups as $userWorkgroup)
                    {!! $userWorkgroup !!},
                    @endforeach
                ],
                rolesAll:[
                        @foreach( $rolesAll as $role )
                    {id:'{{$role->id}}',name:'{{$role->name}}',style:false},
                    @endforeach
                ],
                rolesFilter:[
                        @foreach( $rolesAll as $role )
                    {id:'{{$role->id}}',name:'{{$role->name}}',style:false},
                    @endforeach
                ],
                roles:[
                    @if(old('role'))
                        {{ old('role') }}
                    @else
                        @foreach( $roles as $role )
                        {{$role->id}},
                        @endforeach
                    @endif
                ],
                rolesList:[],

                logisticsAll:[
                    @foreach($logistics as $logistic)
                    {id:'{{$logistic->id}}',name:'{{$logistic->name}}',style:false},
                    @endforeach
                ],
                logistics:[
                    @if(old('logistic'))
                        {{ old('logistic') }}
                    @else
                        @foreach( $logisticUser as $logistic )
                        {{$logistic->id}},
                        @endforeach
                    @endif
                ],
                logisticsFilter:[
                    @foreach($logistics as $logistic)
                    {id:'{{$logistic->id}}',name:'{{$logistic->name}}',style:false},
                    @endforeach
                ],
                logisticsList:[],

                suppliersAll: [
                        @foreach($suppliers as $supplier)
                    {id: '{{$supplier->id}}', name: '{{$supplier->name}}', style: false},
                    @endforeach
                ],
                suppliersFilter: [
                        @foreach($suppliers as $supplier)
                    {id: '{{$supplier->id}}', name: '{{$supplier->name}}', style: false},
                    @endforeach
                ],
                suppliers: [
                    @if(old('supplier'))
                    {{ old('supplier') }}
                    @else
                    @foreach( $supplierUser as $supplier )
                    {{$supplier->id}},
                    @endforeach
                    @endif
                ],
                suppliersList: [],
            },
            mounted:function(){
                $(".tooltipTarget").tooltip({'trigger':'hover'});
                if (this.roles.length>0){
                    let rolesAll=this.rolesAll;
                    let roles=this.roles;
                    let rolesList=this.rolesList;
                    for (let i = 0; i < roles.length; i++) {
                        rolesAll.every(function (roleAll) {
                            if (roleAll.id == roles[i]) {
                                roleAll.style = true;
                                rolesList.push({'id':roleAll.id,'name':roleAll.name});
                                return false;
                            }
                            return true;
                        });
                    }
                }
                if (this.logistics.length>0){
                    let logisticsAll=this.logisticsAll;
                    let logistics=this.logistics;
                    let logisticsList=this.logisticsList;
                    for (let i = 0; i < logistics.length; i++) {
                        logisticsAll.every(function (logisticAll) {
                            if (logisticAll.id == logistics[i]) {
                                logisticAll.style = true;
                                logisticsList.push({'id':logisticAll.id,'name':logisticAll.name});
                                return false;
                            }
                            return true;
                        });
                    }
                }
                if (this.suppliers.length>0){
                    let suppliersAll=this.suppliersAll;
                    let suppliers=this.suppliers;
                    let suppliersList=this.suppliersList;
                    for (let i = 0; i < suppliers.length; i++) {
                        suppliersAll.every(function (supplierAll) {
                            if (supplierAll.id == suppliers[i]) {
                                supplierAll.style = true;
                                suppliersList.push({'id':supplierAll.id,'name':supplierAll.name});
                                return false;
                            }
                            return true;
                        });
                    }
                }
            },
            methods:{
                selectedLogistic:function (e) {
                    let logistics=this.logistics;
                    let logisticsAll=this.logisticsAll;
                    let logisticsList=this.logisticsList;
                    let isLogistic=true;
                    if (logistics&&logisticsAll) {
                        for (let i = 0; i < logistics.length; i++) {
                            if (logistics[i] == e.id) {
                                logistics.splice(i,1);
                                logisticsAll.every(function (logisticAll) {
                                    if (logisticAll.id == e.id) {
                                        logisticAll.style = false;
                                        return false;
                                    }
                                    return true;
                                });
                                logisticsList.every(function (logistic,i) {
                                    if (logistic.id==e.id){
                                        logisticsList.splice(i,1);
                                        return false;
                                    }
                                    return true;
                                });
                                isLogistic= false;
                                break;
                            }
                            isLogistic= true;
                        }
                    }
                    if (isLogistic || !logistics){
                        logistics.push(e.id);
                        logisticsAll.every(function (logisticAll) {
                            if (logisticAll.id==e.id){
                                logisticAll.style=true;
                                logisticsList.push({'id':logisticAll.id,'name':logisticAll.name});
                                return false;
                            }
                            return  true;
                        });
                    }
                    setTimeout(function(){
                        $(".tooltipTarget").tooltip({'trigger':'hover'});
                    },10)
                },
                selectedSupplier:function (e) {
                    let suppliers=this.suppliers;
                    let suppliersAll=this.suppliersAll;
                    let suppliersList=this.suppliersList;
                    let isSupplier=true;
                    if (suppliers&&suppliersAll) {
                        for (let i = 0; i < suppliers.length; i++) {
                            if (suppliers[i] == e.id) {
                                suppliers.splice(i,1);
                                suppliersAll.every(function (supplierAll) {
                                    if (supplierAll.id == e.id) {
                                        supplierAll.style = false;
                                        return false;
                                    }
                                    return true;
                                });
                                suppliersList.every(function (supplier,i) {
                                    if (supplier.id==e.id){
                                        suppliersList.splice(i,1);
                                        return false;
                                    }
                                    return true;
                                });
                                isSupplier= false;
                                break;
                            }
                            isSupplier= true;
                        }
                    }
                    if (isSupplier || !suppliers){
                        suppliers.push(e.id);
                        suppliersAll.every(function (supplierAll) {
                            if (supplierAll.id==e.id){
                                supplierAll.style=true;
                                suppliersList.push({'id':supplierAll.id,'name':supplierAll.name});
                                return false;
                            }
                            return  true;
                        });
                    }
                    setTimeout(function(){
                        $(".tooltipTarget").tooltip({'trigger':'hover'});
                    },10)
                },
                seekLogistic:function (e) {
                    let $val=e.target.value;
                    let logisticsAll=this.logisticsAll;
                    let bool = false;
                    logisticsAll.every(function (logisticsAll) {
                        let name=logisticsAll.name;
                        if (name.includes($val)){
                            bool = true;
                            return false;
                        }
                        return  true;
                    });
                    if($val === '' ){
                        this.rolesFilter = this.rolesAll;
                    }else if(bool){
                        this.logisticsFilter = [];
                        for (let i = 0; i <logisticsAll.length ; i++) {
                            let logistic = logisticsAll[i];
                            if(logistic.name.includes($val)){
                                this.logisticsFilter.push(logistic);
                            }
                        }
                    }
                },
                selectedRole:function (e) {
                    let roles=this.roles;
                    let rolesAll=this.rolesAll;
                    let rolesList=this.rolesList;
                    let isRole=true;
                    if (roles && rolesAll) {
                        for (let i = 0; i < roles.length; i++) {
                            if (roles[i] == e.id) {
                                roles.splice(i,1);
                                rolesAll.every(function (roleAll) {
                                    if (roleAll.id == e.id) {
                                        roleAll.style = false;
                                        return false;
                                    }
                                    return true;
                                });
                                rolesList.every(function (role,i) {
                                    if (role.id==e.id){
                                        rolesList.splice(i,1);
                                        return false;
                                    }
                                    return true;
                                });
                                isRole= false;
                                break;
                            }
                            isRole= true;
                        }
                    }
                    if (isRole || !roles){
                        roles.push(Number(e.id));
                        rolesAll.every(function (roleAll) {
                            if (roleAll.id==e.id){
                                roleAll.style=true;
                                rolesList.push({'id':roleAll.id,'name':roleAll.name});
                                return false;
                            }
                            return  true;
                        });

                    }
                    setTimeout(function(){
                        $(".tooltipTarget").tooltip({'trigger':'hover'});
                    },10)
                },
                seekRole:function (e) {
                    let $val=e.target.value;
                    let rolesAll=this.rolesAll;
                    let bool = false;
                    rolesAll.every(function (roleAll) {
                        let name=roleAll.name;
                        if (name.includes($val)){
                            bool = true;
                            return false;
                        }
                        return  true;
                    });
                    if($val === '' ){
                        this.rolesFilter = this.rolesAll;
                    }else if(bool){
                        this.rolesFilter = [];
                        for (let i = 0; i <rolesAll.length ; i++) {
                            let role = rolesAll[i];
                            if(role.name.includes($val)){
                                this.rolesFilter.push(role);
                            }
                        }
                    }
                },
                seekSupplier:function (e) {
                    let $val=e.target.value;
                    let suppliersAll=this.suppliersAll;
                    let bool = false;
                    suppliersAll.every(function (supplierAll) {
                        let name=supplierAll.name;
                        if (name.includes($val)){
                            bool = true;
                            return false;
                        }
                        return  true;
                    });
                    if($val === '' ){
                        this.suppliersFilter = this.suppliersAll;
                    }else if(bool){
                        this.suppliersFilter = [];
                        for (let i = 0; i <suppliersAll.length ; i++) {
                            let supplier = suppliersAll[i];
                            if(supplier.name.includes($val)){
                                this.suppliersFilter.push(supplier);
                            }
                        }
                    }
                },
            },
        });

    </script>
@endsection