@extends('layouts.app')
@section('title')录入-问题件@endsection

@section('content')
    <div id="issue_create_div" class="d-none">
        <div class="container-fluid">
            <div class="card col-md-8 offset-md-2">
                <div class="card-header">订单问题件录入</div>
                <div class="card-body">
                    <form action="{{url('order/issue/store')}}" method="post">
                        @csrf
                        @method('POST')
                        <input type="hidden" name="order_id" :value='order.id'>
                        <input type="hidden" name="second_order_id" :value='second_order_id'>
                        <input type="hidden" name="logistic_number_return" :value='logistic_number_return'>
                        <div class="form-group row">
                            <label for="logistic_number_return" class="col-2 col-form-label text-right ">退回运单号</label>
                            <div class="col-8 ">
                                <input type="text" name="logistic_number_return_" id="logistic_number_return" class="form-control col-lg-5 @error('logistic_number_return') is-invalid @enderror"
                                       v-model="logistic_number_return"
                                       value="@if(old('logistic_number_return')){{old('logistic_number_return')}}@endif"
                                       @blur="checkLogisticNumberReturn">
                                @error('logistic_number_return')
                                <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="wms_order_no" class="col-2 col-form-label text-right ">原始客户订单号</label>
                            <div class="col-8">
                                <input type="text" name="client_code" id="client_code"
                                       class="form-control col-lg-5 @error('client_code') is-invalid @enderror"
                                       value="@if(old('client_code')){{old('client_code')}}@endif"
                                       @blur="checkClientCode($event)"
                                       v-model="client_code">
                                @error('client_code')
                                <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="order_issue_type_id" class="col-2 col-form-label text-right text-primary"><span class="text-danger">*</span>问题类别</label>
                            <div class="col-8">
                                <select name="order_issue_type_id" id="order_issue_type_id" v-model="order_issue_type_id"
                                        class="form-control @error('order_issue_type_id') is-invalid @enderror">
                                    <option value></option>
                                    <option v-for="type in types" :value="type.id">@{{ type.name }}</option>
                                </select>
                                @error('order_issue_type_id')
                                <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="" class="col-2 col-form-label text-right">原始商品详情</label>
                            <div class="col-8" id="">
                                <div class="alert alert-success" role="alert" v-if="order.packages">
                                    商品详情已填充
                                </div>
                                <div class="alert alert-secondary" role="alert" v-else>
                                    原始商品详情通过原始订单号或退回单号输入进行自动填充
                                </div>
                                <table class="table table-responsive-sm" v-if="order.packages">
                                    <tr>
                                        <th>条码</th><th>商品名</th><th>数量</th>
                                    </tr>
                                    <template v-for="packages in order.packages">
                                        <tr v-for="items in packages.commodities">
                                            <td>@{{ items.commodity.sku }}</td>
                                            <td>@{{ items.commodity.name }}</td>
                                            <td>@{{ items.amount }}</td>
                                        </tr>
                                    </template>
                                </table>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="" class="col-2 col-form-label text-right ">退回单商品详情</label>
                            <div class="col-8">
                                <div class="alert alert-success" role="alert" v-if="rejectedBill.items">
                                    商品详情已填充
                                </div>
                                <div class="alert alert-secondary" role="alert" v-else>
                                    退回单商品详情通过原始订单号或退回单号输入进行自动填充
                                </div>
                                <table class="table table-responsive-sm" v-if="rejectedBill.items">
                                    <tr>
                                        <th>条码</th><th>商品名</th><th>数量</th><th>是否正品</th><th>备注</th>
                                    </tr>
                                    <tr v-for="item in rejectedBill.items">
                                        <td>@{{ item.barcode_goods }}</td>
                                        <td>@{{ item.name_goods }}</td>
                                        <td>@{{ item.amount }}</td>
                                        <td>@{{ item.validity_at }}</td>
                                        <td>@{{ item.remark }}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="wms_order_no" class="col-2 col-form-label text-right text-primary"><span
                                    class="text-danger">*</span>货主</label>
                            <div class="col-8 row">
                                <div class="form-group col-lg-5">
                                    <select class="form-control form-inline  @error('owner_id') is-invalid @enderror" name="owner_id" v-model="order.owner_id">
                                        <option value></option>
                                        <option v-for="owner in filterOwners" :value="owner.id">@{{ owner.name }}</option>
                                    </select >
                                    @error('owner_id')
                                    <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                    @enderror
                                </div>
                                <div class="form-group col-lg-5">
                                    <input class="form-control form-inline" @change="ownerFilter($event)" placeholder="输入货主进行筛选">
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="wms_order_no" class="col-2 col-form-label text-right ">原始承运商</label>
                            <div class="col-8 row">
                                <div class="form-group col-lg-5">
                                    <select class="form-control " name="logistic_id" v-model="order.logistic_id">
                                        <option value></option>
                                        <option v-for="logistic in logistics" :value="logistic.id">@{{ logistic.name }}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="wms_order_no" class="col-2 col-form-label text-right ">收货人名称</label>
                            <div class="col-8">
                                <input type="text" name="consignee_name " class="form-control" v-model="order.consignee_name">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="wms_order_no" class="col-2 col-form-label text-right ">收货人号码</label>
                            <div class="col-8">
                                <input type="text" name="consignee_phone" class="form-control" v-model="order.consignee_phone">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-2 col-form-label text-right ">收货人地址</label>
                            <div class="col-8 row">
                                <div class="form-group col-lg-4">
                                    <input type="text" name="province" class="form-control" placeholder="省" v-model="order.province">
                                </div>
                                <div class="form-group col-lg-4">
                                    <input type="text" name="city" class="form-control" placeholder="市" v-model="order.city"
                                    ></div>
                                <div class="form-group col-lg-4">
                                    <input type="text" name="district" class="form-control" placeholder="区" v-model="order.district">
                                </div>
                            </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="address" class="form-control " v-model="order.address">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="second_order_no" class="col-2 col-form-label text-right">二次客户订单号</label>
                            <div class="col-8">
                                <input type="text" name="second_order_no" id="second_order_no" class="form-control"
                                       value="@if(old('secondClientNO')){{old('secondClientNO')}}@endif"
                                       v-model="secondClientNO" @blur="verifySecondOrder($event)">
                                <div class="valid-feedback" style="display: none" id="secondOrderNo_feedback"></div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="second_order_no" class="col-2 col-form-label text-right">二次承运商</label>
                            <div class="col-8">
                                <select class="form-control" v-model="secondOrder.logistic_id">
                                    <option></option>
                                    <option v-for="logistic in logistics" :value="logistic.id">@{{ logistic.name }}
                                    </option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="" class="col-2 col-form-label text-right">二次客户订单商品详情</label>
                            <div class="col-8" id="">
                                <div class="alert alert-success" role="alert" v-if="secondOrder.packages">
                                    二次客户订单商品详情已填充
                                </div>
                                <div class="alert alert-secondary" role="alert" v-else>
                                    二次客户订单商品详情通过二次订单编号进行自动填充
                                </div>
                                <table class="table table-responsive-sm" v-if="secondOrder.packages">
                                    <tr>
                                        <th>条码</th><th>商品名</th><th>数量</th>
                                    </tr>
                                    <tr v-for="packages in secondOrder.packages">
                                        <template v-for="items in packages.commodities">
                                            <td>@{{ items.commodity.sku }}</td>
                                            <td>@{{ items.commodity.name }}</td>
                                            <td>@{{ items.amount }}</td>
                                        </template>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="order_issue_type_id" class="col-2 col-form-label text-right ">最终状态</label>
                            <div class="col-8">
                                <select name="final_status" id="final_status" class="form-control" v-model="finalStatus">
                                    <option value></option>
                                    <option v-for="type in final_status " :value="type">@{{ type }}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="" class="col-2 col-form-label text-right ">情况说明</label>
                            <div class="col-8">
                                <textarea name="result_explain" class="form-control"></textarea>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="" class="col-2 col-form-label text-right ">处理结果</label>
                            <div class="col-8">
                                <textarea name="content" class="form-control"></textarea>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="logistic_indemnity_money"
                                   class="col-2 col-form-label text-right ">承运商赔偿金额</label>
                            <div class="col-8">
                                <input type="text"  class="form-control" name="logistic_indemnity_money" id="logistic_indemnity_money" value="@if(old('logistic_indemnity_money')){{old('logistic_indemnity_money')}}@endif">
                                @error('logistic_indemnity_money')
                                <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="logistic_express_remission"
                                   class="col-2 col-form-label text-right ">承运商快递减免</label>
                            <div class="col-8">
                                <select id="logistic_express_remission" name="logistic_express_remission"  class="form-control" v-model='logistic_express_remission'>
                                    <option value></option>
                                    <option v-for="remission in Remission " :value="remission">@{{ remission }}</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="baoshi_indemnity_money"
                                   class="col-2 col-form-label text-right ">宝时赔偿金额</label>
                            <div class="col-8">
                                <input  id="baoshi_indemnity_money" type="text" name="baoshi_indemnity_money"  class="form-control"
                                       value="@if(old('baoshi_indemnity_money')){{old('baoshi_indemnity_money')}}@endif">
                                @error('baoshi_indemnity_money')
                                <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="baoshi_express_remission"
                                   class="col-2 col-form-label text-right ">宝时快递减免</label>
                            <div class="col-8">
                                <select name="baoshi_express_remission" id="baoshi_express_remission" class="form-control" v-model="baoshi_express_remission">
                                    <option value></option>
                                    <option v-for="remission in Remission " :value="remission">@{{ remission }}</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="user_workgroup_id"
                                   class="col-2 col-form-label text-right ">事故责任方</label>
                            <div class="col-8">
                                <select name="user_workgroup_id" id="user_workgroup_id" class="form-control" v-model="userWorkgroupId">
                                    <option value></option>
                                    <option v-for="wrokGroup in userWorkGroup " :value="wrokGroup.id">@{{ wrokGroup.name }}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-8 offset-2">
                                <button type="submit" class="btn btn-success form-control" :disabled="!isSubmit">提交
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('lastScript')
    <script type="text/javascript">
        let crete_vue = new Vue({
            el: '#issue_create_div',
            data: {
                logistic_number_return: @if(old('logistic_number_return'))"{{old('logistic_number_return')}}"@else''@endif,
                client_code: @if(old('client_code'))"{{old('client_code')}}"@else''@endif,
                second_order_id: @if(old('second_order_id'))"{{old('second_order_id')}}"@else''@endif,
                secondClientNO: @if(old('secondClientNO'))"{{old('secondClientNO')}}"@else''@endif,
                order_issue_type_id: @if(old('order_issue_type_id'))"{{old('order_issue_type_id')}}"@else''@endif,
                owners:{!! $owners !!},
                filterOwners:{!! $owners !!},
                logistics:{!! $logistic !!},
                types:{!! $types !!},
                userWorkGroup:{!! $userWorkGroup !!},
                rejectedBill: '',// 退回单信息
                order_id: @if(old('order_id')){{old('order_id')}}@else''@endif,
                isSubmit: false,
                // 原始订单信息
                order: {orderno: '', logstic_number: '', address: '', province: '', city: '', district: '', consignee_name: '', consignee_phone: '', carrierid: '', owner_id: @if(old('owner_id')){{old('owner_id')}}@else '' @endif, ownerName: '', order_id: '',},
                // 二次订单
                secondOrder: {logistic_id: '', code: '',},
                final_status: ['已解决', '待退回', '退回中'],
                Remission: ['原单减免', '补发减免', '全部减免'],
                finalStatus: @if(old('final_status')){{old('final_status')}}@else''@endif,
                logistic_express_remission: @if(old('logistic_express_remission')){{old('logistic_express_remission')}}@else''@endif,
                baoshi_express_remission: @if(old('baoshi_express_remission')){{old('baoshi_express_remission')}}@else''@endif,
                userWorkgroupId: @if(old('user_workgroup_id')){{old('user_workgroup_id')}}@else''@endif,
            },
            mounted: function () {
                $("#issue_create_div").removeClass('d-none');
                if (this.wms_order_no) {
                    this.checkClientCode();
                }
                if (this.secondClientNO) {
                    this.verifySecondOrder();
                }
                if (this.logistic_number_return) {
                    this.checkLogisticNumberReturn();
                }
            },
            watch: {
                client_code:function(value){
                    if(value== null || value === ''){
                        this.order = {orderno: '', logstic_number: '', address: '', province: '', city: '', district: '', consignee_name: '', consignee_phone: '', carrierid: '', owner_id: '' , ownerName: '', order_id: ''};
                    }
                },
                order_issue_type_id: {
                    handler: function (value) {
                        if (value == null || value === '') {
                            this.isSubmit = false;
                        }
                    },
                    immediate: true
                },
                secondOrder: function (order) {
                    if (order) {
                        this.second_order_id = order.id;
                    } else {
                        this.second_order_id = '';
                    }
                },
                rejectedBill: function (value) {
                    if (value) {
                        this.logistic_number_return = value.logistic_number_return;
                    } else {
                        this.logistic_number_return = '';
                    }
                },
                logistic_number_return:function(value){
                    if(!value){
                        this.rejectedBill = '';
                    }
                }
            },
            methods: {
                checkLogisticNumberReturn: function () {
                    if (this.logistic_number_return == null || this.logistic_number_return === '') {
                        return;
                    }
                    let _this = this;
                    let data = {logisticNumberReturn: this.logistic_number_return};
                    axios.post("{{url('apiLocal/order/issue/orderIssueHasLogisticNumberReturn')}}", data).then(function (res) {
                        if (res.data.success) {
                            if (res.data.rejectedBill) {
                                _this.rejectedBill = res.data.rejectedBill;
                            }
                            if (res.data.message) {
                                tempTip.setDuration(3000);
                                tempTip.showSuccess(res.data.message);
                            }
                            _this.isSubmit = true;
                        } else {
                            tempTip.setDuration(3000);
                            tempTip.show(res.data.fail_info);
                            _this.isSubmit = false;
                        }
                    }).catch(function (err) {
                        tempTip.setDuration(5000);
                        tempTip.show('网络链接失败：' + err);
                        _this.isSubmit = false;
                    });
                },
                checkClientCode() {
                    if (this.client_code == null || this.client_code === '' ) {
                        $('#logistic_number_return').attr('disabled', false);
                        return;
                    }
                    let _this = this;
                    let data = {clientCode: this.client_code};
                    axios.post("{{url('apiLocal/order/issue/orderIssueHasClientCode')}}", data).then(function (res) {
                        if (res.data.success) {
                            if (res.data.order) {
                                _this.order = res.data.order;
                            }
                            if (res.data.rejectedBill) {
                                _this.rejectedBill = res.data.rejectedBill;
                            } else {
                                $('#logistic_number_return').attr('disabled', true);
                            }
                            _this.isSubmit = true;
                        } else {
                            tempTip.setDuration(3000);
                            tempTip.show(res.data.fail_info);
                            _this.isSubmit = false;
                            $('#logistic_number_return').attr('disabled', false);
                        }
                    }).catch(function (err) {
                        tempTip.setDuration(5000);
                        tempTip.show('网络链接失败：' + err);
                        _this.isSubmit = false;
                        $('#logistic_number_return').attr('disabled', false);
                    });
                },
                verifySecondOrder: function () {
                    if ( this.secondClientNO == null || this.secondClientNO === '' ) {return;}
                    let _this = this;
                    let data = {clientNo: this.secondClientNO};
                    axios.post("{{url('apiLocal/order/issue/getOrderInfoByClientNo')}}", data).then(function (res) {
                        if (res.data.success) {
                            _this.secondOrder = res.data.data;
                            _this.isSubmit = true;
                        } else {
                            tempTip.setDuration(3000);
                            tempTip.show(res.data.fail_info);
                            _this.isSubmit = false;
                        }
                    }).catch(function (err) {
                        tempTip.setDuration(5000);
                        tempTip.show('网络链接失败：' + err);
                        _this.isSubmit = false;
                    });
                },
                ownerFilter(e){
                    let name = $(e.target).val();
                    if(name===''){
                        this.filterOwners = this.owners
                        return
                    }
                    let arr = [];
                    this.owners.forEach(function(owner){
                        if(owner.name.includes(name)){
                            arr.push(owner)
                        }
                    });
                    if(arr.length > 0){
                        this.order.owner_id = arr[0].id;
                    }
                    this.filterOwners = arr;
                }
            }
        })
    </script>
@endsection