@extends('layouts.app')

@section('title','装卸队')

@section('content')
    <div id="nav2">
        @component('personnel.menu')@endcomponent
        @component('personnel.discharge.menu')@endcomponent
        @component('personnel.discharge.facilitator.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="Export(false)" href="javascript:">导出勾选内容</a>
                    <a class="dropdown-item" @click="Export(true)" href="javascript:">导出所有页</a>
                </div>
            </span>
            @include('personnel.discharge.facilitator._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 ProviderVue = new Vue({
            el:"#list",
            data:{
                facilitatorStatements:{!! $facilitatorStatements->toJson() !!}['data'],
                facilitators:{!! $facilitators !!},
                units:{0:'m3',1:'吨',2:'托',3:'件'},
                checkData:[],
                selectTr:0,
            },
            watch: {
                checkData: {
                    handler() {
                        if (this.checkData.length === this.facilitatorStatements.length) {
                            document.querySelector('#selectAll').checked = true;
                        } else {
                            document.querySelector('#selectAll').checked = false;
                        }
                    },
                    deep: true
                },
            },
            created(){
                let _this = this;
                this.facilitatorStatements.forEach(function(facilitatorStatement,index,array){
                    array[index]['expenditure_unit'] = _this.units[facilitatorStatement['expenditure_unit']];
                    array[index]['subjection'] = [];
                    array[index]['showSubject'] = false;
                });
                this.facilitators.forEach(function(provider,index,array) {
                    array[index] = {
                        name: provider.id,
                        value: provider.name,
                    }
                });
            },
            mounted(){
                let _this = this;
                $('#list').removeClass('d-none');
                $(".tooltipTarget").tooltip({'trigger': 'hover'});
                let data = [[
                    {
                        name: 'facilitator_id', type: 'select_multiple_select', tip: ['输入关键词快速定位下拉列表，回车确定', '选择要显示的装卸队'],
                        placeholder: ['装卸队', '装卸队'],
                        data: _this.facilitators
                    },
                    {name: 'created_at_start', type: 'dateTime', tip: '创建开始日期'},
                    {name: 'created_at_end', type: 'dateTime', tip: '创建结束日期'},
                ]];
                this.form = new query({
                    el: '#form_div',
                    condition: data,
                });
                this.form.init();
            },
            methods:{
                selectAll(e) {
                    if (!e.target.checked) this.checkData = [];
                    else {
                        this.facilitatorStatements.forEach((item, i) => {
                            let data = 'months:'+item['months']+';id:'+item['id'];
                            if (this.checkData.indexOf(data) === -1) this.checkData.push(data);
                        });
                    }
                },
                gainStatement(facilitatorStatement,index,$e){
                    if(facilitatorStatement.showSubject){
                        facilitatorStatement.showSubject=false;
                        $($e.target).html('点击展开');
                        return;
                    }
                    $($e.target).html('加载中...');
                    let url = '{{url('apiLocal/facilitator/gainStatement')}}'
                    let data = {
                        'created_range':facilitatorStatement['months'],
                        'facilitator_id':facilitatorStatement['id'],
                    };
                    window.axios.post(url,data).then(res=>{
                        if(res.data.success){
                            this.$set(this.facilitatorStatements[index],'subjection',res.data.data);
                            facilitatorStatement['showSubject'] = true;/*selectAll*/
                            $("#Statement"+index).slideToggle();
                            $($e.target).html('点击收起');
                            this.$forceUpdate();
                        }
                    }).catch(err=>{
                        $($e.target).html('点击展开');
                        window.tempTip.show(err);
                    });
                },
                getQRCodeUrl(facilitatorStatement){
                    return '{{url('/personnel/discharge/facilitator/qrCode')}}'+'/?facilitator_id='+facilitatorStatement['id'];
                },
                Export(isExportAll) {
                    let url = '{{url('personnel/discharge/facilitator/export')}}';
                    let token = '{{ csrf_token() }}';
                    excelExport(isExportAll, this.checkData, url, this.sum, token);
                },
            }
        })
    </script>

@endsection
