@extends('layouts.app')
@section('title')盘收一体-任务@endsection

@section('content')
<span id="nav2">
    @component('store.menu')@endcomponent
    @component('store.checkingReceive.menu')@endcomponent
</span>
<div id="container" class="d-none container-fluid">
    @include('store.checkingReceive._modal')

    <div class="modal fade" id="import" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-body" style="text-align:center;height: 200px">
                    <button type="button" id="popover" class="btn btn-danger"
                            data-container="body" data-toggle="popover" data-placement="bottom"
                            :data-content="popoverContent" data-html="true">
                        部分数据导入失败
                    </button>
                    <div class="mt-3">
                        <label class="text-muted">表头字段示意(蓝色为必填项)：</label><br>
                        <label><b class="text-primary">货主</b>，SKU，商品名称，<b class="text-primary">条码</b>，<b class="text-primary">数量</b>，生产日期，失效日期，批号，唯一码</label><br>
                        <label>
                            <input name="file" hidden type="file" class="col-5" id="excelFile" @change="getFile($event)"
                                   {{--accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"--}}
                                   accept=".csv, .xlsx, .xls">
                        </label>
                        <button class="btn btn-dark col-5" @click="selectFile()">选择Excel文件</button><br>
                        <small class="text-primary">@{{ excel.file ? excel.file.name : '' }}</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="col-12 btn btn-success" @click="importMission()">开始导入</button>
                </div>
            </div>
        </div>
    </div>

    <div id="form_div"></div>
    <div class="ml-2">
        <button class="btn btn-sm btn-outline-info" @click="openImport()">导入</button>
    </div>

    <table class="table table-sm text-nowrap table-bordered d-none" id="headerRoll"></table>
    <table class="table table-striped table-sm text-nowrap table-hover mt-1" id="headerParent">
        <tr id="header"></tr>
        <tr v-for="(storeCheckingReceive,i) in storeCheckingReceives">
            <td>@{{ i+1 }}</td>
            <td>@{{ storeCheckingReceive.id }}</td>
            <td>@{{ storeCheckingReceive.owner_name }}</td>
            <td class="font-weight-bold">@{{ storeCheckingReceive.status }}</td>
            <td class="text-muted">@{{ storeCheckingReceive.is_receive_diff }}</td>
            <td>@{{ storeCheckingReceive.asn }}</td>
            <td>@{{ storeCheckingReceive.is_asn_diff }}</td>
            <td>@{{ storeCheckingReceive.created_at }}</td>
            <td>
                @can('入库管理-盘收一体-盘收')<a v-if="storeCheckingReceive.status != '已收货'" target="_blank" :href="'{{url('store/checkingReceive/mission')}}/'+storeCheckingReceive.id">
                    <button class="btn btn-sm btn-outline-dark">盘收</button>
                </a>@endcan
                <a target="_blank" :href="'{{url('store/checkingReceive/mission')}}/'+storeCheckingReceive.id+'?is_show=false'">
                    <button class="btn btn-sm btn-outline-primary">查看</button>
                </a>
                @can('入库管理-盘收一体-盘收-编辑')
                <button v-if="storeCheckingReceive.status != '已收货'" class="btn btn-sm btn-outline-success" data-toggle="modal" data-target="#asnWindow" @click="thisIndex=i">
                    <span v-if="storeCheckingReceive.asn">重新</span>匹配ASN号
                </button>@endcan
                @can('入库管理-快速入库')
                <button v-if="storeCheckingReceive.status=='已ASN入库' && storeCheckingReceive.is_receive_diff != '是' && storeCheckingReceive.is_asn_diff != '是' && storeCheckingReceive.status != '已收货'"
                        class="btn btn-sm btn-outline-info" @click="receipt(i)">快速入库</button>
                @endcan
            </td>
        </tr>
    </table>
    {{$storeCheckingReceives->appends($params)->links()}}
</div>
@stop

@section('lastScript')
    <script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/queryForm.js')}}"></script>
    <script>
        let vue = new Vue({
            el:"#container",
            data:{
                storeCheckingReceives:[
                    @foreach($storeCheckingReceives as $storeCheckingReceive)
                    {id:'{{$storeCheckingReceive->id}}',owner_name:'{{$storeCheckingReceive->owner ? $storeCheckingReceive->owner->name : ''}}',
                        created_at:'{{$storeCheckingReceive->created_at}}',status:'{{$storeCheckingReceive->status}}',
                        is_receive_diff:'{{$storeCheckingReceive->is_receive_diff}}',asn:'{{$storeCheckingReceive->asn}}',
                        is_asn_diff:'{{$storeCheckingReceive->is_asn_diff}}',
                    },
                    @endforeach
                ],
                owners:[
                    @foreach($owners as $owner)
                    {name:'{{$owner->id}}',value:'{{$owner->name}}'},
                    @endforeach
                ],
                checkData:[],
                sum:Number('{{$storeCheckingReceives->total()}}'),
                excel : {
                    file : null,
                },
                popoverContent:'',
                thisIndex : '',
                asn : '',
            },
            mounted(){
                $('#container').removeClass('d-none');
                $(".tooltipTarget").tooltip({'trigger':'hover'});
                let _this = this;
                let data = [[
                    {name:'created_at_start',type:'dateTime',tip:'选择显示指定日期的起始时间'},
                    {name:'created_at_end',type:'dateTime',tip:'选择显示指定日期的结束时间'},
                    {name:'owner_id',type:'select_multiple_select',tip:['输入关键词快速定位下拉列表，回车确定','选择要显示的客户'],
                        placeholder:['货主','定位或多选货主'],data:_this.owners},
                    {name:'asn',type:'input',tip:'ASN单号：可在两侧增加百分号(%)进行模糊搜索',placeholder:'ASN单号'},
                ]];

                _this.form = new query({
                    el:'#form_div',
                    condition:data,
                });
                _this.form.init();
                let column = [
                    {name:'index',value: '序号', neglect: true},
                    {name:'id',value: 'ID', neglect: true},
                    {name:'owner_name',value: '货主'},
                    {name:'status',value: '状态'},
                    {name:'is_receive_diff',value: '导入差异'},
                    {name:'asn',value: 'ASN单号'},
                    {name:'is_asn_diff',value: 'ASN差异'},
                    {name:'created_at',value: '创建时间'},
                    {name:'operating',value: '操作', neglect: true},
                ];
                let header = new Header({
                    el: "#header",
                    column: column,
                    data: _this.storeCheckingReceives,
                    fixedTop:($('#form_div').height())+2,
                    restorationColumn: 'id',
                });
                header.init();
            },
            methods:{
                checkAll(event){
                    if (event.target.checked){
                        this.packages.forEach((el)=>{
                            if (this.checkData.indexOf(el.id) === '-1'){
                                this.checkData.push(el.id);
                            }
                        });
                    }else this.checkData = [];
                },
                getFile(e){
                    this.excel.file = e.target.files[0];
                },
                openImport(){
                    $("#popover").attr('hidden','hidden');
                    $('#import').modal('show');
                },
                importMission(){
                    if (!this.excel.file){
                        tempTip.setDuration(3000);
                        tempTip.setIndex(1099);
                        tempTip.showSuccess('未选择任何文件!');
                        return;
                    }
                    let formData = new FormData();
                    formData.append("file",this.excel.file);
                    axios.post('{{url('store/checkingReceive/mission/import')}}',formData,{
                        'Content-Type':'multipart/form-data'
                    })
                    .then(res=>{
                        if (res.data.success){
                            let receive = res.data.data;
                            let storeCheckingReceive = {
                                id:receive.id,owner_name:receive.owner_name,created_at:receive.created_at,
                                status:receive.status,is_receive_diff:receive.is_receive_diff,asn:receive.asn,
                                is_asn_diff:receive.is_asn_diff
                            };
                            this.storeCheckingReceives.unshift(storeCheckingReceive);
                            if (res.data.errors.length < 1) $("#import").modal('hide');
                            else this.writeErrorText(res.data.errors);

                            tempTip.setDuration(2000);
                            tempTip.setIndex(1099);
                            tempTip.showSuccess("任务导入成功");
                            return true;
                        }
                        if (res.data.errors && res.data.errors.length > 0){
                            this.writeErrorText(res.data.errors)
                            return true;
                        }
                        tempTip.setDuration(3000);
                        tempTip.setIndex(1099);
                        tempTip.show(res.data.data);
                    }).catch(err=> {
                        tempTip.setDuration(3000);
                        tempTip.setIndex(1099);
                        tempTip.show("网络错误："+err);
                    })
                },
                writeErrorText(errors){
                    let content = '';
                    for (let i in errors){
                        content += errors[i]+"</br>";
                    }
                    this.popoverContent = content;
                    setTimeout(function () {
                        $("#popover").removeAttr('hidden').popover('show');
                    },0);
                },
                selectFile(){
                    $('#excelFile').trigger('click');
                },
                matchASN(){
                    if (!this.asn){
                        window.tempTip.setIndex(1099);
                        window.tempTip.setDuration(3000);
                        window.tempTip.show('请输入ASN号！');
                        return;
                    }
                    let storeCheckingReceive = this.storeCheckingReceives[this.thisIndex];
                    axios.post('{{url('store/checkingReceive/mission/matchASN')}}',{asn:this.asn,mission_id:storeCheckingReceive.id})
                        .then(res=>{
                            if (res.data.success){
                                window.tempTip.setIndex(1099);
                                window.tempTip.setDuration(2000);
                                if (storeCheckingReceive.asn) window.tempTip.showSuccess("重新匹配ASN成功");
                                else window.tempTip.showSuccess("匹配ASN成功");

                                console.log(res.data.data);
                                storeCheckingReceive.status = res.data.data.status;
                                storeCheckingReceive.asn = res.data.data.asn;
                                storeCheckingReceive.is_asn_diff = res.data.data.is_asn_diff;
                                console.log(storeCheckingReceive);
                                $("#asnWindow").modal('hide');
                                return;
                            }
                            window.tempTip.setIndex(1099);
                            window.tempTip.setDuration(3000);
                            window.tempTip.show(res.data.data);
                        }).catch(err=>{
                        window.tempTip.setIndex(1099);
                        window.tempTip.setDuration(3000);
                        window.tempTip.show("网络错误："+err);
                    });
                },
                receipt(index){
                    window.tempTip.confirm('是否要进行快速收货？',()=>{
                        window.tempTip.setDuration(9999);
                        window.tempTip.waitingTip("执行中......");
                        let storeCheckingReceive = this.storeCheckingReceives[index];
                        axios.post('{{url('store/checkingReceive/mission/receipt')}}',{id:storeCheckingReceive.id})
                            .then(res=>{
                                if (res.data.success) {
                                    window.tempTip.cancelWaitingTip();
                                    window.tempTip.setDuration(2000);
                                    window.tempTip.showSuccess("快速收货完成!");
                                    storeCheckingReceive.status = res.data.data.status;
                                    return;
                                }
                                window.tempTip.cancelWaitingTip();
                                window.tempTip.setDuration(3000);
                                window.tempTip.show(res.data.data);
                            }).catch(err=>{
                            window.tempTip.cancelWaitingTip();
                            window.tempTip.setDuration(3000);
                            window.tempTip.show("网络错误："+err);
                        })
                    });
                },
            },
        });
    </script>
@stop