@extends('layouts.app')
@section('title')采购管理-财务-月账单报表@endsection

@section('content')
    @component('procurement.finance.menu')@endcomponent
    <div class="container-fluid" id="list">
        <div id="form_div" class="mt-1"></div>
        <div class="row mt-2">
        <span class="dropdown ml-3">
        <button class="btn btn-outline-dark btn-sm form-control-sm dropdown-toggle tooltipTarget"
                data-toggle="dropdown" title="导出所有页将会以搜索条件得到的筛选结果，将其全部记录（每一页）导出">
            导出Excel
        </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" @click="procurementTotalBillExport(false)" href="javascript:">导出勾选内容</a>
            <a class="dropdown-item" @click="procurementTotalBillExport(true)" href="javascript:">导出所有页</a>
        </div>
        </span>
        </div>
        <table class="table table-sm table-striped table-bordered table-hover text-nowrap card-body mt-2 td-min-width-80" id="table">
            <template  v-for="(procurementTotalBill,i) in procurementTotalBills">
            <tr>
                <td >
                    <input class="checkItem" type="checkbox" :value="procurementTotalBill.id">
                </td>
                <td class="text-center"><span>@{{ procurementTotalBill.id }}</span></td>
                <td class="text-muted text-center"><span>@{{ procurementTotalBill.counting_month }}</span></td>
                <td class="text-muted text-center"><span>@{{ procurementTotalBill.created_at.substr(0,10) }}</span></td>
                <td class="text-muted text-center"><span>@{{ procurementTotalBill.supplier_name }}</span></td>
                <td class="text-center"><span>@{{ procurementTotalBill.total_payable }}</span></td>
                <td class="text-center"><span>@{{ procurement_total_bill_status[procurementTotalBill.status] }}</span></td>
                <td class="text-center">
                    <button class="btn btn-sm btn-outline-info" @click="getCheckBill(procurementTotalBill,i,$event)">点击展开</button>
                </td>
            </tr>
            <tr v-if="procurementTotalBill.showSubject" class="p-0 up" >
                <td></td>
                <td colspan="7" class="p-0 m-0">
                    <div class="p-0 " :id="'Statement' + i">
                        <table class="table table-bordered m-0">
                            <thead class="thead-light">
                            <tr>
                                <th>采购编号</th>
                                <th>采购日期</th>
                                <th>送货日期</th>
                                <th>供应商</th>
                                <th>耗材编号</th>
                                <th>耗材</th>
                                <th>采购数量</th>
                                <th>送货数量</th>
                                <th>签收人</th>
                                <th>签收日期</th>
                                <th>应付金额</th>
                                <th>发票号</th>
                                <th>状态</th>
                                <th>填写发票号</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(procurementCheckSheet,i) in procurementTotalBill.procurementCheckSheets">
                                <td>
                                    <span v-if="procurementCheckSheet.procurement_delivery.procurement">@{{ procurementCheckSheet.procurement_delivery.procurement.code }}</span></td>
                                <td class="text-muted">
                                    <span v-if="procurementCheckSheet.procurement_delivery.procurement">@{{ procurementCheckSheet.procurement_delivery.procurement.created_at }}</span></td>
                                <td class="text-muted">
                                    <span v-if="procurementCheckSheet.procurement_delivery">@{{ procurementCheckSheet.procurement_delivery.created_at }}</span></td>
                                <td class="text-muted">
                                    <span v-if="procurementCheckSheet.procurement_delivery.procurement.supplier">@{{ procurementCheckSheet.procurement_delivery.procurement.supplier.name }}</span></td>
                                <td class="tooltipTarget" style="max-width: 200px;overflow:hidden">
                                    <span  v-if="procurementCheckSheet.procurement_delivery.procurement.owner_material">@{{ procurementCheckSheet.procurement_delivery.procurement.owner_material.material_code }}</span></td>
                                <td class="text-muted">
                                    <span v-if="procurementCheckSheet.procurement_delivery.procurement.owner_material">@{{ procurementCheckSheet.procurement_delivery.procurement.owner_material.material.name }}</span></td>
                                <td class="text-muted">
                                    <span v-if="procurementCheckSheet.procurement_delivery.procurement">@{{ procurementCheckSheet.procurement_delivery.procurement.quantity }}</span></td>
                                <td class="text-muted">
                                    <span v-if="procurementCheckSheet.procurement_delivery">@{{ procurementCheckSheet.procurement_delivery.amount }}</span></td>
                                <td class="text-muted">
                                    <span v-if="procurementCheckSheet.procurement_delivery.receiver">@{{ procurementCheckSheet.procurement_delivery.receiver.name }}</span></td>
                                <td class="text-muted">
                                    <span v-if="procurementCheckSheet.procurement_delivery">@{{ procurementCheckSheet.procurement_delivery.signed_at }}</span></td>
                                <td class="text-muted"><span >@{{ procurementCheckSheet.account_payable }}</span></td>
                                <td><span>@{{ procurementCheckSheet.invoice_number }}</span></td>
                                <td><span>@{{ procurement_check_sheet_status[procurementCheckSheet.status] }}</span></td>
                                <td class="text-center">
                                    <a class="text-primary" @click="fillInvoiceNumber(procurementCheckSheet.id)" v-if="!procurementCheckSheet.invoice_number">填写发票号</a>
                                    <span v-else>-</span>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
            </template>
        </table>
        @can('采购管理-财务-对账单')
            @include('procurement.finance._fillInvoiceNumber')
        @endcan
        <div class="text-info h5 btn btn">{{$procurementTotalBills->count()}}/@{{ sum }}</div>
        <div>{{$procurementTotalBills->appends($paginateParams)->links()}}</div>
    </div>
@endsection
@section('lastScript')
    <script type="text/javascript" src="{{mix('js/queryForm/export.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/queryForm.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>{{--新版2--}}
    <script>
        let vue = new Vue({
            el: '#list',
            data: {
                procurementTotalBills: [
                    @foreach($procurementTotalBills as $procurementTotalBill)
                    {
                        id:'{{$procurementTotalBill->id ?? ''}}',counting_month:'{{$procurementTotalBill->counting_month ?? ''}}',
                        showSubject:false,procurementCheckSheets:[],
                        created_at:'{{$procurementTotalBill->created_at ?? ''}}',status:'{{$procurementTotalBill->status ?? ''}}',total_payable:'{{$procurementTotalBill->total_payable ?? ''}}',
                            @if($procurementTotalBill->supplier)
                            supplier_id:'{{$procurementTotalBill->supplier->id ?? ''}}',supplier_name:'{{$procurementTotalBill->supplier->name ?? ''}}',@endif
                    },
                    @endforeach
                ],
                suppliers:[
                        @foreach($suppliers as $supplier)
                    {name:'{{$supplier->id}}',value:'{{$supplier->name}}'},
                    @endforeach
                ],
                sum:{!! $procurementTotalBills->total() !!},
                procurement_total_bill_status:{!! json_encode(\App\ProcurementTotalBill::status,JSON_UNESCAPED_UNICODE) !!},
                procurement_check_sheet_status:{!! json_encode(\App\ProcurementCheckSheet::status,JSON_UNESCAPED_UNICODE) !!},
                invoice_number:'',procurementCheckSheetId:null,index:'',

            },
            mounted: function () {
                $(".up").slideUp();
                $(".tooltipTarget").tooltip({'trigger': 'hover'});
                $('#list').removeClass('d-none');
                let data = [
                    [
                        {name:'counting_month',type:'dateMonth',tip:'选择账单日期',placeholder: '----年--月'},
                        {
                            name: 'supplier_id', type: 'select_multiple_select', tip: ['输入关键词快速定位下拉列表,回车确定', '选择要显示的供应商'],
                            placeholder: ['供应商', '定位或多选供应商'], data: this.suppliers
                        },
                    ],
                ];
                this.form = new query({
                    el: "#form_div",
                    condition: data,
                });
                this.form.init();
                let column = [
                    {name: 'id', value: '对账编号', neglect: true,class: 'text-center'},
                    {name: 'counting_month', value: '账单日期',class: 'text-center'},
                    {name: 'created_at', value: '提交日期',class: 'text-center'},
                    {name: 'supplier', value: '供应商',class: 'text-center'},
                    {name: 'total_payable', value: '总金额',class: 'text-center'},
                    {name: 'status', value: '状态',class: 'text-center'},
                    {name: 'detail', value: '月账单详情',class: 'text-center'},
                ];
                new Header({
                    el: "table",
                    name: "monthlyBillReport",
                    column: column,
                    data: this.procurementTotalBills,
                    fixedTop: ($('#form_div').height()) + 2,
                }).init();
            },
            methods: {
                procurementTotalBillExport(selectAll){
                    let url = '{{url('procurement/finance/procurementTotalBillExport')}}';
                    let token='{{ csrf_token() }}';
                    excelExport(selectAll,checkData,url,this.sum,token);
                },
                getCheckBill(procurementTotalBill,index,$e){
                    this.index=index;
                    if(procurementTotalBill.showSubject){
                        procurementTotalBill.showSubject=false;
                        $($e.target).html('点击展开');
                        return;
                    }
                    $($e.target).html('加载中...');
                    let url = '{{url('procurement/finance/getCheckBillMonth')}}'
                    let data = {
                        'procurement_total_bill_id':procurementTotalBill['id'],
                    };
                    window.axios.post(url,data).then(res=>{
                        if(res.data.success){
                            // this.$set(this.procurementTotalBills[index],'subjection',res.data.data);
                            this.procurementTotalBills[index].procurementCheckSheets=res.data.data;
                            procurementTotalBill['showSubject'] = true;
                            $("#Statement"+index).slideToggle();
                            $($e.target).html('点击收起');
                            this.$forceUpdate();
                        }
                    }).catch(err=>{
                        $($e.target).html('点击展开');
                        window.tempTip.show(err);
                    });
                },
                fillInvoiceNumber(id){
                    let _this=this;
                    _this.procurementCheckSheetId=id;
                    $('#fill-invoice-number').modal('show');
                },
                fillInvoice(){
                    let _this=this;
                    if (!_this.procurementCheckSheetId)return;
                    if (!_this.invoice_number){
                        tempTip.setDuration(3000);
                        tempTip.show('发票号不可为空!');
                        return;
                    }
                    let url = '{{url('procurement/finance/fillInvoice')}}';
                    let params = {invoice_number:_this.invoice_number,procurementCheckSheetId:_this.procurementCheckSheetId};
                    window.axios.post(url,params).then(function (res) {
                        if (!res.data.success){
                            tempTip.setDuration(3000);
                            tempTip.show(res.data.message);
                        }else {
                            _this.procurementTotalBills[_this.index].procurementCheckSheets.forEach(function (procurementCheckSheet) {
                                if (procurementCheckSheet.id===_this.procurementCheckSheetId){
                                    procurementCheckSheet.invoice_number=res.data.data;
                                    procurementCheckSheet.status=res.data.status;
                                }
                            });
                            if (res.data.totalStatus) _this.procurementTotalBills[_this.index].status=res.data.totalStatus;
                            $("#fill-invoice-number").modal('hide');
                            tempTip.setDuration(3000);
                            tempTip.showSuccess('添加发票号成功！');
                        }
                    }).catch(function (err) {
                        tempTip.setDuration(3000);
                        tempTip.show('添加发票号失败！网络错误：'+err);
                    });
                },
            }
        });
    </script>
@endsection