@extends('layouts.app')
@section('title')退货管理@endsection

@section('content')
    <div id="nav2">
        @component('rejected.menu')@endcomponent
        @component('rejected.search.menu')@endcomponent
    </div>
    <div class="container-fluid">
        <div>
{{--        <div style="min-width: 2070px;">--}}
            <div class="d-none" id="list">
                @if(Session::has('successTip'))
                    <div class="alert alert-success h1">{{Session::get('successTip')}}</div>
                @endif                <div id="form_div"></div>
                <span class="dropdown">
                    <button class="btn btn-outline-dark btn-sm form-control-sm dropdown-toggle tooltipTarget":class="[rejectedBills_checkBoxes.length>0?'btn-dark text-light':'']"
                            data-toggle="dropdown" title="导出所有页将会以搜索条件得到的过滤结果，将其全部记录（每一页）导出">
                        导出Excel
                    </button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" @click="exportExcel(false)" href="javascript:">导出勾选内容</a>
                        <a class="dropdown-item" @click="exportExcel(true)" href="javascript:">导出所有页</a>
                    </div>
                </span>
                @can('退货管理-编辑')
                    {{--                                        <select name="" class="tooltipTarget form-control-sm" style="vertical-align: middle"--}}
                    {{--                                                title="将勾选记录的入库状态设定为是或否，仅对未完结状态的记录有效" @change="setIsLoaded_batch"--}}
                    {{--                                                :class="[rejectedBills_checkBoxes.length>0?'btn-dark':'btn-outline-dark']">--}}
                    {{--                                            <option value="">修改入库</option>--}}
                    {{--                                            <option value="1">设定为是</option>--}}
                    {{--                                            <option value="0">设定为否</option>--}}
                    {{--                                            <option value="null">无需入库</option>--}}
                    {{--                                            <option value="2">待推单</option>--}}
                    {{--                                        </select>--}}
                @endcan
                @can('退货管理-审核')
                    <span class="btn btn-sm" @click="checkAll" style="cursor: pointer"
                          :class="[rejectedBills_checkBoxes.length>0?'btn-dark':'btn-outline-dark']">审核</span>
                @endcan
                @can('退货管理-编辑')
                    <span class="btn btn-sm" @click="finishAll" style="cursor: pointer"
                          :class="[rejectedBills_checkBoxes.length>0?'btn-dark':'btn-outline-dark']">完结</span>
                @endcan
                <span class="dropdown">
                    <button class="btn btn-outline-dark btn-sm form-control-sm dropdown-toggle tooltipTarget":class="[rejectedBills_checkBoxes.length>0?'btn-dark text-light':'']"
                            data-toggle="dropdown" title="将勾选记录的入库状态设定为是或否，仅对未完结状态的记录有效">
                        修改入库
                    </button>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" @click="setIsLoaded_batch(1)" href="javascript:">设定为是</a>
                        <a class="dropdown-item" @click="setIsLoaded_batch(0)" href="javascript:">设定为否</a>
                        <a class="dropdown-item" @click="setIsLoaded_batch('null')" href="javascript:">无需入库</a>
                        <a class="dropdown-item" @click="setIsLoaded_batch(2)" href="javascript:">待推单</a>
                        <a class="dropdown-item" @click="setIsLoaded_batch(4)" href="javascript:">待确认</a>
                    </div>
                </span>
                <label for="checkSelectingAll" class="d-none" id="cloneCheckAll">
                    <input type="checkbox" class="form-control-sm tooltipTarget" title="全选"
                           id="checkSelectingAll" @click="checkBoxAllToggle($event)">
                </label>
                <table class="table table-striped table-sm table-bordered table-hover text-nowrap d-none" id="headerRoll" ></table>
                <table class="table table-striped table-sm table-bordered table-hover text-nowrap" style="background: #fff;" id="headerParent">
                    <tr id="header"></tr>
                    <tr v-for="(rejectedBill,i) in rejectedBills" :data-id="rejectedBill.id">
                        <td>
                            <input type="checkbox" v-model="rejectedBills_checkBoxes" :value="rejectedBill.id"/>
                        </td>
                        <td class="text-muted" style="opacity:0.7">
                            @{{ i+1 }}
                        </td>
                        <td class="text-muted">
                            <span v-if="rejectedBill.is_checked==1" class="text-success">
                                <span class="fa fa-check-square"></span> @{{ rejectedBill.checked_numbers }}
                            </span>
                            <span v-else>
                                未审核
                            </span>
                        </td>
                        <td class="" :class="[rejectedBill.is_finished==1?'text-success':'text-muted']">@{{rejectedBill.is_finished | yesNo}}</td>
                        <td class="" :class="[rejectedBill.is_loaded==1?'text-success':'text-muted']">
                            <span v-if="rejectedBill.is_loaded==4">
                                <button class="btn btn-sm btn-info" @click="confirmBeStored($event,rejectedBill.id)">确定入库</button>
                            </span>
                            <span v-else>@{{rejectedBill.is_loaded | yesNoIsLoaded}}</span>
                        </td>
                        <td class="text-muted">@{{rejectedBill.created_at}}</td>
                        <td><span v-if="rejectedBill.owner">@{{rejectedBill.owner.name}}</span></td>
                        <td>@{{rejectedBill.logistic_number_return}}</td>
                        <td class="text-muted"><span v-if="rejectedBill.logistic">@{{rejectedBill.logistic.name}}</span></td>
                        <td>@{{rejectedBill.order_number}}</td>
                        <td class="text-muted">@{{rejectedBill.sender}}</td>
                        <td class="text-muted">@{{rejectedBill.mobile_sender}}</td>
                        <td>@{{rejectedBill.logistic_number}}</td>
                        @cannot('退货管理-到付费用')<td class="text-muted">@{{rejectedBill.fee_collected}}</td>@endcannot
                        @can('退货管理-查询-客户定义-爱奇艺')<td class="text-muted">@{{rejectedBill.common_01}}</td>@endcan
                        <td class="text-muted">@{{rejectedBill.common_02}}</td>
                        <td class="text-muted">@{{rejectedBill.goods_amount}}</td>
                        <td colspan="8">
                            <div class="text-center" v-if="rejectedBill.detailFolding && rejectedBill.items.length>1">
                                <a href="javascript:;" @click="rejectedBill.detailFolding=false">@{{rejectedBill.goods_amount}}件商品，点击展开明细</a></div>
                            <table class="table table-sm" v-else>
                                <tr v-for="item in rejectedBill.items">
                                    <td style="width: 140px">@{{item.barcode_goods}}</td>
                                    <td style="width: 140px">@{{item.name_goods}}</td>
                                    <td style="width: 30px">@{{item.amount}}</td>
                                    <td class="text-muted">@{{item.quality_label}}</td>
                                    <td class="text-muted">@{{item.batch_number}}</td>
                                    <td class="text-muted">@{{item.made_at}}</td>
                                    <td class="text-muted">@{{item.validity_at}}</td>
                                    <td class="text-muted">@{{item.remark}}</td>
                                </tr>
                                <tr v-if="!rejectedBill.detailFolding && rejectedBill.items.length>1">
                                    <td colspan="8" class="text-center">
                                        <a href="javascript:;" @click="rejectedBill.detailFolding=true">点击收起明细</a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td class="text-muted" style="max-width: 190px">@{{rejectedBill.remark}}</td>
                        <td class="text-muted">@{{rejectedBill.operator_name}}</td>
                        @can('退货管理-编辑')
                            <td>
                                <span v-if="rejectedBill.is_finished!=1">
                                @can('退货管理-编辑')
                                        <button class="btn btn-outline-info btn-sm tooltipTarget" @click="edit(rejectedBill.id)">改</button>
                                    @endcan
                                    @can('退货管理-删除')
                                        <button
                                            class="btn btn-outline-danger btn-sm tooltipTarget" @click="destroy(rejectedBill)">删</button>
                                    @endcan
                                </span>
                                <span v-else class="text-muted">已完结</span>
                            </td>
                        @endcan
                    </tr>
                </table>
                <div class="text-info h5 btn btn">{{$rejectedBills->count()}}/{{$rejectedBills->total()}}</div>
                {{$rejectedBills->appends($paginateParams)->links()}}
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        let rejectedBills={!! $rejectedBills->toJson()!!}.data;
        rejectedBills.forEach(function(rejectedBill){
            rejectedBill.detailFolding=true;
        })
        let owners=[
            @foreach($owners as $owner)
            {id:'{{$owner->id}}',name:'{{$owner->name}}'},
            @endforeach
        ];
        let logistics=[
            @foreach($logistics as $logistic)
            {!! $logistic !!},
            @endforeach
        ];
        let qualityLabels=[
                @foreach($qualityLabels as $qualityLabel)
            {id:'{{$qualityLabel->id}}',name:'{{$qualityLabel->name}}'},
            @endforeach
        ];
            @if(isset($paginateParams))
        let paginateParams={!! json_encode($paginateParams) !!};
            @endif
        let total='{{$rejectedBills->total()}}';
        let editUrl = "{{url('rejectedBill')}}/";
        let destroyUrl = "{{url('rejectedBill')}}/";
        let ajaxConfirmBeStoredUrl = '{{url("apiLocal/rejectedBill/apiConfirmBeStored")}}';
        let ajaxCheckUrl = '{{url("apiLocal/rejectedBill/apiSetIsLoadedAll")}}';
        let ajaxCheckAllURL = '{{url("rejected/ajaxCheckAll")}}';
        let ajaxFinishAllUrl='{{url("rejected/ajaxFinishAll")}}';
        let csrfInput='@csrf';
    </script>
    <script src="{{asset('js/queryForm/export200813b.js')}}"></script>
    <script src="{{asset('js/queryForm/queryForm200813b.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/queryForm/header200814.js')}}"></script>
    <script>
        let vue = new Vue({
            el:"#list",
            data:{
                rejectedBills:rejectedBills,
                rejectedBills_checkBoxes:[],
                owners:[
                    @foreach($owners as $owner)
                    {name:'{{$owner->id}}',value:'{{$owner->name}}'},
                    @endforeach
                ],
                logistics:[
                    @foreach($logistics as $logistic)
                    {name:'{{$logistic->id}}',value:'{{$logistic->name}}'},
                    @endforeach
                ],
                qualityLabels:[
                    @foreach($qualityLabels as $qualityLabel)
                    {name:'{{$qualityLabel->id}}',value:'{{$qualityLabel->name}}'},
                    @endforeach
                ],
            },
            mounted:function(){
                $(".tooltipTarget").tooltip({'trigger':'hover'});
                $('#list').removeClass('d-none');
                let data=[
                    [
                        {name:'created_at_start',type:'dateTime',tip:'选择显示指定日期的起始时间'},
                        {name:'owner_id',type:'select_multiple_select',tip:['输入关键词快速定位下拉列表，回车确定','选择要显示的客户'],
                            placeholder:['货主','定位或多选货主'],data:this.owners},
                        {name:'order_number',type:'input',tip:'订单号：可在两侧增加百分号(%)进行模糊搜索',placeholder:'订单号'},
                        {name:'logistic_number_return',type:'input',tip:'退回单号：可在两侧增加百分号(%)进行模糊搜索',placeholder:'退回单号'},
                        {name:'logistic_number',type:'input',tip:'原单单号：可在两侧增加百分号(%)进行模糊搜索',placeholder:'原单单号'},
                        {name:'is_checked',type:'select',placeholder: '是否审核',data:[{name:1,value:'已审核'},{name:0,value:'未审核'}]},
                        {name:'id_logistic_return',type:'select',placeholder: '快递名称',data:this.logistics},
                    ],[
                        {name:'created_at_end',type:'dateTime',tip:'选择显示指定日期的结束时间'},
                        {name:'barcode_goods',type:'input',tip:'商品条码：可模糊匹配右边未填完的部分，按回车提交',placeholder:'商品条码'},
                        {name:'id_quality_label',type:'select',tip:'是否正品：正品仅显示全部是正品的退单，但残次显示的是包含有残次的退单',placeholder: '是否正品',data:this.qualityLabels},
                        {name:'mobile_sender',type:'input',tip:'寄件人手机：输入完成敲回车提交',placeholder:'寄件人手机'},
                        {name:'checked_numbers',type:'input',tip:'审核批次号：支持右位留空的模糊搜索',placeholder:'审核批次号'},
                        {name:'is_loaded',type:'select',placeholder: '是否入库',data:[{name:1,value:'是'},{name:0,value:'否'},
                                {name:'null',value:'无需入库'},{name:2,value:'待推单'},{name:4,value:'待确认'}]},
                    ]
                ];
                this.form=new query({
                    el:"#form_div",
                    condition:data
                });
                this.form.init();
                let _this = this;
                let column = [
                    {name:'cloneCheckAll',customization:true,type:'checkAll',column:'id',
                        dom:$('#cloneCheckAll').removeClass('d-none'), neglect: true},
                    {name:'index',value: '序号', neglect: true},
                    {name:'checked_numbers',value: '是否审核', neglect: true},
                    {name: 'is_finished', value: '是否完结',neglect: true},
                    {name: 'is_loaded', value: '是否入库', neglect: true},
                    {name:'created_at',value: '创建时间'},
                    {name: 'owner_name', value: '客户名称', neglect: true},
                    {name: 'logistic_number_return', value: '退回单号'},
                    {name: 'logistic_name', value: '退回公司', neglect: true},
                    {name:'order_number',value: '订单号'},
                    {name: 'sender', value: '姓名'},
                    {name: 'mobile_sender', value: '电话'},
                    {name: 'logistic_number', value: '原单单号'},
                        @cannot('退货管理-到付费用'){name:'fee_collected',value: '到付费用'},@endcannot
                        @can('退货管理-查询-客户定义-爱奇艺'){name:'common_01',value: '寄件方省'},@endcan
                    {name:'common_02',value: '重量'},
                    {name:'goods_amount',value: '商品总数'},
                    {name:'item_barcode_goods',value: '商品条码', neglect: true},
                    {name: 'item_name_goods', value: '商品名称', neglect: true},
                    {name: 'item_amount', value: '数量', neglect: true},
                    {name:'item_quality_label',value: '是否正品', neglect: true},
                    {name:'item_batch_number',value: '批次号', neglect: true},
                    {name:'item_made_at',value: '生产日期', neglect: true},
                    {name:'item_validity_at',value: '效期', neglect: true},
                    {name:'item_remark',value: '备注', neglect: true},
                    {name:'remark',value: '退单备注'},
                    {name:'operator_name',value: '录入人'},
                        @can('退货管理-编辑','退货管理-删除'){name:'remove',value: '操作', neglect: true},@endcan
                ];
                setTimeout(function () {
                    let header = new Header({
                        el: "#header",
                        column: column,
                        data: _this.rejectedBills,
                        restorationColumn: 'id',
                        fixedTop:($('#form_div').height())+2,
                        offset:0.5,
                        vue:vue,
                        checkbox : 'rejectedBills_checkBoxes',
                    });
                    header.init();
                },0);
            },
            watch:{
                rejectedBills_checkBoxes:{
                    handler(){
                        if (this.rejectedBills_checkBoxes.length === this.rejectedBills.length){
                            document.querySelector('#checkSelectingAll').checked = true;
                            document.querySelector('#checkSelectingAll_temp').checked = true;
                        }else {
                            document.querySelector('#checkSelectingAll').checked = false;
                            document.querySelector('#checkSelectingAll_temp').checked = false;
                        }
                    },
                    deep:true
                }
            },
            methods:{
                edit(id){
                    window.location.href=editUrl+id+"/edit";
                    // window.open(editUrl+id+"/edit",'_blank') ;
                },
                destroy:function(rejectedBill){
                    if(!confirm('确定要删除退货信息“' + rejectedBill.owner.name+':'+rejectedBill.logistic_number_return+ '”吗？')){return;}
                    let data=this;
                    let url = destroyUrl+rejectedBill.id;
                    axios.delete(url,{id:rejectedBill.id})
                        .then(function (response) {
                            if(response.data.success){
                                for (let i = 0; i < data.rejectedBills.length; i++) {
                                    if (data.rejectedBills[i].id===rejectedBill.id){
                                        data.rejectedBills.splice(i,1);
                                        break;
                                    }
                                }
                                tempTip.setDuration(1000);
                                tempTip.showSuccess('删除退货信息"'+rejectedBill.owner.name+':'+rejectedBill.logistic_number_return+'"成功!')
                            }else{
                                tempTip.setDuration(1000);
                                tempTip.show('删除退货信息"'+rejectedBill.owner.name+':'+rejectedBill.logistic_number_return+'"失败!')
                            }
                        })
                        .catch(function (err) {
                            tempTip.setDuration(3000);
                            tempTip.show('删除退货信息失败!'+'网络错误：' + err);
                        });
                },
                cancelCheckConfirmAll:function(){
                    $('#checkConfirmingAll').tooltip('hide');
                    setTimeout(function () {
                        $(".tooltipTarget").tooltip({'trigger':'hover'})
                    }, 10);
                    this.rejectedBills.forEach(function(rejectedBill){
                        if(rejectedBill.is_checked===-1)
                            rejectedBill.is_checked='0';
                    })
                },
                setIsLoaded_batch:function(val){
                    let _this=this;
                    if(_this.rejectedBills_checkBoxes.length===0){
                        tempTip.show('没有勾选记录');
                        $(e.target).val("");
                        return;
                    }
                    let is_loaded=0;
                    let is_loadedLabel='否';
                    if(parseInt(val)===1){
                        is_loaded=1;
                        is_loadedLabel='是';
                    }else if(parseInt(val)===2){
                        is_loaded=2;
                        is_loadedLabel='待推单';
                    }else if(parseInt(val)===4){
                        is_loaded=4;
                        is_loadedLabel='待确认';
                    }else if(val==="null"){
                        is_loaded='null';
                        is_loadedLabel='无需入库';
                    }
                    if(!confirm("确定要标记所有勾选入库情况为'"+is_loadedLabel+"'吗")){return;}
                    axios.post(ajaxCheckUrl,{ids:_this.rejectedBills_checkBoxes,is_loaded:is_loaded}).then(function(response){
                        if(response.data.success){
                            _this.rejectedBills_checkBoxes.forEach(function(id){
                                _this.rejectedBills.forEach(function(bill){
                                    if(bill.id===id){
                                        bill.is_loaded=is_loaded;
                                    }
                                });
                            });
                            tempTip.setDuration(1000);
                            tempTip.showSuccess('修改勾选记录的入库状态成功');
                        }else{
                            tempTip.setDuration(2500);
                            tempTip.show('修改勾选记录的入库状态失败，错误：'+response.data.fail_info);
                        }
                    }).catch(function (e) {
                        alert('网络连接错误：'+e);
                        tempTip.setDuration(2500);
                        tempTip.show('审核勾选内容失败，网络连接错误：'+e);
                        console.log(e);
                    });
                    $(e.target).val("")
                },
                checkBoxAllToggle:function(e){
                    if (e.target.checked) {
                        this.rejectedBills.forEach((el) => {
                            if (!el.id) this.rejectedBills_checkBoxes.push(el.id);
                            if (el.id && this.rejectedBills_checkBoxes.indexOf(el.id) == '-1') {
                                this.rejectedBills_checkBoxes.push(el.id);
                            }
                        });
                    } else {
                        this.rejectedBills_checkBoxes = [];
                    }
                },
                checkAll:function(){
                    let _this=this;
                    if(_this.rejectedBills_checkBoxes.length===0){
                        tempTip.show('没有勾选记录');
                        return
                    }
                    if(!confirm("确定要标记所有勾选内容为'已审核'吗")){return;}
                    axios.post(ajaxCheckAllURL,{ids:_this.rejectedBills_checkBoxes}).then(function(response){
                        if(response.data.success){
                            response.data.rejecteds.forEach(function (rejected) {
                                _this.rejectedBills.forEach(function(rejectedBill){
                                    if(parseInt(rejectedBill.id)===parseInt(rejected.id)){
                                        rejectedBill.is_checked=1;
                                        rejectedBill.checked_numbers=rejected.checked_numbers;
                                    }
                                });
                            });
                            tempTip.setDuration(1000);
                            tempTip.showSuccess('审核勾选内容成功');
                        }else{
                            tempTip.setDuration(2500);
                            tempTip.show('审核勾选内容失败，错误：'+response.data.fail_info);
                        }
                    }).catch(function (e) {
                        alert('网络连接错误：'+e);
                        tempTip.setDuration(2500);
                        tempTip.show('审核勾选内容失败，网络连接错误：'+e);
                        console.log(e);
                    })
                },
                confirmBeStored:function($e,id){
                    let _this=this;
                    axios.post(ajaxConfirmBeStoredUrl,{id:id}).then(function(response){
                        if(response.data.success){
                            _this.rejectedBills.forEach(function(rejectedBill){
                                if(rejectedBill.id===id){
                                    rejectedBill.is_loaded=1;
                                }
                            });
                            tempTip.setDuration(1000);
                            tempTip.showSuccess('确认入库成功');
                        }else{
                            tempTip.setDuration(2500);
                            tempTip.okWindow('数据异常无法确认！请在WMS确定入库状态后，勾选该条目手动修改相应入库状态！','知道了')
                        }
                    }).catch(function (e) {
                        alert('确认失败，网络连接错误：'+e);
                        tempTip.setDuration(2500);
                        tempTip.show('确认失败，网络连接错误：'+e);
                        console.log(e);
                    })
                },
                finishAll:function(){
                    let _this=this;
                    if(_this.rejectedBills_checkBoxes.length===0){
                        tempTip.show('没有勾选记录');
                        return
                    }
                    if(!confirm("确定要标记所有勾选内容为'已完结'吗")){return;}
                    axios.post(ajaxFinishAllUrl,{ids:_this.rejectedBills_checkBoxes}).then(function(response){
                        if(response.data.success){
                            _this.rejectedBills.forEach(function(rejectedBill){
                                _this.rejectedBills_checkBoxes.forEach(function (checkedId) {
                                    if(rejectedBill.id===checkedId){
                                        rejectedBill.is_finished=1;
                                    }
                                });
                            });
                            tempTip.setDuration(1000);
                            tempTip.showSuccess('标记勾选内容为完结成功');
                        }else{
                            tempTip.setDuration(2500);
                            tempTip.show('标记勾选内容为完结失败，错误：'+response.data.fail_info);
                        }
                    }).catch(function (e) {
                        alert('网络连接错误：'+e);
                        tempTip.setDuration(2500);
                        tempTip.show('标记勾选内容完结失败，网络连接错误：'+e);
                    })
                },
                exportExcel:function(checkAllSign){
                    let url = '{{url('rejected/export')}}';
                    let token='{{ csrf_token() }}';
                    excelExport(checkAllSign,this.rejectedBills_checkBoxes,url,total,token);
                },

            },
            filters:{
                yesNo:function (val) {
                    if(!val||val===0||val==='0'){return '否'}
                    return '是'
                },
                yesNoIsLoaded:function (val) {
                    switch(val){
                        case 0:case '0':return '否';
                        case 1:case '1':return '是';
                        case 2:case '2':return '待推单';
                        case 3:case '3':return '交互异常';
                        case 4:case '4':return '待确认';
                        case null:case 'null':return '无需入库';
                    }
                    return '';
                }
            }
        });
    </script>
@endsection
