@extends('statistics.module.layouts.content')

@push('meta')

@endpush

@push('css')

@endpush

@push('js')
    <script src="{{ theme_asset('app/js/echarts.common.min.js') }}"></script>
@endpush

@section('content')

    <style>
        .jobfair_warp .summary_one .box-cell{width:25%;}
    </style>

    <div class="wide container jobfair_warp">
        @include('statistics.module.section.left_menu')
        <div class="cq_rt index_right">
            <div class="inside_timer">
                @include('statistics.module.section.timer')
            </div>
            <div class="summary_one">

                <div class="box-cell line">
                    <div class="line-one">举办场次<span>{{$jobfair_num}}</span></div>
                </div>

                <div class="box-cell line">
                    <div class="line-one">招聘企业数<span>{{$company_nums}}</span></div>
                </div>
                <div class="box-cell line">
                    <div class="line-one">招聘岗位数<span>{{$jobs_nums}}</span></div>
                </div>
                <div class="box-cell">
                    <div class="line-one">招聘会需求总数<span>{{$jobs_amounts}}</span></div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="char-box c1">
                <div class="char-title no-icon">性别分布</div>
                <div id="gender" style="width: 100%;height: 275px;"></div>
            </div>
            <div class="char-box c2">
                <div class="char-title no-icon">学历分布</div>
                <div id="education" style="width: 100%;height: 275px;"></div>
            </div>
            <div class="char-box c3">
                <div class="char-title no-icon">年龄分布</div>
                <div id="census" style="width: 100%;height: 275px;"></div>
            </div>
            <div class="clear"></div>
            <div class="detail-info">
                <div class="table_title">详细数据</div>
                <table border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <th style="width: 150px;">排序</th>
                        <th style="width: 380px;">职位大类</th>
                        <th style="width: 170px;">需求人数</th>
                        <th style="width: 200px;">求职登记人数</th>
                    </tr>
                    @if($topclass_data)
                        @foreach($topclass_data as $k => $v)
                            <tr>
                                <td>{{$v['order']}}</td>
                                <td>{{$v['name']}}</td>
                                <td>{{$v['value']}}</td>
                                <td>{{$v['resume_num']}}</td>
                            </tr>
                        @endforeach
                    @else
                        <tr>
                            <td colspan="4" text-align="center">暂无数据</td>
                        </tr>
                    @endif
                </table>
            </div>
        </div>
        <div class="clear"></div>
    </div>

@endsection


@section('script')
    <script type="text/javascript">
        var colorList =["#ec948a","#54b7ea","#eab374","#61c5d0","#bddb89","#99b5ff","#797bac","#a9e0d4","#61c5d0","#8bc0df"];
        var genderColorList=["#4d8dff","#ff6992"]
        // 性别分布
        var chartData1 = [];
        var chartName1 = [];
            @if($sex_arr)
            @foreach ($sex_arr as $k => $v)
            chartData1.push({value:"{{$v}}", name:"{{$k}}"});
            chartName1.push("{{$k}}");
            @endforeach
        @else
            chartData1 = [{value:0,name:'男'},	{value:0,name:'女'}];
            chartName1 = ['男','女'];
        @endif
        var myChart1 = echarts.init(document.getElementById('gender'));
        myChart1.setOption({
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'horizontal',
                textStyle:{
                    color:'#555555',
                    fontSize: 12,
                },
                left:10,
                top:210,
                itemWidth:15,
                itemHeight:8,
                data:chartName1
            },
            series: [
                {
                    name:'性别分布',
                    type:'pie',
                    radius: ['45%', '65%'],
                    center: ['50%', '40%'],
                    clockwise :true,
                    z:10,
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                return genderColorList[params.dataIndex]
                            },
                        }
                    },
                    label: {
                        show:false
                        /*normal: {
                              formatter:'{b}: {d}%'
                        }*/
                    },
                    labelLine: {
                        normal: {
                            length: 20,
                            length2: 0,
                            lineStyle:{
                                width:2
                            }
                        }
                    },
                    data:chartData1
                }
            ]
        });
        // 学历分布
        var chartData2 = [];
        var chartName2 = [];
        @if ($edu_arr)
            @foreach($edu_arr as $k=>$v)
                chartData2.push({value:"{{$v['value']}}", name:"{{$v['name']}}"});
                chartName2.push("{{$v['name']}}");
            @endforeach
        @endif
        var myChart2 = echarts.init(document.getElementById('education'));
        myChart2.setOption({
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'horizontal',
                textStyle:{
                    color:'#555555',
                    fontSize: 12,
                },
                left:10,
                top:210,
                itemWidth:15,
                itemHeight:8,
                data:chartName2
            },
            series: [
                {
                    name:'学历分布',
                    type:'pie',
                    radius: ['45%', '65%'],
                    center: ['50%', '40%'],
                    clockwise :true,
                    z:10,
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                // build a color map as your need.
                                return colorList[params.dataIndex]
                            },
                        }
                    },
                    label: {
                        show:false
                        /*normal: {
                              formatter:'{b}: {d}%'
                        }*/
                    },
                    labelLine: {
                        normal: {
                            length: 20,
                            length2: 0,
                            lineStyle:{
                                width:2
                            }
                        }
                    },
                    data:chartData2
                }
            ]
        });

        // 年龄分布(户籍分布)
        var chartName3 = [];
        var chartData3 = [];
        @if($age_data)
            @foreach ($age_data as $k => $v)
                chartData3.push({value:"{{$v}}", name:"{{$k}}"});
                chartName3.push("{{$k}}");
            @endforeach
        @else
            chartData3 = [{value:0,name:'18-22岁'},{value:0,name:'23-25岁'},{value:0,name:'26-30岁'},{value:0,name:'31-40岁'},{value:0,name:'41-50岁'},{value:0,name:'51-60岁'},{value:0,name:'60岁以上'}];
            chartName3 = ['18-22岁','23-25岁','26-30岁','31-40岁','41-50岁','51-60岁','60岁以上'];
        @endif
        /*var chartData3 = [
            {value:324,name:'江苏'},
            {value:24,name:'浙江'},
            {value:24,name:'附近'},
            {value:44,name:'云南'},
            {value:224,name:'四川'},
            {value:124,name:'山东'},
            {value:34,name:'辽宁'},
            {value:14,name:'北京'},
            {value:14,name:'安徽'},
            {value:10,name:'河南'}
        ]
        var chartName3 = ['江苏','浙江','附近','云南','四川','医生','辽宁','北京','安徽','河南'];*/
        var myChart3 = echarts.init(document.getElementById('census'));
        myChart3.setOption({
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'horizontal',
                textStyle:{
                    color:'#555555',
                    fontSize: 12,
                },
                left:10,
                top:210,
                itemWidth:15,
                itemHeight:8,
                data:chartName3
            },
            series: [
                {
                    name:'年龄分布',
                    type:'pie',
                    radius: ['45%', '65%'],
                    center: ['50%', '40%'],
                    clockwise :true,
                    z:10,
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                // build a color map as your need.
                                return colorList[params.dataIndex]
                            },
                        }
                    },
                    label: {
                        show:false
                        /*normal: {
                              formatter:'{b}: {d}%'
                        }*/
                    },
                    labelLine: {
                        normal: {
                            length: 20,
                            length2: 0,
                            lineStyle:{
                                width:2
                            }
                        }
                    },
                    data:chartData3
                }
            ]
        });
    </script>
@endsection