@extends('layouts.app')
@section('title')KPI-日报表(工作量)@endsection
@section('content')
    <div class="d-none" id="list">
        <div class="row m-3" style="background-color: #fff;">

            <div class="form-group m-2">
                <select class="form-control selectpicker" title="分页大小" v-model="size">
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="200">200</option>
                    <option value="500">500</option>
                    <option value="1000">1000</option>
                </select>
            </div>

            <div class="form-group m-2" style="max-width: 200px !important;">
                <select v-model="searchBody.userWorkgroupIds" class="selectpicker form-control" multiple title="选择工作组"
                        data-actions-box="true"
                        data-live-search="true"
                        data-live-search-placeholder="搜索"
                >
                    <option v-for="(v,k) of userWorkgroups" :value="v.id" :key="v.id">@{{ v.name }}</option>
                </select>
            </div>
            <div class="form-group m-2" data-toggle="tooltip" data-placement="top" title="起始日期">
                <input v-model="searchBody.startDate" class="form-control" type="date">
            </div>

            <div class="form-group m-2" data-toggle="tooltip" data-placement="top" title="截止日期">
                <input v-model="searchBody.endDate" class="form-control" type="date">
            </div>

            <div class="form-group m-2">
                <button class="form-control btn btn-sm btn-info" @click="searchData()">查询</button>
            </div>

            <div class="form-group m-2">
                <button class="form-control btn btn-sm btn-success" @click="resetSearch()">重置</button>
            </div>
        </div>

        <!--            表格-->
        <table class="table table-striped table-bordered table-hover text-nowrap waybill-table td-min-width-80"
               style="background: #fff;" id="table">
            <tr v-for="(item,i) in details.data" :key="i">
                <td><input class="checkItem" type="checkbox" :value="item.id"></td>
                <td class="td-warm text-muted"><span>@{{ item.userWorkgroupName }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.statDate.slice(0,10) }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.attendanceAmount }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.officialAmount }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.officialHour.toFixed(2) }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.temporaryAmount }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.temporaryHour.toFixed(2) }}</span></td>

                <td class="td-warm text-muted"><span>@{{ item.workAmountTotal.toFixed(2) }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.hourWorkAmount.toFixed(2) }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.workCostTotal.toFixed(2) }}</span></td>
                <td class="td-warm text-muted"><span>@{{ item.workEfficiency.toFixed(2) }}</span></td>
                <td class="td-warm text-muted">
                    <button @click="showDetail(item.id)" type="button"
                            class="btn btn-primary" data-toggle="modal"
                            data-target="#staticBackdrop">
                        查看明细
                    </button>
                </td>

            </tr>
        </table>
        <nav aria-label="...">
            <ul class="pagination">
                <li class="page-item" :class="current===1?'disabled':''">
                    <button class="page-link" @click="pagination('pre')">上一页</button>
                </li>
                <li class="page-item" :class="current===details.pages?'disabled':''">
                    <button class="page-link" @click="pagination('next')">下一页</button>
                </li>
            </ul>
        </nav>

        <!-- Modal -->
        <div class="modal fade" id="staticBackdrop" tabindex="-1" aria-labelledby="staticBackdropLabel"
             aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="staticBackdropLabel">明细</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="modal-dialog-scrollable justify-content-center">
                            <table class="table table-sm text-nowrap"
                                   style="background: #fff;" id="tableDetail">
                                <tr v-for="(item,i) in resData.detail.data" :key="i">
                                    <td class="td-warm text-muted text-center"><span>@{{ i+1 }}</span></td>
                                    <td class="td-warm text-muted text-center"><span>@{{ item.date }}</span>
                                    </td>
                                    <td class="td-warm text-muted text-center"><span>@{{ item.ownerName }}</span></td>
                                    <td class="td-warm text-muted text-center"><span>@{{ item.type }}</span>
                                    </td>
                                    <td class="td-warm text-muted text-center"><span>@{{ item.coefficient }}</span></td>
                                    <td class="td-warm text-muted text-center"><span>@{{ item.typeDetail }}</span></td>
                                    <td class="td-warm text-muted text-center"><span>@{{ item.amount }}</span></td>
                                    <td class="td-warm text-muted text-center"><span>@{{ item.score }}</span></td>
                                </tr>
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </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: {
                selectTr: '',
                userWorkgroups: [
                        @foreach($userWorkgroups as $userWorkgroup)
                    {
                        name: '{{$userWorkgroup->name}}', id: '{{$userWorkgroup->id}}'
                    },
                    @endforeach
                ],
                resData: {
                    detail: {
                        data: [],
                        total: 0,
                        current: 1,
                        pages: 0,
                        size: 50,
                    }
                },
                details: {
                    data: [],
                    total: null,
                    current: null,
                    pages: null,
                    size: null
                },
                size: 50,
                current: 1,
                searchBody: {
                    startDate: null,
                    endDate: null,
                    userWorkgroupIds: [],
                }
            },
            created() {
                let url = this.getBaseUrl();
                url += `/api/kpiDayWorkCoefficient/list?size=${this.size}&current=${this.current}`;
                axios.post(url, this.searchBody).then(res => {
                    this.details.data = res.data.data.list;
                    this.details.total = res.data.data.page.total;
                    this.details.current = res.data.data.page.pageNum;
                    this.details.pages = res.data.data.page.pages
                    this.details.size = res.data.data.page.pageSize;
                });
            },
            mounted: function () {
                $('#list').removeClass('d-none');
                this.rendingHeader();
                this.rendingHeader2();

            },
            methods: {
                showDetail(id) {
                    let url = this.getBaseUrl() + `/api/kpiDayWorkCoefficient/${id}`
                    axios.get(url).then(res => {
                        tempTip.showSuccess('查询成功!');
                        if (res.data.code !== 200) {
                            tempTip.show('接口异常!');
                            this.resData.detail.data = [];
                            this.resData.detail.total = 0;
                            this.resData.detail.current = 1;
                            this.resData.detail.pages = 0;
                            this.resData.detail.size = 50;
                        } else {
                            this.resData.detail.data = res.data.data.list;
                            this.resData.detail.total = res.data.data.page.total;
                            this.resData.detail.current = res.data.data.page.pageNum;
                            this.resData.detail.pages = res.data.data.page.pages
                            this.resData.detail.size = res.data.data.page.pageSize;
                        }
                    });
                },
                resetSearch() {
                    this.current = 1;
                    this.size = 50;
                    this.search = {
                        startDate: '',
                        endDate: '',
                        customerCodeList: [],
                    }
                },

                searchData() {
                    this.current = 1;
                    this.pagination();
                },
                //根据环境获取不同的url
                getBaseUrl() {
                    let url = '';
                    let env = "{{ config('app.env') }}";
                    if (env === 'local') {
                        url = 'http://127.0.0.1:8111'
                    } else if (env === 'production') {
                        url = 'https://stat.baoshi56.com'
                    }
                    return url;
                },
                pagination(flag) {
                    if (flag === 'pre' && this.current > 1) {
                        this.current--;
                    } else if (flag === 'next' && this.current < this.details.pages) {
                        this.current++;
                    }
                    let env = "{{ config('env') }}";
                    console.log(env);
                    let url = this.getBaseUrl();
                    let parameters = {
                        current: this.current,
                        size: this.size,
                    };
                    url += `/api/kpiDayWorkCoefficient/list?size=${this.size}&current=${this.current}`;
                    axios.post(url, this.searchBody).then(res => {
                        this.details.data = res.data.data.list;
                        this.details.total = res.data.data.page.total;
                        this.details.current = res.data.data.page.pageNum;
                        this.details.pages = res.data.data.page.pages
                        this.details.size = res.data.data.page.pageSize;
                    });
                },
                rendingHeader() {
                    let column = [
                        {name: 'department_name', value: '工作组', neglect: true, class: "td-cool"},
                        {name: 'stat_time', value: '日期', neglect: true, class: "td-cool"},
                        {name: 'attendance_num', value: '出勤人数', neglect: true, class: "td-cool"},
                        {name: 'official_attendance_num', value: '正式工人数', neglect: true, class: "td-cool"},
                        {name: 'official_work_times', value: '正式工工时', neglect: true, class: "td-cool"},
                        {name: 'temporary_attendance_num', value: '临时工人数', class: "td-cool"},
                        {name: 'temporary_work_times', value: '临时工工时', neglect: true, class: "td-cool"},

                        {name: 'work_total', value: '工作总量', class: "td-warm"},
                        {name: 'quaque_hour_work', value: '每人小时工作量', neglect: true, class: "td-warm"},
                        {name: 'work_cost_total', value: '用工总成本', neglect: true, class: "td-warm"},
                        {name: 'cost_efficiency', value: '能效系数', neglect: true, class: "td-warm"},
                        {name: 'action', value: '操作', neglect: true, class: "td-warm"},
                    ];
                    new Header({
                        el: "table",
                        name: "details",
                        column: column,
                        data: this.details.data,
                        restorationColumn: 'id',
                        fixedTop: ($('#form_div').height()) + ($('#btn').height()) + 2,
                        before: [
                            {colspan: '8', value: '工时', class: "table-header-layer-1"},

                            {colspan: '5', value: '工作量', class: "table-header-layer-1"},
                        ],
                    }).init();
                },
                rendingHeader2() {
                    let column = [
                        {name: 'id', value: '序号'},
                        {name: 'date', value: '日期'},
                        {name: 'ownerName', value: '货主'},
                        {name: 'type', value: '类型'},
                        {name: 'coefficient', value: '计分'},
                        {name: 'typeDetail', value: '单据类型'},
                        {name: 'amount', value: '完成数量'},
                        {name: 'score', value: '总分'},
                    ];
                    new Header({
                        el: "tableDetail",
                        name: "details",
                        column: column,
                        data: this.resData.detail.data,
                        restorationColumn: 'addtime',
                        isCheckAllBox: false,
                        fixedTop: ($('#form_div').height()) + ($('#btn').height()) + 1,
                    }).init();
                },
            },
        });
    </script>
@endsection