@extends('layouts.app')
@section('title')录入-用户@endsection

@section('content')
    <div id="nav2">
        @component('maintenance.menu')@endcomponent
        @component('maintenance.user.menu')@endcomponent
    </div>
    <div class="container" id="editPanel">
        <div class="row justify-content-center">
            @if(Session::has('successTip'))
                <div class="alert alert-success h1">{{Session::get('successTip')}}</div>
            @endif
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">录入用户</div>

                    <div class="card-body">
                        <form method="POST" action="{{ route('register') }}">
                            @csrf

                            <div class="form-group row">
                                <label for="name" class="col-md-3 col-form-label text-md-right">姓名</label>

                                <div class="col-md-7">
                                    <input id="name" type="text"
                                           class="form-control @error('name') is-invalid @enderror" name="name"
                                           value="{{ old('name') }}" required autocomplete="name" autofocus>

                                    @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-md-3 col-form-label text-md-right">Email地址</label>

                                <div class="col-md-7">
                                    <input id="email" type="email"
                                           class="form-control @error('email') is-invalid @enderror" name="email"
                                           value="{{ old('email') }}" required autocomplete="email">

                                    @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="phone" class="col-md-3 col-form-label text-md-right">手机号码</label>

                                <div class="col-md-7">
                                    <input id="phone" type="phone"
                                           class="form-control @error('phone') is-invalid @enderror" name="phone"
                                           value="{{ old('phone') }}"  autocomplete="phone">

                                    @error('phone')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="password" class="col-md-3 col-form-label text-md-right">密码</label>

                                <div class="col-md-7">
                                    <input id="password" type="password"
                                           class="form-control @error('password') is-invalid @enderror" name="password"
                                           required autocomplete="new-password">

                                    @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="password-confirm" class="col-md-3 col-form-label text-md-right">重输密码</label>

                                <div class="col-md-7">
                                    <input id="password-confirm" type="password" class="form-control"
                                           name="password_confirmation" required autocomplete="new-password">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="userWorkgroupID" class="col-md-3 col-form-label text-md-right">工作组</label>

                                <div class="col-md-7">
                                    <select class="form-control" name="userWorkgroupID" id="userWorkgroupID">
                                        <option></option>
                                        <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" style="width: 100%" onselectstart="return false;">
                                                <li :data-original-title="role.style ? '双击删除角色' : '双击添加角色'"
                                                v-for="role in rolesFilter" :id="role.name"
                                                class="tooltipTarget list-group-item list-group-item-action pt-0 pb-0 "
                                                @dblclick="selectedRole(role)" :class="role.style ? 'active' :''">
                                                    <span style="cursor: default;" class=""> @{{ 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="tooltipTarget 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>

                            <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">
                                    <div class="input-group"
                                         style="max-height: 150px; overflow-y: scroll;border-radius:5px;opacity:0.5;text-align: center;">
                                        <ul class="list-group" style="width: 100%"
                                            onselectstart="return false;">
                                            <li :data-original-title="logistic.style ? '双击删除承运商' : '双击添加承运商'"
                                                v-for="logistic in logisticsFilter" :id="logistic.name"
                                                class="tooltipTarget 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="tooltipTarget 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>

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

                            <input type="hidden" value="{{url('maintenance/user/create')}}">
                            <div class="form-group row mb-0">
                                <div class="col-md-7 offset-md-4">
                                    <button type="submit" class="btn btn-primary">
                                        录入
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        let vueList = new Vue({
            el: "#editPanel",
            data: {
                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: [{{old('role')}}],
                rolesList: [],

                logisticsAll: [
                        @foreach($logistics as $logistic)
                    {
                        id: '{{$logistic->id}}', name: '{{$logistic->name}}', style: false
                    },
                    @endforeach
                ],
                logisticsFilter: [
                        @foreach($logistics as $logistic)
                    {
                        id: '{{$logistic->id}}', name: '{{$logistic->name}}', style: false
                    },
                    @endforeach
                ],
                logistics: [{{old('logistic')}}],
                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
                ],
                supplier: [{{old('supplier')}}],
                suppliersList: [],
            },
            mounted: function () {
                $(".tooltipTarget").tooltip({ boundary: 'window' });
                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;
                        });
                    }
                }
            },
            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);
                                        $(".tooltipTarget").tooltip('hide');
                                        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;
                        });
                    }
                    this.resetTooltip();
                },
                selectedSupplier: function (e) {
                    let supplier = this.supplier;
                    let suppliersAll = this.suppliersAll;
                    let suppliersList = this.suppliersList;
                    let isSupplier = true;
                    if (supplier && suppliersAll) {
                        for (let i = 0; i < supplier.length; i++) {
                            if (supplier[i] == e.id) {
                                supplier.splice(i, 1);
                                suppliersAll.every(function (suppliersAll) {
                                    if (suppliersAll.id == e.id) {
                                        suppliersAll.style = false;
                                        return false;
                                    }
                                    return true;
                                });
                                suppliersList.every(function (supplier, i) {
                                    if (supplier.id == e.id) {
                                        suppliersList.splice(i, 1);
                                        $(".tooltipTarget").tooltip('hide');
                                        return false;
                                    }
                                    return true;
                                });
                                isSupplier = false;
                                break;
                            }
                            isSupplier = true;
                        }
                    }
                    if (isSupplier || !supplier) {
                        supplier.push(e.id);
                        suppliersAll.every(function (suppliersAll) {
                            if (suppliersAll.id == e.id) {
                                suppliersAll.style = true;
                                suppliersList.push({'id': suppliersAll.id, 'name': suppliersAll.name});
                                return false;
                            }
                            return true;
                        });
                    }
                    this.resetTooltip();
                },
                seekLogistic: function (e) {
                    let $val = e.target.value;
                    let logisticsAll = this.logisticsAll;
                    let bool = false;
                    logisticsAll.every(function (logisticAll) {
                        let name = logisticAll.name;
                        if (name.includes($val)) {
                            bool = true;
                            return false;
                        }
                        return true;
                    });
                    if($val==='' && !bool){
                        this.logisticsFilter = this.logisticsAll;
                    }else if(bool){
                        this.logisticsFilter= [];
                        for (let i = 0; i < logisticsAll.length; i++) {
                            let carries = logisticsAll[i];
                            let name = carries.name;
                            if(name.includes($val)){
                                this.logisticsFilter.push(carries);
                            }
                        }
                    }
                    this.resetTooltip();
                },
                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==='' && !bool){
                        this.suppliersFilter = this.suppliersAll;
                    }else if(bool){
                        this.suppliersFilter= [];
                        for (let i = 0; i < suppliersAll.length; i++) {
                            let supplier = suppliersAll[i];
                            let name = supplier.name;
                            if(name.includes($val)){
                                this.suppliersFilter.push(supplier);
                            }
                        }
                    }
                    this.resetTooltip();
                },
                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);
                                        $(".tooltipTarget").tooltip('hide');
                                        return false;
                                    }
                                    return true;
                                });
                                isRole = false;
                                break;
                            }
                            isRole = true;
                        }
                    }
                    if (isRole || !roles) {
                        roles.push(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;
                        });
                    }
                    this.resetTooltip();
                },
                seekRole: function (e) {
                    let $val = e.target.value;
                    let rolesAll = this.rolesAll;
                    let rolesFilter = this.rolesFilter;
                    let bool = false;
                    rolesAll.every(function (roleAll) {
                        let name = roleAll.name;
                        if (name.includes($val)) {
                            bool = true;
                            return false;
                        }
                        return true;
                    });
                    if ($val === '' && bool) {
                        this.rolesFilter = this.rolesAll;
                    } else if (bool) {
                        this.rolesFilter = [];
                        for (let i = 0; i < rolesAll.length; i++) {
                            let role = rolesAll[i];
                            let name = role.name;
                            if (name.includes($val)) {
                                this.rolesFilter.push(role);
                            }
                        }
                    }
                    this.resetTooltip();
                },
                resetTooltip(){
                    setTimeout(function () {
                        $(".tooltipTarget").tooltip({ boundary: 'window' });
                    }, 10 )
                },
            },
        });

    </script>
@endsection