@extends('layouts.app')

@section('content')
    <div id="nav2">
        @component('process.menu')@endcomponent
    </div>
    <div class="container-fluid mt-3" id="list">
        <div class="card col-md-8 offset-md-2">
            <div class="card-body">
                <div class="form-group row">
                    <label class="col-3 col-form-label text-right" >单据号</label>
                    <input v-model="process.wms_code" class="form-control col-6 " :class="error.wms_code && error.wms_code.length>0 ? 'is-invalid' :''">&nbsp;&nbsp;&nbsp;
                    <input class="btn btn-info col-2" type="button" @click="addProcessContent()" value="新增库单据">
                    <span v-if="error.wms_code && error.wms_code.length>0" class="invalid-feedback col-7 offset-3 mt-0" role="alert">
                        <strong>@{{ error.wms_code[0] }}</strong>
                    </span>
                </div>
                <div class="form-group row" v-if="processContents.length>0" v-for="processContent in processContents" >
                    <div class="col-8 offset-md-3 pl-0 pt-2 border  rounded" :style="processContent.addBtnShow?'': 'opacity:0.88;background-color:#f5f5f5;transform:scale(0.9)'">
                        <div class="row pt-2">
                            <label class="col-3 col-form-label text-right">单据号@{{ processContent.i }}</label>
                            <b class="col-7">@{{ processContent.wms_code }}</b>
                        </div>
                        <div class="row pt-2" v-if="processContent.addBtnShow">
                            <label class="col-3 col-form-label text-right">选择商品</label>
                            <span class=" col-9 input-group" style="max-height: 150px; overflow-y: scroll;border-radius:5px;opacity:1.5;text-align: center;">
                                <ul class="list-group tooltipTarget" title="双击选择商品" style="width: 100%" onselectstart="return false;">
                                    <li v-for="commodity in processContent.commodities" :id="commodity.id" class="list-group-item list-group-item-action p-0 m-0"
                                        @dblclick="selectedCommodity(commodity,processContent.wms_code)" :class="processContent.commodity_id && processContent.commodity_id==commodity.id && processContent.lineNo==commodity.lineNo? 'active' :''">
                                        <p class="form-inline" style="cursor: default;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"><small style="overflow: hidden;" :title="commodity.name" class="text-left text-info col-6">@{{ commodity.name }}</small>
                                            <small class="text-left  col-6" style="overflow: hidden;">
                                                <a v-for="barcode in commodity.barcodes">@{{ barcode.code }}&nbsp;&nbsp;&nbsp;</a>
                                            </small></p></li>
                                </ul>
                            </span>
                        </div>
                        <div class="row pt-2">
                            <label class="col-3 col-form-label text-right">商品名</label>
                            <b  class="col-7">@{{ processContent.commodity_name }}</b>
                        </div>
                        <div class="row pt-2">
                            <label class="col-3 col-form-label text-right">条码</label>
                            <ul class="p-0 m-0 ml-3 list-unstyled list-inline" v-if="processContent.commodity_barcodes && processContent.commodity_barcodes.length>0">
                                <li v-for="barcode in processContent.commodity_barcodes"><small>@{{ barcode.code }}</small></li>
                            </ul>
                        </div>

                        <div class="row pt-2">
                            <label class="col-3 col-form-label text-right">SKU</label>
                            <b  class="col-7">@{{ processContent.commodity_sku }}</b>
                        </div>
                        <div class="row pt-2">
                            <label class="col-3 col-form-label text-right">单据类型</label>
                            <select  disabled v-model="processContent.bill_type" class="col-7 form-control"
                                     :class="processContentError[processContent.wms_code] && processContentError[processContent.wms_code].bill_type ? 'is-invalid' :''">
                                <option value="移库单">移库单</option>
                                <option value="入库单">入库单</option>
                                <option value="出库单">出库单</option>
                            </select>
                        </div>
                        <div  class="row pt-2">
                            <label class="col-3 col-form-label text-right">数量</label>
                            <input :readonly="!processContent.addBtnShow" v-model="processContent.amount" type="text" class="form-control col-7"
                                   :class="processContentError[processContent.wms_code] && processContentError[processContent.wms_code].amount ? 'is-invalid' :''">
                            <span v-if="processContentError[processContent.wms_code] && processContentError[processContent.wms_code].amount" class="invalid-feedback col-7 offset-3 mt-0" role="alert">
                                <strong>@{{ processContentError[processContent.wms_code].amount[0] }}</strong>
                            </span>
                        </div>
                        <div class="col-8 offset-2 pt-2" v-if="processContent.addBtnShow">
                            <input type="button" @click="confirmStore(processContent.wms_code,processContent.commodity_id,processContent.amount)" value="确定新增" class="btn btn-primary form-control">
                        </div>
                        <div class="col-8 offset-2 pt-2 pb-2">
                            <input type="button" @click="deleteProcessContent(processContent.wms_code)" value="删除" class="btn btn-danger form-control">
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-3 col-form-label text-right" >货主</label>
                    <input readonly v-if="processContents.length>0" :value="processContents[processContents.length-1].owner_name" class="form-control col-7" :class="error.owner_id && error.owner_id.length>0 ? 'is-invalid' :''">
                    <span v-if="error.owner_id && error.owner_id.length>0" class="invalid-feedback col-7 offset-3 mt-0" role="alert">
                        <strong>@{{ error.owner_id[0] }}</strong>
                    </span>
                </div>
                <div class="form-group row">
                    <label class="col-3 col-form-label text-right" >加工类型</label>
                    <select v-model="process.process_method_id" class="form-control col-7" :class="error.process_method_id && error.process_method_id.length>0 ? 'is-invalid' :''">
                        <option  v-for="processMethod in processMethods" :value="processMethod.id">@{{ processMethod.name }}</option>
                    </select>
                </div>
                <div class="form-group row">
                    <label class="col-3 col-form-label text-right" >加工数量</label>
                    <input v-model="process.amount" type="text" class="form-control col-7" :class="error.amount && error.amount.length>0 ? 'is-invalid' :''">
                    <span v-if="error.amount && error.amount.length>0" class="invalid-feedback col-7 offset-3 mt-0" role="alert">
                        <strong>@{{ error.amount[0] }}</strong>
                    </span>
                </div>
                <div class="form-group row">
                    <label class="col-3 col-form-label text-right" >单价</label>
                    <input v-model="process.unit_price" type="text" class="form-control col-7" :class="error.unit_price && error.unit_price.length>0 ? 'is-invalid' :''">
                    <span v-if="error.unit_price && error.unit_price.length>0" class="invalid-feedback col-7 offset-3 mt-0" role="alert">
                        <strong>@{{ error.unit_price[0] }}</strong>
                    </span>
                </div>
                <div class="form-group row">
                    <label class="col-3 col-form-label text-right" >备注(选填)</label>
                    <textarea v-model="process.remark" type="text" class="form-control col-7"></textarea>
                </div>
                <div class="form-group row">
                    <label class="col-3 col-form-label text-right" >引用教程(选填)</label>
                    <span class=" col-7 input-group p-0" style="max-height: 150px; overflow-y: scroll;border-radius:5px;opacity:0.7;text-align: center;">
                        <ul class="list-group" style="width: 100%" onselectstart="return false;">
                            <li v-for="tutorial in tutorials" :data-original-title="tutorial.style ? '双击删除教程' :'双击添加教程'"  :id="tutorial.id" class="tooltipTarget list-group-item list-group-item-action p-0 m-0"
                                @dblclick="selectedTutorial(tutorial)" :class="tutorial.style ? 'active' :''">
                                <p class="form-inline" style="cursor: default;">@{{ tutorial.name }}</p></li>
                        </ul>
                        <div class="mt-0 form-inline">
                            <button type="button" @click="addTutorial()"  class="btn btn-sm btn-outline-primary">新增教程</button>
                            <button type="button" @click="refreshTutorial()" class="btn btn-sm btn-outline-secondary ml-2">刷新教程</button>
                        </div>
                    </span>
                </div>
                <div class="form-group row">
                    <div class="col-8 offset-2">
                        <input type="button" @click="submit()" class="btn btn-success form-control" value="提交">
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        let vueList=new Vue({
            el:'#list',
            data:{
                process:{wms_code:'',owner_id:'',process_method_id:'',unit_price:'',remark:'',amount:''},
                error:{wms_code:[],owner_id:[],process_method_id:[],unit_price:[],amount:[]},
                processContentError:[],
                processContents:[],
                processMethods:[
                    @foreach($processMethods as $processMethod)
                    {!! $processMethod !!},
                    @endforeach
                ],
                tutorials:[],
                selectedTutorials:[],
                msg:false,
            },
            watch:{
                processContents:{
                    handler(){
                        if (this.processContents.length===1){
                            this.process.owner_id=this.processContents[(this.processContents.length)-1].owner_id;
                            this.getTutorial(this.processContents[(this.processContents.length)-1].owner_id);
                        }
                    }
                },
            },
            mounted:function(){
                $(".tooltipTarget").tooltip({'trigger':'hover'});
            },
            methods:{
                //新增库单据
                addProcessContent(){
                    let _this=this;
                    let wms_code=_this.process.wms_code;
                    if (!wms_code){
                        tempTip.setDuration(3000);
                        tempTip.show('未输入单据号！');
                        return;
                    }
                    if (_this.processContents.length>0 && _this.processContents[_this.processContents.length-1].addBtnShow) {
                        tempTip.setDuration(3000);
                        tempTip.show('下方单据未操作无法录入第二单！');
                        return;
                    };
                    let isUnique=true;
                    _this.processContents.every(function (processContent) {
                        if (processContent.wms_code==wms_code){
                            isUnique=false;
                            return false;
                        }
                        return  true;
                    });
                    if (!isUnique){
                        tempTip.setDuration(3000);
                        tempTip.show('下方已添加该单据！');
                        return;
                    }
                    if (_this.msg){
                        tempTip.setDuration(999999);
                        tempTip.waitingTip("数据读取中......请稍后！");
                        return;
                    }
                    _this.msg=true;
                    axios.post('{{url("api/thirdPart/flux/process/getProcessContent")}}',{wms_code:wms_code})
                        .then(function (response) {
                            console.log(response.data);
                            if (_this.msg)_this.msg=false;
                            tempTip.cancelWaitingTip();
                            tempTip.setDuration(3000);
                            if (response.data.error){
                                tempTip.setDuration(3000);
                                tempTip.show(response.data.error);
                                return;
                            }
                            let processContent={};
                            processContent['wms_code']=response.data.wms_code;
                            processContent['owner_name']=response.data.owner_name;
                            processContent['owner_id']=response.data.owner_id;
                            processContent['commodities']=response.data.commodities;
                            processContent['commodity_id']='';
                            processContent['commodity_name']='';
                            processContent['commodity_barcodes']=[];
                            processContent['commodity_sku']='';
                            processContent['bill_type']=response.data.bill_type;
                            processContent['amount']='';
                            processContent['lineNo']='';
                            processContent['addBtnShow']=true;
                            _this.processContents.unshift(processContent);
                        }).catch(function (err) {
                        if (_this.msg)_this.msg=false;
                            tempTip.cancelWaitingTip();
                            tempTip.setDuration(3000);
                            tempTip.show('查询单据号失败！网络错误：'+err);
                        });
                },
                //确定新增
                confirmStore(wms_code,commodity_id,amount){
                    if (!commodity_id) {
                        tempTip.setDuration(2000);
                        tempTip.show("尚未选择商品！");
                        return;
                    }
                    if (!amount) {
                        tempTip.setDuration(2000);
                        tempTip.show("尚未填写数量！");
                        return;
                    }
                    let _this=this;
                    _this.processContents.every(function (processContent) {
                        if (processContent.wms_code==wms_code) {
                            processContent.addBtnShow=false;
                            return false;
                        }
                        return  true;
                    });
                },
                //删除新增
                deleteProcessContent(wms_code){
                    let _this=this;
                    _this.processContents.every(function (processContent,i) {
                        if (processContent.wms_code==wms_code) {
                            _this.processContents.splice(i,1);
                            return false;
                        }
                        return  true;
                    });
                },
                //获取教程
                getTutorial(owner_id){
                    let _this=this;
                    axios.post("{{url('process/ownerGetTutorials')}}"+"/"+owner_id)
                        .then(function (response) {
                            _this.tutorials=[];
                            response.data.forEach(function (tutorialOne) {
                                let tutorial={};
                                tutorial['id']=tutorialOne.id;
                                tutorial['name']=tutorialOne.name;
                                tutorial['style']=false;
                                _this.tutorials.push(tutorial);
                            });
                        }).catch(function (err) {
                        tempTip.setDuration(5000);
                        tempTip.show('获取教程失败！网络错误：'+err);
                        });
                },
                //选择商品
                selectedCommodity(commodity,wms_code){
                    let _this=this;
                    _this.processContents.every(function (processContent) {
                       if (processContent.wms_code==wms_code){
                           processContent.commodity_id=commodity.id;
                           processContent.commodity_name=commodity.name;
                           processContent.commodity_barcodes=commodity.barcodes;
                           processContent.commodity_sku=commodity.sku;
                           processContent.amount=commodity.amount;
                           processContent.lineNo=commodity.lineNo;
                           return false;
                       }
                       return  true;
                    });
                },
                //选择教程
                selectedTutorial(tutorial){
                    let _this=this;
                    if (tutorial.style){
                        for (let i=0;i<_this.selectedTutorials.length;i++){
                            if (_this.selectedTutorials[i]==tutorial.id) {
                                _this.selectedTutorials.splice(i,1);
                                break;
                            }
                        }
                        _this.tutorials.every(function (tutorialOne) {
                            if (tutorialOne.id==tutorial.id){
                                tutorialOne.style=false;
                                return false;
                            }
                            return  true;
                        });
                    }else {
                        _this.selectedTutorials.push(tutorial.id);
                        _this.tutorials.every(function (tutorialOne) {
                            if (tutorialOne.id==tutorial.id){
                                tutorialOne.style=true;
                                return false;
                            }
                            return  true;
                        });
                    }
                    setTimeout(function(){
                        $(".tooltipTarget").tooltip({'trigger':'hover'});
                    },10);
                },
                //异补提交
                submit(){
                    let _this=this;
                    let owner_id=_this.process.owner_id;
                    let process_method_id=_this.process.process_method_id;
                    let unit_price=_this.process.unit_price;
                    let remark=_this.process.remark;
                    let amount=_this.process.amount;
                    _this.processContentError=[];
                    axios.post('{{url("process")}}',{
                        owner_id:owner_id,process_method_id:process_method_id,unit_price:unit_price,
                        remark:remark,amount:amount,processContents:_this.processContents,tutorials:_this.selectedTutorials
                    }).then(function (response) {
                        if (response.data.error && response.data.data=="process"){
                            _this.error=response.data.error;
                            return;
                        }
                        _this.error={wms_code:[],owner_id:[],process_method_id:[],unit_price:[],amount:[]};
                        if (response.data.error){
                            _this.processContentError=response.data.error;
                            return;
                        }
                        location.href="{{url('process')}}";
                    }).catch(function (err) {
                        tempTip.setDuration(5000);
                        tempTip.show('提交失败！网络错误：'+err);
                    });
                },
                //去往新增教程
                addTutorial(){
                    window.open("{{url('maintenance/tutorial/create?owner_id=')}}"+this.process.owner_id);
                },
                //刷新教程
                refreshTutorial(){
                    if (this.processContents.length>=1 && this.processContents[(this.processContents.length)-1].owner_id){
                        this.getTutorial(this.processContents[(this.processContents.length)-1].owner_id);
                    }
                }
            },
        });
    </script>
@endsection