@extends('layouts.app')
@section('title')退回件-导入@endsection
@section('content')
    <div class="container-fluid" id="issue_import_div">
        <div class="card col-md-8 offset-md-2">
            <div class="card-body">
                @can('退货管理-编辑')
                    <div class="form-group row text-center">
                        <div class="col-12 text-danger">
                            退回单号修改<br/>
                            【退回单号，订单号】 必填项;【到付金额】 非必填项<br/>
                            <span class="text-muted" style="opacity:0.7">
                                不支持空格分隔，只支持中英文逗号分隔<br/>
                                如果在导入后出现部分数据导入失败，修改对应错误的数据继续导入即可.
                            </span>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-8 offset-2">
                            <button type="button" class="btn form-control btn-primary"  @click="showPasteDataModal">文本导入</button>
                        </div>
                    </div>
                    <hr/>
                @endcan

                </form>
            </div>
        </div>
        <div class="modal fade" id="pasteData" role="dialog" tabindex="-1" aria-labelledby="pasteDataTetlie" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <div class="row modal-title font-weight-bold w-100 text-nowrap ml-1 noselect" id="pasteDataTitle">
                            <span v-for="(row,i) in rows" draggable="true"
                                  @drop="drop($event,i)" @dragover="dragover($event)" @dragstart="dragstart($event,i)"
                                  class="col-4 border text-center" style="cursor: move"
                                  :class="requiredRows.includes(row)?'text-danger':''">@{{ row }}</span>
                        </div>
                    </div>
                    <div class="modal-body text-center">
                        <button type="button" id="popover" class="btn btn-danger" v-if="popoverContent"
                                data-container="body" data-toggle="popover" data-placement="bottom"
                                :data-content="popoverContent" data-html="true">
                            部分数据导入失败
                        </button>
                        <textarea id="pasteDataText" class="w-100" style="height: 400px" v-model="pasteDataText"
                                  @keydown.tab="forbidTab($event)" @keyup.tab="replaceSpacing()"
                                  placeholder="内容可为EXCEL复制,也可手动输入使用“TAB”缩进符区分列，以表头顺序为准" @click="hidePopover"></textarea>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" @click="importPasteData">开始导入</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        let listVue = new Vue({
            el:'#issue_import_div',
            data:{
                rows:['退回单号','订单号','到付金额'],
                requiredRows:['退回单号','订单号','到付金额'],
                popoverContent:'',
                pasteDataText: '',
            },
            mounted:function(){
                $('[data-toggle="popover"]').popover();
            },
            methods:{
                showPasteDataModal(){
                    $('#popover').attr('hidden','hidden')
                    $('#pasteData').modal('show')
                },
                drop(e,index){
                    e.preventDefault();
                    if (this.dom !== e.target.innerHTML){
                        this.dom.innerHTML = e.target.innerHTML;
                        let temp=JSON.parse(JSON.stringify(this.rows[index]));
                        this.$set(this.rows,index,this.rows[e.dataTransfer.getData('text/html')]);
                        this.$set(this.rows,Number(e.dataTransfer.getData('text/html')),temp);
                    }
                },
                dragover(e){
                    e.preventDefault();
                },
                dragstart(e,index){
                    this.dom = e.target.innerHTML;
                    e.dataTransfer.setData("text/html",index);
                },
                importPasteData(){
                    if(!this.pasteDataText){
                        tempTip.setDuration(2000)
                        tempTip.show('导入文本不能为空')
                    }
                    let _this = this
                    let data = {dataText:this.pasteDataText}
                    tempTip.setDuration(99999)
                    tempTip.setIndex(1051)
                    tempTip.waitingTip('正在执行中,请稍后')
                    axios.post('{{url('apiLocal/rejectedBill/importRejectedNumber')}}',data).then(function (response) {
                        tempTip.cancelWaitingTip()
                        if(response.data.success){
                            $('#pasteData').modal('hide')
                            tempTip.setDuration(2000)
                            tempTip.showSuccess('导入完毕')
                        }else{
                            let content = '';
                            for (const key in response.data.error) {
                                content+=key+':'+response.data.error[key] + "</br>"
                            }
                            _this.popoverContent = content
                            setTimeout(function () {
                                $("#popover").removeAttr('hidden').popover('show')
                            },1);
                        }
                    }).catch(function(error){
                        tempTip.cancelWaitingTip()
                        tempTip.setDuration(2000)
                        tempTip.show('导入失败'+error)
                    })
                },
                forbidTab(e){
                    e.preventDefault();
                },
                replaceSpacing(){
                    this.pasteDataText += "\t";
                },
                hidePopover(){
                    let _this = this;
                    setTimeout(function () {
                        _this.popoverContent = ''
                        $("#popover").removeAttr('hidden').popover('hide')
                    },1)
                }
            }
        });
    </script>
@endsection