@extends('layouts.app')
@section('title')波次-订单管理@endsection

@section("content")
    @component("order.wave.menu")@endcomponent
    <div class="container-fluid d-none" id="wave_div">
        <div style="min-width: 2000px;">
            <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
                <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        </div>
                        <div class="modal-body">
                            <label class="w-100">
                                <textarea class="form-control" placeholder="波次号：逗号(,)间隔" v-model="batchCodes"></textarea>
                            </label>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-success" @click="repairBatch()" data-dismiss="modal">开始修复</button>
                        </div>
                    </div>
                </div>
            </div>


            <div id="form_div" style="min-width: 1950px;" class="bg-white"></div>

            <table class="table table-sm table-striped table-bordered table-hover card-body mt-2 " id="headerParent">
                <tr></tr>
                <tr>
                    <td colspan="20">
                        <button type="button" class="btn btn-outline-dark btn-sm form-control-sm dropdown-toggle tooltipTarget" :class="[checkData.length>0?'btn-dark text-light':'']"
                                data-toggle="dropdown" title="导出所有页将会以搜索条件得到的筛选结果，将其全部记录（每一页）导出">
                            导出Excel
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" @click="exportExcel('pitch')" href="javascript:">导出勾选内容</a>
                            <a class="dropdown-item" @click="exportExcel()" href="javascript:">导出所有页</a>
                        </div>

{{--                        <button type="button" class="btn btn-sm tooltipTarget btn-outline-dark" @click="batchCancelPrint">重置打印标记</button>--}}
                        <button type="button" class="btn btn-sm btn-outline-success" data-toggle="modal" data-target="#myModal">修复波次</button>
                    </td>
                </tr>

                <tr class="text-nowrap">
                    <th>
                        <label for="all">
                            <input type="checkbox" id="all" @click="checkAll()"/>
                        </label>
                    </th>
                    <th>序号</th>
                    <th>波次号</th>
                    <th>波次状态</th>
                    <th>波次规则</th>
                    <th>波次描述</th>
                    <th>承运人</th>
                    <th>操作员</th>
                    <th>创建时间</th>
                    <th>拣货单打印人</th>
                    <th>拣货单打印于</th>
                    <th>快递单打印人</th>
                    <th>快递单打印于</th>
                    @can("订单管理-波次-重置打印")
                        <th>重置打印</th>
                    @endcan
                </tr>

                <tr v-for="(wave,i) in waves" @click="selectTr===i+1?selectTr=0:selectTr=i+1" :class="selectTr===i+1?'focusing' : ''">
                    <td>
                        <input class="checkItem" type="checkbox" :value="wave.waveNo" v-model="checkData">
                    </td>
                    <td>@{{ i+1 }}</td>{{--序号--}}
                    <td class="text-dark font-weight-bold text-nowrap">@{{ wave.waveNo }}</td>{{--波次号--}}
                    <td class="text-muted text-nowrap">@{{ wave.codename_c }}</td>{{--波次状态--}}
                    <td class="text-nowrap text-muted">@{{ wave.waveRule }}</td>{{--波次规则--}}
                    <td class="text-nowrap">@{{ wave.descr }}</td>{{--波次描述--}}
                    <td class="text-muted">@{{ wave.descr_c }}</td>{{--承运人--}}
                    <td class="text-nowrap">@{{ wave.addWho }}</td>{{--操作员--}}
                    <td class="text-muted">@{{ wave.addTime }}</td>{{--创建时间--}}
                    <td class="text-nowrap">@{{ wave.pickerPrint }}</td>{{--拣货单打印人--}}
                    <td class="text-muted">@{{ wave.pickerPrintTime }}</td>{{--拣货单打印时间--}}
                    <td class="text-nowrap">@{{ wave.expressPrinting }}</td>{{--快递单号打印人--}}
                    <td class="text-muted">@{{ wave.expressPrintTime }}</td>{{--快递单号打时间--}}
                    @can("订单管理-波次-重置打印")
                    <td class="text-center">
                        <button :disabled="!( wave.UdfPrintFlag2 === 'Y')" type="button" class="btn btn-sm btn-outline-dark text-nowrap" :data-value="wave.waveNo" @click="singleCancelPrint($event)">重置</button>
                    </td>
                    @endcan
                </tr>
            </table>
            <button type="button" class="btn btn-sm " @click="pervPage" :class="'{{$param['currPage']}}'> 1? 'btn-outline-info ':'disabled'" {{--disabled="'{{$param['currPage']}}'> 1?'':true"--}}>上一页</button>
            <button type="button" class="btn btn-sm " @click="nextPage" :class="'{{$param['currPage']}}'<'{{$param['pageTotal']}}'?'btn-outline-info':'disabled'" :disabled="currPage == pageTotal">下一页</button>
            <input @keyup.enter="pageTurning($event)" class="form-control-sm ml-3 tooltipTarget"
                   :placeholder="'当前页数：'+'{{$param['currPage']}}'+'/'+'{{$param['pageTotal']}}'" title="去往指定页">
            <span class="text-muted m-1">共 {{$param['count']}} 条 </span>
        </div>
    </div>
@endsection

@section("lastScript")
    <script type="text/javascript" src="{{mix('js/queryForm/queryForm.js')}}"></script>
    <script>
        let vueList = new Vue({
            el: "#wave_div",
            data: {
                waves: [
                        @foreach($waves as $wave)
                    {
                        waveNo: '{{$wave->waveno}}',
                        waveStatus: '{{$wave->wavestatus}}',
                        codename_c: '{{$wave->codename_c}}',
                        descr: '{{$wave->descr}}',
                        descr_c: '{{$wave->descr_c}}',
                        addTime: '{{$wave->addtime}}',
                        addWho: '{{$wave->addwho}}',
                        waveRule: '{{$wave->waverule}}',
                        waveDispatchId: '{{$wave->wavedispatchid}}',
                        userDefine1: '{{$wave->userdefine1}}',
                        userDefine2: '{{$wave->userdefine2}}',
                        pickerPrint: '{{$wave->pickerPrint}}',
                        pickerPrintTime: '{{$wave->pickerPrintTime}}',
                        expressPrinting: '{{$wave->expressPrinting}}',
                        expressPrintTime: '{{$wave->expressPrintTime}}',
                        UdfPrintFlag2:'{{$wave->udfprintflag2}}'
                    },
                    @endforeach
                ],
                form: '',
                checkData: [],
                pageTotal:'{{$param['pageTotal']}}',
                currPage:'{{$param['currPage']}}',
                selectTr:'',
                batchCodes:"",
            },
            mounted: function () {
                $('#wave_div').removeClass('d-none')
                let data = [[
                    {name: 'start_time', type: 'dateTime', tip: '选择显示指定日期的起始时间', placeholder: ''},
                    {name: 'end_time', type: 'dateTime', tip: '选择显示指定日期的结束时间', placeholder: ''},
                    {name: 'wave_num', type: 'input', tip: '波次编号：如模糊搜索需要在条件前后输入%号，回车提交', placeholder: '波次编号'},
                ]];
                this.form = new query({
                    el: '#form_div',
                    condition: data,
                });
                this.form.init();
                $(".tooltipTarget").tooltip({'trigger': 'hover'});
            },
            methods: {
                repairBatch(){
                    if (!this.batchCodes) return;
                    window.tempTip.postBasicRequest("{{url('order/wave/repairBatch')}}",{"codes":this.batchCodes.split(",")},res=>{
                        return res;
                    },true);
                },
                singleCancelPrint: function ($event) {
                    let ids = $($event.target).attr("data-value");
                    if (ids) {
                        this.cancelPrint(ids);
                    }
                },
                batchCancelPrint: function () {
                    if (this.checkData === 0) {
                        tempTip.show('没有勾选记录');
                        return;
                    }
                    let ids = this.getCheckedIds();
                    this.cancelPrint(ids);
                },
                cancelPrint: function (ids, type = 'string') {
                    let _this = this;
                    tempTip.setDuration(99999)
                    tempTip.waitingTip('取消中，请稍候')
                    axios.post("{{url("order/wave/cancelPrinting")}}", {ids: ids}).then(function (res) {
                        tempTip.setDuration(5000)
                        tempTip.cancelWaitingTip();
                        if (res.data.success) {
                            _this.waves.forEach(function (wave) {
                                if (ids.includes(wave.waveNo)) {
                                    wave.expressPrinting = '';
                                    wave.expressPrintTime = '';
                                    wave.UdfPrintFlag2 = 'N';
                                }
                            })
                            tempTip.setDuration(3000);
                            tempTip.showSuccess('重置打印成功！');
                            if (type === 'array') {
                                _this.checkData = [];
                            }
                            $(".checkItem").prop("checked",false);
                        } else {
                            tempTip.setDuration(2500);
                            tempTip.show('标记勾选内容重置打印失败，错误：' + res.data.fail_info);
                        }
                    }).catch(function (err) {
                        tempTip.setDuration(4000);
                        tempTip.show('网络错误：' + err);
                    });
                },
                pageTurning: function (event) {
                    let page = $(event.target).val();
                    if (!page) {
                        return;
                    }
                    window.location = this.form.goPage(page);
                },
                pervPage() {
                    window.location = this.form.pervPage();
                },
                nextPage() {
                    window.location = this.form.nextPage();
                },
                exportExcel(string = 'all'){
                    // let data = this.getSearch();
                    let search = '';
                    if(string === "all"){
                    }else if(string === 'pitch'){
                        if(this.getCheckedIds().length === 0){
                            tempTip.show('没有勾选记录');
                            return;
                        }
                        if(this.checkData){
                            let seachs =this.checkData.map(function (value) {
                                return "'"+value+"'";
                            })
                            search = "wave_num="+this.checkData.join(',');
                        }
                    }
                    let url = window.location.search ;
                    url = url.length< 2 ? '' : url.substring(1);
                    window.open("{{url('order/wave/exportExcel?')}}"+search+url);
                },
                getSearch(){
                    let search = window.location.search,data = {};
                    if(!search || search.length <=1 ){
                        return {};
                    }
                    let index =search.indexOf("?");
                    search = (search.substr(index)).split('&');

                    search.forEach(function(map){
                        let arr = map.split('=');
                        let key = arr[0],value = arr[2];
                        if(value.include(',')){
                            value = value.split(',');
                        }
                        data[key] = value;
                    });
                    return data;
                },
                checkAll(){
                    let checked = $("#all").is(":checked");
                    $(".checkItem").prop("checked",checked === true);
                    if(checked){
                        this.checkData = this.getCheckedIds();
                    }else{
                        this.checkData = [];
                    }
                },

                getCheckedIds(){
                    // HACK
                    let values = [];
                    let items = $(".checkItem:checked");
                    let len = items.length,index =0;
                    for (index =0;index <len;index++ ){
                        values.push($(items[index]).val());
                    }
                    return values;
                },
                selectedColor(waveNo){
                    if(waveNo === this.selectedWaveNo){
                        this.selectedWaveNo = '';
                        return;
                    }
                    this.selectedWaveNo = waveNo;
                }
            }
        });
    </script>
@endsection