@php
    $version = config('app.version');
@endphp
<div class="panel-body newTableBody" id="newTableBody">
    <div class="form-item searchAll">
        <span class="radiu"></span>
        <input type="text" placeholder="搜索客户及其他"  autocomplete="off" class="form-control" id="searchAll">
    </div>
    <div class="recordList-buttons">
        @if($isSuperUser)
            <div class="right-partner">
                <div class="partner">
                    <div class="partner-title">审批人</div>
                    <div class="partner-list"></div>

                    <div class="partner-button partner-more" onclick="showMore(event,$('.more-content'),this)">
                        <div class="more-image"></div>
                        <div class="more-content">
                            <div class="more-list">

                            </div>
                            <sub></sub>
                        </div>
                    </div>
                    <div class="partner-add addApproverButton">
                        <div class="add-image"></div>
                    </div>
                </div>
            </div>
        @endif

        <button class="btn btn-primary newCollectionRecord" onclick="lay_show('新增收款记录','{{route('collectionRecord')}}?reloadType=statistical')"><span></span>新建记录</button>
        <button class="btn btn-primary exportExcel" onclick="exportExcel()"><span></span>数据导出</button>
    </div>

    <div class="form-group filter approve-group">
        <div class="form-item inputTime">
            <div class="app-title">付款/退款申请时间</div>
            <input
                type="text"
                id="orderTimeStart"
                name="orderTimeStart"
                class="form-control dynamic-validation"
                placeholder='开始日期'
                autocomplete="off"
                readonly
            >
            <div class="appTo">～</div>
            <input
                type="text"
                id="orderTimeEnd"
                name="orderTimeEnd"
                class="form-control dynamic-validation"
                placeholder='结束日期'
                autocomplete="off"
                readonly
            >
        </div>

        <div class="form-item inputTime">
            <div class="app-title">录入时间</div>
            <input
                type="text"
                id="orderCraeteStart"
                name="orderCraeteStart"
                class="form-control dynamic-validation"
                placeholder='开始日期'
                autocomplete="off"
                readonly
            >
            <div class="appTo">～</div>
            <input
                type="text"
                id="orderCraeteEnd"
                name="orderCraeteEnd"
                class="form-control dynamic-validation"
                placeholder='结束日期'
                autocomplete="off"
                readonly
            >
        </div>

        <div class="form-item">
            <input type="text"  placeholder="收款人/退款申请人（可多选）" name="allOperator" class="form-control" id="allOperator" autocomplete="off">
            <div class="input-group-btn">
                <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown"></button>
                <ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
            </div>
        </div>

        <div class="form-item">
            <input type="text"  placeholder="收款人/退款申请人部门（可多选）" name="allDepartments" class="form-control" id="allDepartments" autocomplete="off">
            <div class="input-group-btn">
                <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown"></button>
                <ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
            </div>
        </div>

        <div class="form-item">
            <input type="text" placeholder="客户姓名(可多选)" name="filterName" class="form-control" id="filterName" autocomplete="off">
            <div class="input-group-btn">
                <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown"></button>
                <ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
            </div>
        </div>

        <div class="form-item">
            <input type="text"  placeholder="业务类型（可多选）" name="allType" class="form-control" id="allType" autocomplete="off">
            <div class="input-group-btn">
                <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown"></button>
                <ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
            </div>
        </div>


        <div class="form-item">
            <input type="text"  placeholder="客户来源（可多选）" name="userSources" class="form-control" id="userSources" autocomplete="off">
            <div class="input-group-btn">
                <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown"></button>
                <ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
            </div>
        </div>

        <div class="form-item">
            <input type="text"  placeholder="客户来源部门（可多选）" name="userSourceDepartment" class="form-control" id="userSourceDepartment" autocomplete="off">
            <div class="input-group-btn">
                <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown"></button>
                <ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
            </div>
        </div>

         <div class="form-item">
            <div class="select-container clearMargin">
                <select class="form-control select-element select-default " name="new_user" id="new_user">
                    <option value="">客户类型</option>
                    <option value="1">新客户</option>
                    <option value="0">老客户</option>
                </select>
                <div class="select-toggle"></div>
            </div>
        </div>

        <div class="form-item">
            <div class="select-container clearMargin">
                <select class="form-control select-element select-default " name="piadTypes" id="piadTypes">
                    <option value="">付款方式（可多选）</option>
                    @foreach($piadTypes as $key=>$items)
                        <option value="{{$key}}">{{$items}}</option>
                    @endforeach
                </select>
                <div class="select-toggle"></div>
            </div>
        </div>

        <div class="form-item">
            <div class="select-container clearMargin">
                <select class="form-control select-element select-default " name="approve_status" id="approve_status">
                    <option value="">当前状态</option>
                    @foreach($approveStatus as $key=>$items)
                        <option value="{{$key}}">{{$items}}</option>
                    @endforeach
                </select>
                <div class="select-toggle"></div>
            </div>
        </div>

        <div class="form-item">
            <div class="select-container clearMargin">
                <select class="form-control select-element select-default" name="isRead" id="isRead">
                    <option value="">是否已读</option>
                    <option value="1">已读</option>
                    <option value="0">未读</option>
                </select>
                <div class="select-toggle"></div>
            </div>
        </div>
    </div>
    <ul class="choiceList choiceList1"></ul>

    <div class="mt-20 financialTable">
        <div class="resetButton" onclick="resetPage()"><span></span>重置</div>
        <div class="btn-group mb-10 approveHiddenColumns">
            <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle exportExcel" aria-expanded="false">展示列<span></span></button>
            <ul class="dropdown-menu" style="margin-left:-40px">
                <li>
                    <a class="toggle-vis toggle-vis1" data-column="0" name="inputTime">
                        付款/退款申请时间
                        <i class="glyphicon glyphicon-ok" name="inputTime"></i>
                    </a>
                </li>
                <li>
                    <a class="toggle-vis toggle-vis1" data-column="1" name="createdAt">
                        录入时间
                        <i class="glyphicon glyphicon-ok" name="createdAt"></i>
                    </a>
                </li>
                <li>
                    <a class="toggle-vis toggle-vis1" data-column="2" name="operator">
                        收款人/退款申请人
                        <i class="glyphicon glyphicon-ok" name="operator"></i>
                    </a>
                </li>
                <li>
                    <a class="toggle-vis toggle-vis1" data-column="3" name="userName">
                        客户姓名
                        <i class="glyphicon glyphicon-ok" name="userName"></i>
                    </a>
                </li>
                <li>
                    <a class="toggle-vis toggle-vis1" data-column="4" name="businessTypes">
                        业务类型
                        <i class="glyphicon glyphicon-ok" name="businessTypes"></i>
                    </a>
                </li>
                <li>
                    <a class="toggle-vis toggle-vis1" data-column="5" name="businessTypesDesc">
                        业务名称类别
                        <i class="glyphicon glyphicon-ok" name="businessTypesDesc"></i>
                    </a>
                </li>
                <li>
                    <a class="toggle-vis toggle-vis1" data-column="6" name="paidTypes">
                        付款方式/原支付方式
                        <i class="glyphicon glyphicon-ok" name="paidTypes"></i>
                    </a>
                </li>
                <li>
                    <a class="toggle-vis toggle-vis1" data-column="7" name="paidAmount">
                        支付金额/退款金额
                        <i class="glyphicon glyphicon-ok" name="paidAmount"></i>
                    </a>
                </li>
                <li>
                    <a class="toggle-vis toggle-vis1" data-column="8" name="paidAmountNoRefund">
                        不退款金额
                        <i class="glyphicon glyphicon-ok" name="paidAmountNoRefund"></i>
                    </a>
                </li>
                <li>
                    <a class="toggle-vis toggle-vis1" data-column="9" name="userSource">
                        客户来源
                        <i class="glyphicon glyphicon-ok" name="userSource" style="display:none;margin-left:23px;"></i>
                    </a>
                </li>
                <li>
                    <a class="toggle-vis toggle-vis1" data-column="10" name="newUser">
                        客户类型
                        <i class="glyphicon glyphicon-ok" name="newUser"></i>
                    </a>
                </li>
                <li>
                    <a class="toggle-vis toggle-vis1" data-column="11" name="refundRequirement">
                        退款条件
                        <i class="glyphicon glyphicon-ok" name="refundRequirement"></i>
                    </a>
                </li>
                <li>
                    <a class="toggle-vis toggle-vis1" data-column="12" name="present">
                        赠送
                        <i class="glyphicon glyphicon-ok" name="present"></i>
                    </a>
                </li>
                <li>
                    <a class="toggle-vis toggle-vis1" data-column="13" name="discount">
                        折扣
                        <i class="glyphicon glyphicon-ok" name="discount"></i>
                    </a>
                </li>
                <li>
                    <a class="toggle-vis toggle-vis1" data-column="14" name="approveStatus">
                        当前状态
                        <i class="glyphicon glyphicon-ok" name="approveStatus"></i>
                    </a>
                </li>
                <li>
                    <a class="toggle-vis toggle-vis1" data-column="15" name="operate">
                        操作
                        <i class="glyphicon glyphicon-ok" name="operate" style="display:none;margin-left:23px;"></i>
                    </a>
                </li>
            </ul>
        </div>
        <div class="pendingTableWrapper">
            <table class="table table-border table-bordered table-hover table-bg table-sort display newDatatable" id="pendingTable" width="100%">
                <thead>
                    <tr class="text-c text-center">
                        <th name="inputTime" class="lok text-center paytime" width="190">付款/退款申请时间</th>
                        <th name="createdAt" class="lok text-center paytime" width="120">录入时间</th>
                        <th name="operator" class="lok text-center">收款人/退款申请人</th>
                        <th name="userName" class="lok text-center">客户姓名</th>
                        <th name="businessTypes" class="lok text-center">业务类型</th>
                        <th name="businessTypesDesc" class="lok text-center">业务名称类别</th>
                        <th name="paidTypes" class="lok text-center">付款方式/原支付方式</th>
                        <th name="paidAmount" class="lok text-center">支付金额/退款金额</th>
                        <th name="paidAmountNoRefund" class="lok text-center">不退款金额</th>
                        <th name="userSource" class="lok text-center">客户来源</th>
                        <th name="newUser" class="lok text-center" width="90">客户类型</th>
                        <th name="refundRequirement" class="lok text-center">退款条件</th>
                        <th name="present" class="lok text-center">赠送</th>
                        <th name="discount" class="lok text-center">折扣</th>
                        <th name="approveStatus" class="lok text-center">当前状态</th>
                        <th name="operate" class="lok text-center" width="115"></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
<div id="massEditModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">添加审批人</h4>
            </div>
            <div class="modal-body d-flex">
                <div class="form-group col-sm-6">
                <div class="input-group">
                    <input type="text"  name="userNames" placeholder="审批人姓名" class="form-control" id="approverNames">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
                    </div>
                </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="triggerApproverStatusUpdate();">确定</button>
            </div>
        </div>
    </div>
</div>
<input type="hidden" class="filePath" value="{{config('locations.customerDocument.asset')}}">

<!--请在下方写此页面业务相关的脚本-->

<script type="text/javascript">
    let _filterTitle = {
        filterName: '客户姓名',
        allType: '业务类型',
        allOperator: '收款人/退款申请人',
        userSources: '客户来源',
        userSourceDepartment: '客户来源部门',
        allDepartments: '收款人/退款申请人部门',
        piadTypes:'付款方式'
    },
    _filterCombination = {
        filterName: [],
        allType: [],
        allOperator: [],
        userSources: [],
        userSourceDepartment: [],
        allDepartments:[],
        piadTypes:[]
    };

    let currentSearchString = '';
    //var pendingTable;
    var tabStatus = 'pending';
    $(document).ready(function () {
        parent.pendingTable = $('#pendingTable').DataTable({
            "dom": '<"top"i>tr<"bottom"flp><"clear">',
            "order": [[1, "desc"]],
            // 'ordering' : false,
            "stateSave": true,
            "pageLength": 25,
            "processing": true,
            "serverSide": true,
            //"ignorecase": true,
            "stateLoadParams": function (settings, data) {                
                data.order = [1, "desc"]; //default sort by column 1    
                data.search.search = "";
            },
            "ajax":{
                "url": "{{route('getFinancialList')}}",
                "dataType": "json",
                "type": "POST",
                "data":{
                    _token: "{{csrf_token()}}",
                    type: 1
                }
            },
            "createdRow": function (row, data) {
				if (data.approveStatusOrigin == 2) {
					row.classList.add('rejected-item');
				}
			},
            @if(config('app.locale') == 'zh')
            "language": {
                "lengthMenu": "每页 _MENU_ 条",
                "search": "查找",
                "info": "一共查找到 _TOTAL_ 条记录",
                "infoEmpty": "显示 0 到 0 项, 共 0 项",
                "infoFiltered": "",
                "zeroRecords": "没有找到相应的记录",
                "paginate": {
                    "next":       "&nbsp;&nbsp;",
                    "previous":   "&nbsp;&nbsp;"
                },
            },
            @endif

            "columns": [
                @foreach($columns as $key=>$column)
                    {
                        "data": "{{$column[0]}}",
                        "asSorting": [ "desc","asc" ],
                        @if(!$column[1])
                            "bSortable": false,                            
                        @endif
                        @if(isset($column[3]))
                            "className": "{{$column[3]}}",
                        @endif
                        @if(($column[4] ?? 1) == 0)
                            "visible": false
                        @endif

                    },
                @endforeach
            ],
            "drawCallback": function( settings ) {
                if(settings.json.updateNumber === true || $('#numberOfUsers').text() === ''){
                    $('#numberOfUsers').html(settings.json.recordsTotal);
                }
                $(".popovers").popover({trigger:'hover'});
            }
        });

        @include('components.datatableScroll',  ['id'=>'#pendingTable'])

        $(".toggle-vis1").each(function(){
            let columns = $('#statistical .lok');
            let oc = $(this).attr("name");
            if (columns.filter('[name="' + oc + '"]').length > 0) {
				$(this).find('i').show()
			}else{
                $(this).find('i').hide()
            }
        })

        $( 'a.toggle-vis1' ).on( 'click', function ( e ) {
            e.stopPropagation()
            if($(this).children('i').is(':visible')){
                $(this).children('i').hide();
            }
            else{
                $(this).children('i').show()
            }
            $(".popovers").popover({trigger:'hover'});
            e.preventDefault();
            var column = parent.pendingTable.column( $( this ).attr( 'data-column' ) );
            column.visible( !column.visible() );
        });
        $('#pendingTable_filter').attr('style','display: none;');
        $("#piadTypes").on("change",function(){
            let _val = $(this).val(),
                _text = $(this).find("option:selected").text();
            $(this).attr("data-id",_val)
            $(this).attr("data-text",_text)
            findItems($("#piadTypes"))
            $("#piadTypes").val("")
            $(".resetButton").addClass("visible")
        })

        function findItems( element){
            let _name = element.attr("name"),
                _val = element.attr("data-id");
                _text = element.attr("data-text")?element.attr("data-text"):element.val();
                console.log(_text)
            let _userType = "";
            if(_name == 'userSources'){
                _userType = element.attr("data-type");
                Object.keys(_filterCombination).forEach(item=>{
                    if(_name == item){
                        if(_filterCombination[item].indexOf(_val+":"+_userType) == -1 && _val !==''){
                            _filterCombination[item].push(_val+":"+_userType)
                            addItem(
                                {
                                'type':item,
                                'name':_text,
                                'value':_val+":"+_userType
                                }
                            )

                        }

                    }
                })
            }else{
                Object.keys(_filterCombination).forEach(item=>{
                    if(_name == item){
                        if(_filterCombination[item].indexOf(_val) == -1 && _val !==''){
                            _filterCombination[item].push(_val)
                            addItem(
                                {
                                'type':item,
                                'name':_text,
                                'value':_val
                                }
                            )

                        }

                    }
                })
            }

            // element.val("")
        }


        let renderLinkageState =()=>{//初始化渲染
            let _html = "";

            Object.keys(_filterTitle).forEach(item=>{
                _html +=`<li class="choice-item hide" data-type="`+item+`">
                            <p class="choice-title"><a alt="删除当前全部"><span class="closeAll" data-type="`+item+`">x</span></a>`+_filterTitle[item]+`:</p>
                            <div class="item-tag">

                            </div>
                        </li>`;

            })
            $(".choiceList1").append(_html)
        }
        renderLinkageState();

        let addItem = (obj,status)=>{
            let _html = "";
            _html += `<span class="tag label label-info">`+obj.name+`<span class="remove" data-type="`+obj.type+`" data-value="`+obj.value+`">x</span></span>`;
            let _parent = $(".choice-item[data-type='"+obj.type+"']");
            _parent.removeClass("hide")
            _parent.find("div.item-tag").append(_html)
            if(!status){
                applyDataTableFilter()
            }

        }

        $(".choiceList1").on("click","span.remove",function(){//点击删除
            let _type = $(this).attr("data-type"),
                _val = $(this).attr("data-value"),
                _parent = $(this).parents("span.tag");

                _parent.remove()
                delectItem(_filterCombination[_type], _val, _type)

        }).on("click","span.closeAll",function(){//点击删除当前全部
            let _type = $(this).attr("data-type"),
                _val = $(this).attr("data-value"),
                _parent = $(this).parents("li.choice-item");
                _parent.find("div.item-tag").html("");
                _parent.addClass("hide")
                _filterCombination[_type].splice(0);
                applyDataTableFilter()

        });

        let delectItem=(arr,i,type, status)=>{//从数组中删除
            let _index = arr.indexOf(i);
            arr.splice(_index, 1);
            if(arr.length <=0){
                $(".choice-item[data-type='"+type+"']").addClass("hide")
            }
            if(!status){
                applyDataTableFilter()
            }

        }
        let filterUsers = [
            @if(!empty($userNames))
                @foreach($userNames as $v)
                    @php($v->userName = (trim($v->userName ?? '') == '') ? 'N/A' : $v->userName)
                        {
                            'id': '{{trim($v->id, '')}}',
                            'name': '{{trim($v->userName, '')}}',
                            'registeredName': '{{trim($v->registeredName, '')}}',
                            'phone': '{{trim($v->phone, '')}}',
                            'email': '{{trim($v->email, '')}}'
                        },
                @endforeach
            @endif
        ];

        let filterAllType = [
                @if(!empty($allType))
                    @foreach($allType as $key=>$v)
                        {
                            'id': '{{$v['id']}}',
                            'name': '{{trim($v['type_name'])}}',
                            'mode': '{{$v['mode']}}',
                        },
                    @endforeach
                @endif
            ];

        let filterAllOperator = [
                @if(!empty($allOperator))
                    @foreach($allOperator as $key=>$v)
                        {
                            'id': '{{trim($v->id, '')}}',
                            'name': '{{trim($v->userName, '')}}',
                            'phone': '{{trim($v->phone, '')}}',
                            'email': '{{trim($v->email, '')}}',
                            'departmentName': '{{trim($v->departmentName, '')}}'
                        },
                    @endforeach
                @endif
        ];
        let filterUserSources = {!!json_encode($userSources)!!};
        let filterUserSourceDepartment = {!!json_encode($userSourceDepartment)!!};
        let filterAllDepartments = [
            @if(!empty($allDepartments))
                @foreach($allDepartments as $v)
                    @if(!empty($v)){
                        'id': '{{trim($v["id"])}}',
                        'name': '{{trim($v["name"])}}'
                    },
                    @endif
                @endforeach
            @endif
        ];

        $("#allDepartments").bsSuggest( {
            indexId: 0,
            indexKey: 1,
            ignorecase: true,
            clearable: false,
            effectiveFields: ['name'],
            showHeader:false,
            data: {
                'value': filterAllDepartments,
                'defaults': '全部'
            }
        }).on('onSetSelectValue', function (e, selectedData, selectedRawData) {
            findItems($("#allDepartments"))
            $("#allDepartments").val("")
        });

        $("#filterName").bsSuggest( {
            indexId: 0,
            indexKey: 1,
            ignorecase: true,
            clearable: false,
            effectiveFields: ['name','phone','email'],
            showHeader:false,
            data: {
                'value': filterUsers,
                'defaults': '全部'
            }
        }).on('onSetSelectValue', function (e, selectedData, selectedRawData) {
            findItems($("#filterName"))
            $("#filterName").val("")
            $(".resetButton").addClass("visible")
        });

        $("#allType").bsSuggest( {
            indexId: 0,
            indexKey: 1,
            ignorecase: true,
            clearable: false,
            effectiveFields: ['name'],
            showHeader:false,
            data: {
                'value': filterAllType,
                'defaults': '全部'
            }
        }).on('onSetSelectValue', function (e, selectedData, selectedRawData) {
            findItems($("#allType"))
            $("#allType").val("")
            $(".resetButton").addClass("visible")
        });

        $("#allOperator").bsSuggest( {
            indexId: 0,
            indexKey: 1,
            ignorecase: true,
            clearable: false,
            effectiveFields: ['name','departmentName'],
            showHeader:false,
            data: {
                'value': filterAllOperator,
                'defaults': '全部'
            }
        }).on('onSetSelectValue', function (e, selectedData, selectedRawData) {
            $("#allOperator").attr("data-id",selectedData.id)
            findItems($("#allOperator"))
            $("#allOperator").val("")
            $(".resetButton").addClass("visible")
        });
        $("#userSources").bsSuggest( {
            indexId: 0,
            indexKey: 1,
            ignorecase: true,
            clearable: false,
            effectiveFields: ['name','departmentName'],
            showHeader:false,
            data: {
                'value': filterUserSources,
                'defaults': '全部'
            }
        }).on('onSetSelectValue', function (e, selectedData, selectedRawData) {
            $("#userSources").attr("data-type",selectedRawData.type)
            findItems($("#userSources"))
            $("#userSources").val("")
            $(".resetButton").addClass("visible")
        });

        $("#userSourceDepartment").bsSuggest({
            indexId: 0,
            indexKey: 1,
            ignorecase: true,
            clearable: false,
            effectiveFields: ['name'],
            showHeader:false,
            data: {
                'value': filterUserSourceDepartment,
                'defaults': '全部'
            }
        }).on('onSetSelectValue', function (e, selectedData, selectedRawData) {
            findItems($("#userSourceDepartment"))
            $("#userSourceDepartment").val("")
            $(".resetButton").addClass("visible")
        });


        $("#collectionManage").on("change",".select-element",function(){
            let _val = $(this).val();
            if(_val == ""){
                $(this).addClass("select-default");
            }else{
                $(this).removeClass("select-default");
            }
        })
    });

    function exportExcel(){//导出
        downloadLink = "{{route('getFinancialList')}}?_token={{ csrf_token() }}&outputExcell=1&search[value]=" + currentSearchString;
        window.location.href = downloadLink;
    }

    //触发清空事件
    $(document).on('click','.clearable',function(){
        applyDataTableFilter();
    })
    
    $("#approve_status,#orderTimeStart,#orderTimeEnd,#new_user,#searchAll,#isRead").on("change",function(){
        applyDataTableFilter()
        $(".resetButton").addClass("visible")
    })
    var searchFilterKey="";
    function applyDataTableFilter(){
        currentSearchString=new Array(
            _filterCombination['filterName'],
            _filterCombination['allType'],
            _filterCombination['allOperator'],
            _filterCombination['userSources'],
            $("#approve_status").val(),
            $("#orderTimeStart").val(),
            $("#orderTimeEnd").val(),
            _filterCombination['allDepartments'],
            $('#new_user').val(),
            $('#searchAll').val(),
            $("#isRead").val(),
            _filterCombination['piadTypes'],
            $("#orderCraeteStart").val(),
            $("#orderCraeteEnd").val(),
            "",
            _filterCombination['userSourceDepartment'],
        ).join('~');
        let searchVal = currentSearchString.split("~"),
            _flag = true;
            searchVal.map(item=>{
                if(item !== ""){
                    _flag = false;
                }
            })
            if(!_flag){
                $(".resetButton").addClass("visible")
            }else{
                $(".resetButton").removeClass("visible")
            }
        parent.pendingTable.search(currentSearchString);
        parent.pendingTable.ajax.reload();
    }
    function reloadPage(){
        parent.pendingTable.ajax.reload(null, false);
    }

    function changeReloadPage(){
        parent.pendingTable.ajax.reload(null, false);
    }
    function getSearchArray(){
        var searchString=new Array(
            _filterCombination['filterName'],
            _filterCombination['allType'],
            _filterCombination['allOperator'],
            _filterCombination['userSources'],
            $("#approve_status").val(),
            $("#orderTimeStart").val(),
            $("#orderTimeEnd").val(),
            _filterCombination['allDepartments'],
            $('#new_user').val(),
            $('#searchAll').val(),
            $("#isRead").val(),
            _filterCombination['piadTypes'],
            $("#orderCraeteStart").val(),
            $("#orderCraeteEnd").val(),
            "",
            _filterCombination['userSourceDepartment'],
        ).join('~');
        return searchString;
    }
    function changestatisticalDatatable(unreadCount){
        if( unreadCount != undefined){
            $("#unreadNumber").html(unreadCount)
        }
        parent.pendingTable.ajax.reload(null, false);
    }

    let times = ["#orderTimeStart","#orderTimeEnd","#orderCraeteStart","#orderCraeteEnd"];

    times.map(item=>{
        laydate.render({
            elem: item,
            theme: '#4C84FF',
            type: 'date',
            format: 'dd/MM/yyyy',
            trigger: 'click',
            done: function(value, date, endDate){ //监听日期被切换
                let _this = $(this.elem),
                    _name = _this.attr("name");
                if(_name == 'orderCraeteStart' || _name == "orderCraeteEnd"){
                    $("#orderTimeStart").val("")
                    $("#orderTimeEnd").val("")
                }else {
                    $("#orderCraeteStart").val("")
                    $("#orderCraeteEnd").val("")
                }
                applyDataTableFilter();
            }
        });
    })


    function showTime(time){
        var now = new Date();
        let date = {
            "yy": now.getFullYear(),
            "MM": now.getMonth() + 1,
            "dd": now.getDate(),
            "hh": now.getHours(),
            "mm": now.getMinutes(),
            "ss": now.getSeconds()
        };
        if (/(y+)/i.test(time)) {
            time = time.replace(RegExp.$1, (now.getFullYear() + '').substr(4 - RegExp.$1.length));
        }
        //输出月、日、时、分、秒
        Object.keys(date).forEach(function(i){
            if (new RegExp("(" + i + ")").test(time)) {
                if(RegExp.$1.length == 2){
                    date[i] < 10 ? date[i] = '0' + date[i]: date[i];
                }
                time = time.replace(RegExp.$1, date[i]);
            }
        })
        return time;

    }
    function resetPage() {
        location.reload();
    }

    function toggleMassEdit(enable) {
        $('.mass-edit-container').toggleClass('edit', enable);
        if(enable){
            $(".checkTh").show()
            $('input[name="selectedClients"]').parents("td").show();
        }else{
            $(".checkTh").hide()
            $('input[name="selectedClients"]').parents("td").hide();
        }
    }

    function confirmApprove(id){
        var loadingLayer = layer.load(0);
        $.ajax({
            type: 'POST',
            url: "{{route('storeFinancialApprove')}}",
            data:{'financialId':id,'status':1},
            success: function(data){
                layer.close(loadingLayer);
                if(data.code == 200){
                    layer.msg('审批成功！', {time: 2000,icon: 1},function(){
                        reloadPage();
                    })
                }else{
                    layer.msg(data.msg, {time: 2000,icon: 2});
                }
            }
        })
    }

    function cancelApprove(id){//取消审批
        var loadingLayer = layer.load(0);
        $.ajax({
            type: 'POST',
            url: "{{route('storeFinancialApprove')}}",
            data:{'financialId':id,'status':0},
            success: function(data){
                layer.close(loadingLayer);
                if(data.code == 200){
                    layer.msg('改为待审批状态', {time: 2000,icon: 1},function(){
                        reloadPage();
                    })
                }else{
                    layer.msg(data.msg, {time: 2000,icon: 2});
                }
            }
        })
    }

    function showImages(id,images){//预览
        let baseUrl = $(".filePath").val();
        let _images = images.split(",");
        let curImgs = [];
        for(let i in _images){
            curImgs.push(baseUrl+_images[i])
        }
        $.fn.galpop('openBox', {}, curImgs)
    }

    function markRead(_this,title,url) {//标记已读
        let _readPoint = $(_this).parents("tr").find("span.unRead");
        _readPoint.remove()
        parent.addMenuTab(title,url)
    }


    var users = [
        @if(!empty($allApprover))
            @foreach($allApprover as $v)
                    {
                        'id': '{{trim($v->id, '')}}',
                        'name': '{{trim($v->userName, '')}}',
                        'phone': '{{trim($v->phone, '')}}',
                        'email': '{{trim($v->email, '')}}'
                    },
            @endforeach
        @endif
    ];

    $(".addApproverButton").on("click",function(){
        $("#massEditModal").modal()
    })
    $( "#approverNames" ).bsSuggest({
        indexKey: 1, //data.value 的第几个数据，作为input输入框的内容
        effectiveFields: ['name','phone','email'],
        showHeader: false,
        ignorecase: true,
        clearable: true,
        data: {
            'value': users,
            'defaults': '全部'
        }
    })
    function getApproverList(){
        let _str = "";
        $('.popovers').popover('destroy')
        $.ajax({
            method: 'get',
            url: '{{route('getApproverList')}}',
            success:function (data) {//成功回调
                if(data.code == 200){
                    $(".partner-list").html("")
                    $(".partner-button").hide();
                    data.data.map((i,index)=>{
                        _str+= `<div class="popovers partner-button partner-item isSystem" data-index="`+index+`" data-container="body" data-toggle="popover" data-placement="bottom" data-content="`+i.userName+`">
                            <div class="image-wrapper">
                                <img src="`+i.image+`" alt="">
                            </div>
                            <span class="removea" data-id="`+i.id+`"></span>
                        </div>`
                    })
                    $(".partner-list").html(_str);
                    $(".partner-list .partner-item").each(function(){
                        let _index = $(this).attr("data-index");
                        if(parseInt(_index) > 3){
                            $(this).remove()
                        }
                    })
                    if( data.data.length > 4){
                        $(".partner-button").show();
                        $(".more-list").html(_str)
                    }

                    $(".popovers").popover({trigger:'hover'});

                }else{
                    layer.msg(data.msg);
                }
            }
        });
    }
    getApproverList()
    $(".more-list").on("click","span",function () {
        let _id = $(this).attr("data-id");
        layer.confirm('确定要删除此审批人', {
            title: '',
            btn : [ '确认', '取消' ]//按钮
        },
        function(index) {
            layer.closeAll();
            removeApprove(_id)
        });
    })

    function removeApprove(_id) {
        $.ajax({
            method: 'post',
            url: '{{route('delFinancialApprover')}}',
            data: {
                approverId:_id
            },
            success:function (data) {           //成功回调
                if(data.code == 200){
                    layer.msg("删除成功");
                    getApproverList()
                }else{
                    layer.msg(data.msg);
                }
            }
        });
    }
    $(".right-partner").on("click","span.removea",function(){
        let _id = $(this).attr("data-id");
        layer.confirm('确定要删除此审批人', {
            title: '',
            btn : [ '确认', '取消' ]//按钮
        },
        function(index) {
            layer.closeAll();
            removeApprove(_id)
        });
    })
    function triggerApproverStatusUpdate() {//添加审批人
        let _val = $("#approverNames").attr("data-id");
        let str = "";

        if(_val == "" || _val == undefined){
            layer.msg("请选择审批人");
            return;
        }
        $.ajax({
            method: 'post',
            url: '{{route('storeFinancialApprover')}}',
            data: {
                approverId:_val
            },
            success:function (data) {//成功回调
                if(data.code == 200){
                    let _res = data.data.staff;
                    $("#approverNames").attr("data-id","")
                    .val("");
                    $('#massEditModal').modal('hide');
                    layer.msg(data.msg);
                    getApproverList()

                }else{
                    layer.msg(data.msg);
                }
            }
        });
    }

    function showMore(event,element,_this){//显示弹框

        closePopover()
        $(element).addClass("slideDown")
        if('partnerContent' == element.attr("id")){
            $(element).find('input').focus()
        }

        if('priority' == $(element).attr("data-type")){
            $(element).css({
                "overflow":"unset"
            })
        }
        event.stopPropagation();
        event.cancelBubble = true;
    }
    function handleeShowApproveStatus(event){//显示状态
        $(".list-status").removeClass("slideDown")
        $(event.target).find(".list-status").addClass("slideDown");
        event.stopPropagation();
        event.cancelBubble = true;
    }
    $(document).on("click",function(){//点击旁白消失
        closePopover()
        closeCurrentStatus()
        $("#partnerContent").find('input').val("")
        $(".priority-select").hide()
        .attr("data-status","true")
    })

    function closeCurrentStatus() {
        $(".list-status").removeClass("slideDown")
    }

    function closePopover(){//关闭弹框
        $(".more-content").removeClass("slideDown");
        $("#partnerContent").removeClass("slideDown");
        $('.filter-list').removeClass("slideDown")
        $('.priority-filter').removeClass("slideDown");
        $('.priority-filter').css({
            "overflow":"hidden"
        })
        $("#textArea").removeClass("slideDown")
        $("#fliter-list").removeClass("slideDown")
        $(".reply-menu").removeClass("slideDown")
        $(".showActived").removeClass("showActived")
    }
</script>