@extends('layouts.app')

@section('title','结算报表')

@section('content')
    <div id="nav2">
        @component('personnel.menu')@endcomponent
        @component('personnel.discharge.menu')@endcomponent
    </div>
    <div id="list" class="d-none container-fluid">
        <div id="form_div" style="min-width: 2250px"></div>

        <div class="form-inline mt-1" id="btn">
            <span class="dropdown">
                <button type="button" class="btn btn-outline-dark btn-sm form-control-sm dropdown-toggle tooltipTarget"
                        :class="[checkData.length>0?'btn-dark text-light':'']"
                        data-toggle="dropdown" title="导出所有页将会以搜索条件得到的筛选结果，将其全部记录（每一页）导出">导出Excel
                </button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" @click="StatementsExport(false)" href="javascript:">导出勾选内容</a>
                    <a class="dropdown-item" @click="StatementsExport(true)" href="javascript:">导出所有页</a>
                </div>
            </span>
            @include('personnel.discharge.statement._table')
        </div>
    </div>
@endsection

@section('lastScript')
    <script type="text/javascript" src="{{mix('js/queryForm/queryForm.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/export.js')}}"></script>
    <script>
        let statementVue = new Vue({
            el: '#list',
            data: {
                dischargeStatements: {!! $dischargeStatements->toJson() !!}['data'],
                facilitators:{!! $facilitators !!},
                owners:{!! $owners !!},
                checkData: [],
                taskTypes: {0: "装车", 1: "卸车"},
                units: {0: 'm3', 1: '吨', 2: '件', 3: '托'},
                status: {0: '创建', 1: '接单', 2: '作业中', 3: '完成'},
                selectTr:0,
            },
            created() {
                let _this = this;
                this.dischargeStatements.forEach(function (item, index, array) {
                    array[index]['status'] = _this.status[item['status']];
                    array[index]['income_unit'] = _this.units[item['income_unit']];
                    array[index]['expenditure_unit'] = _this.units[item['expenditure_unit']];
                    array[index]['type'] = _this.taskTypes[item['type']];
                });
                this.owners.forEach(function (item, index, array) {
                    array[index] = {name: item.id, value: item.name,};
                })
                this.facilitators.forEach(function(item, index, array){
                    array[index] = {name:item.id,value:item.name};
                })
            },
            mounted() {
                $('#list').removeClass('d-none');
                $(".tooltipTarget").tooltip({'trigger': 'hover'});
                // 货主 创建日期 入库单号 状态 入库备注
                let _this = this;
                let status = [{name: 0, value: '创建'}, {name: 1, value: '接单'}, {name: 2, value: '作业中'}, {name: 3, value: '完成'}];
                let data = [[
                    {
                        name: 'owner_id', type: 'select_multiple_select', tip: ['输入关键词快速定位下拉列表，回车确定', '选择要显示的客户'],
                        placeholder: ['货主', '定位或多选货主'],
                        data: _this.owners
                    },
                    {name: 'created_at_start', type: 'dateTime', tip: '创建开始日期'},
                    {name: 'created_at_end', type: 'dateTime', tip: '创建结束日期'},
                    {name: 'numbers', type: 'input', tip: '可支持多入库单号，模糊搜索可在两侧增加百分号(%)进行', placeholder: '入库单号'},
                    {name: 'status', type: 'select', tip: '状态', data: status, placeholder: '状态'},
                ], [
                    {
                        name: 'facilitator_id', type: 'select_multiple_select', tip: ['输入关键词快速定位下拉列表，回车确定', '选择要显示的装卸队'],
                        placeholder: ['装卸队', '定位或多选装卸队'],
                        data: _this.facilitators
                    },
                    {name: 'income_remark', type: 'input', tip: '备注', data: _this.status, placeholder: '支出备注'},
                    {name: 'income_remark', type: 'input', tip: '备注', data: _this.status, placeholder: '收入备注'},
                ]];
                this.form = new query({
                    el: '#form_div',
                    condition: data,
                })
                this.form.init();
            },
            methods: {
                checkAll(e) {
                    if (!e.target.checked) this.checkData = [];
                    else {
                        this.dischargeStatements.forEach((item, i) => {
                            if (this.checkData.indexOf(item['id']) === -1) this.checkData.push(item['id']);
                        });
                    }
                },
                StatementsExport(isExportAll) {
                    let url = '{{url('personnel/discharge/statement/export')}}';
                    let token = '{{ csrf_token() }}';
                    excelExport(isExportAll, this.checkData, url, this.sum, token);
                }
            }
        });
    </script>
@endsection
