@extends('layouts.app')
@section('title')
    称重管理-项目报表
@endsection
@section('content')
    @component('customer.project.menu')@endcomponent
    <div class="container-fluid" id="container">
        <div id="form_div"></div>
        <div>
            <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="areaExport(false)" href="javascript:">导出勾选内容</a>
                <a class="dropdown-item" @click="areaExport(true)" href="javascript:">导出所有页</a>
            </div>
        </div>
        <div>
            <label for="all" id="cloneCheckAll" class="d-none">
                <input id="all" type="checkbox" @click="checkAll($event)">全选
            </label>
            <table class="d-none" id="headerRoll"></table>
            <table class="table table-sm table-striped table-hover" id="headerParent">
                <tr class="text-nowrap" id="header"></tr>
                <tr v-for="(area,i) in areas">
                    <td>
                        <label><input type="checkbox" :value="area.id" v-model="checkData"></label>
                    </td>
                    <td>@{{ i+1 }}</td>
                    <td>
                        <span v-if="area.status=='已完成'" class="text-success">@{{ area.status }}</span>
                        <span v-if="area.status!='已完成' && editIndex!=i"><button class="btn btn-sm btn-outline-info" @click="edit(area,i)">编辑</button></span>
                        <span v-if="editIndex==i">
                            <button class="btn btn-sm btn-success" @click="submitArea()">确定</button>
                            <button class="btn btn-sm btn-danger" @click="editIndex='-1'">取消</button>
                        </span>
                    </td>
                    <td>
                        <label><select @change="thisArea.user_owner_group_id = $event.target.value" :disabled="editIndex==i ? false : true"
                                       :value="area.ownerGroupId" class="form-control form-control-sm">
                            <option v-for="ownerGroup in ownerGroups" :value="ownerGroup.name">@{{ ownerGroup.value }}</option>
                        </select></label>
                    </td>
                    <td>@{{ area.customerName }}</td>
                    <td>@{{ area.ownerName }}</td>
                    <td>@{{ area.countingMonth }}</td>
                    <td>@{{ area.updatedAt }}</td>
                    <td>@{{ area.ownerStoragePriceModelUsingType }}</td>
                    <td>
                        <label><input :readonly="editIndex==i ? false : true" @change="thisArea.area_on_tray = $event.target.value"
                                      type="number" min="0" class="form-control form-control-sm" :value="area.areaOnTray"></label>
                    </td>
                    <td>
                        <label><input :readonly="editIndex==i ? false : true" @change="thisArea.area_on_half_tray = $event.target.value"
                                      type="number" min="0" class="form-control form-control-sm" :value=area.areaOnHalfTray></label>
                    </td>
                    <td>
                        <label><input :readonly="editIndex==i ? false : true" @change="thisArea.area_on_flat = $event.target.value"
                                      type="number" min="0" class="form-control form-control-sm" :value="area.areaOnFlat"></label>
                    </td>
                    <td>@{{ area.accountingArea }}</td>
                </tr>
            </table>
            {{$areas->appends($params)->links()}}
        </div>
    </div>
@stop

@section('lastScript')
    <script type="text/javascript" src="{{mix('js/queryForm/queryForm.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/header.js')}}"></script>
    <script type="text/javascript" src="{{mix('js/queryForm/export.js')}}"></script>
    <script>
        let vue = new Vue({
            el:"#container",
            data:{
                areas : [
                    @foreach($areas as $area)
                    {
                        id : "{{$area->id}}",
                        ownerGroupId : "{{$area->user_owner_group_id}}",
                        ownerName : "{{$area->owner ? $area->owner->name : ''}}",
                        customerName : "{{$area->owner ? ($area->owner->customer ? $area->owner->customer->name : '') : ''}}",
                        countingMonth : "{{$area->counting_month}}",
                        areaOnTray : "{{$area->area_on_tray}}",
                        areaOnHalfTray : "{{$area->area_on_half_tray}}",
                        areaOnFlat : "{{$area->area_on_flat}}",
                        accountingArea : "{{$area->accounting_area}}",
                        status : "{{$area->status}}",
                        updatedAt : "{{$area->updated_at}}",
                        ownerStoragePriceModelUsingType:"{{ $area->owner ? implode(",",array_unique(array_column(($area->owner->ownerStoragePriceModels)->toArray(),"using_type"))) : '' }}",
                    },
                    @endforeach
                ],
                thisArea : {
                    user_owner_group_id : "",
                    area_on_tray : "",
                    area_on_half_tray : "",
                    area_on_flat : "",
                },
                ownerGroups : [
                    @foreach($ownerGroups as $ownerGroup)
                    {name:"{{$ownerGroup->id}}",value:"{{$ownerGroup->name}}"},
                    @endforeach
                ],
                customers : [
                    @foreach($customers as $customer)
                    {name:"{{$customer->id}}",value:"{{$customer->name}}"},
                    @endforeach
                ],
                owners : [
                    @foreach($owners as $owner)
                    {name:"{{$owner->id}}",value:"{{$owner->name}}"},
                    @endforeach
                ],
                status : [{name:"编辑中",value:"编辑中"},{name:"已完成",value:"已完成"}],
                checkData : [],
                editIndex : "-1",
                sum : Number("{{ $areas->total() }}"),
            },
            watch:{
                checkData:{
                    handler(){
                        if (this.checkData.length === this.areas.length){
                            document.querySelector('#all').checked = true;
                            document.querySelector('#all_temp').checked = true;
                        }else {
                            document.querySelector('#all').checked = false;
                            document.querySelector('#all_temp').checked = false;
                        }
                    },
                    deep:true
                }
            },
            mounted(){
                $('#container').removeClass('d-none');
                let data=[
                    [
                        {name:'owner_group_id',type:'select',tip:'项目小组',placeholder: '项目小组',data:this.ownerGroups},
                        {name:'counting_month_start',type:'dateMonth',tip:'起始结算月'},
                        {name:'owner_id',type:'select_multiple_select',tip:['输入关键词快速定位下拉列表，回车确定','选择要显示的项目'],
                            placeholder:['项目','定位或多选项目'],data:this.owners},
                    ],[
                        {name:'customer_id',type:'select',tip:'客户',placeholder: '客户',data:this.customers},
                        {name:'counting_month_end',type:'dateMonth',tip:'结束结算月'},
                        {name:'status',type:'select',tip:'状态',placeholder: '状态',data:this.status},
                    ],
                ];
                this.form = new query({
                    el:"#form_div",
                    condition:data,
                });
                this.form.init();
                let column = [
                    {name:'cloneCheckAll',customization:true,type:'checkAll',column:'id',
                        dom:$('#cloneCheckAll').removeClass('d-none'), neglect: true},
                    {name:'index',value: '序号', neglect: true},
                    {name:'status',value: '状态'},
                    {name:'ownerGroupId',value: '项目组', neglect : true},
                    {name:'customerName',value: '客户'},
                    {name:'ownerName',value: '子项目'},
                    {name:'countingMonth',value: '结算月'},
                    {name:'createdAt',value: '录入时间'},
                    {name:'ownerStoragePriceModelUsingType',value: '用仓类型'},
                    {name:'areaOnTray',value: '货物整托', neglect: true},
                    {name:'areaOnHalfTray',value: '货物半托', neglect: true},
                    {name:'areaOnFlat',value: '平面区面积', neglect: true},
                    {name:'accountingArea',value: '结算面积', neglect: true},
                ];
                let _this=this;
                setTimeout(function () {
                    let header = new Header({
                        el: "#header",
                        column: column,
                        data: _this.reports,
                        restorationColumn: 'id',
                        fixedTop:($('#form_div').height())+2,
                        offset:0.5,
                        vue:vue
                    });
                    header.init();
                },0);
            },
            methods:{
                areaExport(isAll){
                    let url = '{{url('customer/project/area/export')}}';
                    let token='{{ csrf_token() }}';
                    //excelExport 定义在 js/queryForm/export.js
                    excelExport(isAll,this.checkData,url,this.sum,token);
                },
                //全选事件
                checkAll(e){
                    if (e.target.checked){
                        this.areas.forEach((el)=>{
                            if (this.checkData.indexOf(el.id) === '-1'){
                                this.checkData.push(el.id);
                            }
                        });
                    }else {
                        this.checkData = [];
                    }
                },
                edit(area,index){
                    this.editIndex = index;
                    this.thisArea.user_owner_group_id = area.ownerGroupId;
                    this.thisArea.area_on_tray = area.areaOnTray;
                    this.thisArea.area_on_half_tray = area.areaOnHalfTray;
                    this.thisArea.area_on_flat = area.areaOnFlat;
                },
                submitArea(){
                    window.tempTip.confirm("确认要提交该面积的更新吗？",()=>{
                        axios.post("{{url('customer/project/updateArea')}}",{
                            id:this.areas[this.editIndex].id,area:this.thisArea
                        }).then(res=>{
                            if (res.data.success){
                                this.areas[this.editIndex].ownerGroupId = res.data.data["user_owner_group_id"];
                                this.areas[this.editIndex].areaOnTray = res.data.data["area_on_tray"];
                                this.areas[this.editIndex].areaOnHalfTray = res.data.data["area_on_half_tray"];
                                this.areas[this.editIndex].areaOnFlat = res.data.data["area_on_flat"];
                                this.areas[this.editIndex].accountingArea = res.data.data["accounting_area"];
                                this.editIndex = '-1';
                                this.thisArea = {
                                    user_owner_group_id : "",
                                    area_on_tray : "",
                                    area_on_half_tray : "",
                                    area_on_flat : "",
                                };
                                window.tempTip.setDuration(2000);
                                window.tempTip.showSuccess("修改成功");
                                return;
                            }
                            window.tempTip.setDuration(3000);
                            window.tempTip.show(res.data.data);
                        }).catch(err=>{
                            window.tempTip.setDuration(3000);
                            window.tempTip.show("网络错误："+err);
                        })
                    });
                }
            },
        });
    </script>
@stop