@extends('layouts.app')
@section('title')问题件-编辑@endsection

@section('content')
    @component("order.issue.menu")
    @endcomponent
    <div class="container-fluid d-none" id="editOrderIssue">
        <div class="card col-md-8 offset-md-2 ">
            <div class="card-header">问题件修改</div>
            <input type="hidden" name="order_id" v-model="orderIssues.order_id">
            <input type="hidden" name="id" v-model="orderIssues.id">
            <input type="hidden" name="rejected_bill_id" v-model="orderIssues.rejected_bill_id">
            <input type="hidden" name="order_issue_type_id" v-model="orderIssues.order_issue_type_id">
            <input type="hidden" name="second_order_id" v-model="orderIssues.second_order_id">

            <div class="card-body">
{{--WMS订单号--}}
                <div class="form-group row">
                    <label for="name" class="col-2 col-form-label text-right">WMS订单号</label>
                    <div class="col-8">
                        <input type="text" class="form-control" name="name" v-model="order.code" disabled>
                    </div>
                </div>
{{--退回单号--}}
                <div class="form-group row">
                    <label class="col-2 col-form-label text-right">退回单号</label>
                    <div class="col-8">
                        <input type="text" class="form-control" name="" v-model="rejectedBill.logistic_number_return"
                               disabled>
                    </div>
                </div>

{{--处理状态--}}
                <div class="form-group row">
                    <label class="col-2 col-form-label text-right">处理状态</label>
                    <div class="col-8">
                        <select name="handle_status" class="form-control" disabled v-model="orderIssues.handle_status">
                            <option v-for="value in handleStatus" :value="value">@{{ value }}</option>
                        </select>
                    </div>
                </div>
{{--问题类别--}}
                <div class="form-group row">
                    <label class="col-2 col-form-label text-right">问题类别</label>
                    <div class="col-8">
                        <select name="order_issue_type_id" class="form-control" id="order_issue_type_id"
                                v-model="orderIssues.order_issue_type_id">
                            <option value></option>
                            <option v-for="type in orderIssueType" :value="type.id">@{{ type.name }}</option>
                        </select>
                    </div>
                </div>
{{--二次订单号--}}
                <div class="form-group row">
                    <label class="col-2 col-form-label text-right">二次订单号</label>
                    <div class="col-8">
                        <input type="text" name="second_order_id" class="form-control" v-model="secondOrder.code" @blur="getSecondOrder($event)">
                    </div>
                </div>
{{--二次运单号--}}
                <div class="form-group row">
                    <label class="col-2 col-form-label text-right">二次运单详情</label>
                    <div class="col-8">
                        <div class="alert alert-success" v-if="secondOrder.packages">
                            订单详情已填充
                        </div>
                        <div class="alert alert-secondary" v-else>
                            二次运单详情
                        </div>
                        <table class="table" v-if="secondOrder.packages">
                            <tr>
                                <th>条码</th><th>商品名</th><th>数量</th>
                            </tr>
                            <template v-for="package in secondOrder.packages">
                                <tr v-for="commodity in package.commodities">
                                    <td>@{{ commodity.commodity.sku }}</td>
                                    <td>@{{ commodity.commodity.name }}</td>
                                    <td>@{{ commodity.amount }}</td>
                                </tr>
                            </template>
                        </table>
                    </div>
                </div>
{{--最终状态--}}
                <div class="form-group row">
                    <label class="col-2 col-form-label text-right">处理结果说明</label>
                    <div class="col-8">
                        <textarea name="result_explain" class="form-control" v-model="orderIssues.result_explain"></textarea>
                    </div>
                </div>
{{--最终状态--}}
                <div class="form-group row">
                    <label class="col-2 col-form-label text-right">最终状态</label>
                    <div class="col-8">
                        <select name="final_status" class="form-control" v-model="orderIssues.final_status" id="final_status">
                            <option></option>
                            <option v-for="value in final_status" :value="value">@{{ value }}</option>
                        </select>
                    </div>
                </div>
{{--承运商赔偿金额--}}
                <div class="form-group row">
                    <label class="col-2 col-form-label text-right">承运商赔偿金额</label>
                    <div class="col-8">
                        <input type="number" name="logistic_indemnity_money" class="form-control" id="logistic_indemnity_money"
                               v-model="orderIssues.logistic_indemnity_money">
                    </div>
                </div>
{{--承运商快递减免--}}
                <div class="form-group row">
                    <label class="col-2 col-form-label text-right">承运商快递减免</label>
                    <div class="col-8">
                        <select name="logistic_express_remission" class="form-control"
                                v-model="orderIssues.logistic_express_remission">
                            <option value></option>
                            <option v-for="remission in logisticExpressRemission" :value="remission">@{{ remission }}
                            </option>
                        </select>
                    </div>
                </div>
{{--宝时赔偿金额--}}
                <div class="form-group row">
                    <label class="col-2 col-form-label text-right">宝时赔偿金额</label>
                    <div class="col-8">
                        <input type="number" name="baoshi_indemnity_money" class="form-control" id="baoshi_indemnity_money"
                               v-model="orderIssues.baoshi_indemnity_money">
                    </div>
                </div>
{{--宝时快递减免--}}
                <div class="form-group row">
                    <label class="col-2 col-form-label text-right">宝时快递减免</label>
                    <div class="col-8">
                        <select name="baoshi_express_remission" class="form-control" id="baoshi_express_remission"
                                v-model="orderIssues.baoshi_express_remission">
                            <option value></option>
                            <option v-for="remission in baoShiExpressRemission" :value="remission">@{{ remission }}
                            </option>
                        </select>
                    </div>
                </div>
{{--事故责任方--}}
                <div class="form-group row">
                    <label class="col-2 col-form-label text-right">事故责任方</label>
                    <div class="col-8">
                        <select name="user_workgroup_id" class="form-control" id="user_workgroup_id"
                                v-model="orderIssues.user_workgroup_id">
                            <option value></option>
                            <option v-for="workgroup in userWorkgroup" :value="workgroup.id">@{{ workgroup.name }}</option>
                        </select>
                    </div>
                </div>
{{--提交--}}
                <div class="form-group row">
                    <label class="col-2 col-form-label text-right"></label>
                    <div class="col-8">
                        <button type="submit" class="btn btn-success form-control" @click="orderIssueUpdate">提交修改
                        </button>
                    </div>
                </div>
            </div>
{{--deleteOrderIssue--}}
            <div class="modal fade" id="alertModal" tabindex="-1" role="dialog"  aria-labelledby="alertModalLabel" aria-hidden="true">
                <div class="modal-dialog  modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">提示</h5>
{{--                            <button type="button" class="close" data-dismiss="modal" aria-label="Close" >--}}
{{--                                <span aria-hidden="true">&times;</span>--}}
{{--                            </button>--}}
                        </div>
                        <div class="modal-body">
                            <div class="alert alert-success">
                                订单问题件已修改
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal" @click="backOrderIssueIndex">返回查询页面</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script type="text/javascript">
        let editVue = new Vue({
            el: '#editOrderIssue',
            data: {
                orderIssues: {!! $orderIssue!!},
                order: {!! $order !!},
                secondOrder: @if($secondOrder){!! $secondOrder !!}@else ''@endif,
                rejectedBill: @if($rejectedBill){!! $rejectedBill !!}@else ''@endif,
                owners:{!! $owners  !!},
                logistics:{!! $logistics !!},
                userWorkgroup: {!! $userWorkgroup !!},
                shops:{!! $shops !!},
                orderIssueType:{!! $orderIssueType !!},
                rejectingStatus: ['无', '未退回', '全部退回', '部分退回', '差异退回', '超量退回'],
                final_status: ['已解决', '待退回', '退回中',],
                logisticExpressRemission: ['原单减免', '部分减免', '全部减免'],
                baoShiExpressRemission: ['原单减免', '部分减免', '全部减免'],
                handleStatus: ['处理中', '已完结'],
            },
            mounted: function () {
                $("#editOrderIssue").removeClass('d-none');
                console.log(this.secondOrder);

            },
            watch:{
                secondOrder:{
                    handler:function(value){
                        if(value.code === ''){
                            this.secondOrder.packages = '';

                        }
                    },
                    deep:true,
                },
            },
            methods: {
                orderIssueUpdate() {
                    let data = this.orderIssues;
                    let arr = {
                        '问题类别':'order_issue_type_id',
                        '处理状态':'handle_status',
                        '处理结果说明':'result_explain',
                        '承运商赔偿金额':'logistic_indemnity_money',
                        '承运商快递减免':'logistic_express_remission',
                        '宝时赔偿金额':'baoshi_indemnity_money',
                        '宝时快递减免':'baoshi_express_remission',
                    }
                    axios.post('{{url("apiLocal/order/issue/update")}}', data).then(function (res) {
                        if (res.data.success) {
                            $('#alertModal').modal('show');
                        } else {
                            tempTip.setDuration(3000);
                            tempTip.show(res.data.errors[0][0]);
                            res.data.errors.forEach(function(item){
                                let target = $('#'+arr[item[1]]);
                                target.addClass('is-invalid').change(function(){
                                    target.removeClass('is-invalid');
                                });
                            })
                            $('#alertModal').modal('hide');
                        }
                    }).catch(function (err) {
                        tempTip.setDuration(4000);
                        tempTip.show('网络异常:' + err);
                        $('#alertModal').modal('hide');
                    });
                },
                getSecondOrder(e){
                    let _this = this;
                    let orderNo = $(e.target).val();
                    if(!orderNo){
                        return ;
                    }
                    if(orderNo){
                        let data = {WMSOrderNo:orderNo};
                        axios.post("{{url('apiLocal/order/issue/getOrderInfoByWMSOrderNo')}}",data).then(function(res){
                            if(res.data.success){
                                _this.secondOrder = res.data.data;
                                _this.orderIssues.second_order_id = res.data.data.id;
                                console.log(_this.orderIssues);
                            } else {
                                tempTip.setDuration(4000);
                                tempTip.show('查询订单信息出现异常:' + res.data.fail_info);
                            }
                        }).catch(function(err){
                            tempTip.setDuration(4000);
                            tempTip.show('网络异常:' + err);
                        });
                    }
                },
                backOrderIssueIndex(){
                    history.back();
                    window.location.href = "{{url('order/issue/index')}}";
                },
            }
        });
        $('.is-invalid').change(function(){
            console.log(123);
            $(this).removeClass('is-invalid');
        })

    </script>

@endsection