@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')
    <div class="wide container demand_warp">
        @include('statistics.module.section.left_menu')
        <div class="cq_rt index_right">
            <div class="inside_timer">
                @include('statistics.module.section.compare_timer')
            </div>
            <div class="char-box">
                <div class="char-title no-icon">按性别分组的供求人数<input type="button" class="export_excel" value="导出为excel"/></div>
                <div id="trend" style="width: 100%;height: 360px;"></div>
            </div>
            <div class="detail-info">
                <div class="table_title">详细数据</div>
                <table border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <th style="width:25%;border-right:1px solid #cdcdcd;" rowspan="2">性别</th>
                        <th colspan="5">劳动力供求人数比较</th>
                    </tr>
                    <tr>
                        <th style="width:15%;">需求人数</th>
                        <th style="width:15%;">需求比重</th>
                        <th style="width:15%;">求职人数</th>
                        <th style="width:15%;">求职比重</th>
                        <th style="width:15%;">求人倍率</th>
                    </tr>
                    @if($table_data)
                        @foreach($table_data as $k=>$v)
                        <tr>
                            @if($compare_flag)
                                <td>{{$v['name']}}</td>
                                <td>{{$compare_table_data[$k]['job_amount']}} / {{$v['job_amount']}}</td>
                                <td>{{$compare_table_data[$k]['job_rate']}}% / {{$v['job_rate']}}%</td>
                                <td>{{$compare_table_data[$k]['resume_num']}} / {{$v['resume_num']}}</td>
                                <td>{{$compare_table_data[$k]['resume_rate']}}% / {{$v['resume_rate']}}%</td>
                                <td>{{$compare_table_data[$k]['multiple']}} / {{$v['multiple']}}</td>
                            @else
                                <td>{{$v['name']}}</td>
                                <td>{{$v['job_amount']}}</td>
                                <td>{{$v['job_rate']}}%</td>
                                <td>{{$v['resume_num']}}</td>
                                <td>{{$v['resume_rate']}}%</td>
                                <td>{{$v['multiple']}}</td>
                            @endif
                        </tr>
                        @endforeach
                    @endif

                </table>
            </div>
        </div>
        <div class="clear"></div>
    </div>
@endsection


@section('script')
    <script type="text/javascript">
        var data_name = [];
        var data_jobs = [];
        var data_resumes = [];
        @if($table_data)
            @foreach($table_data as $k=>$v)
                @if($v['name'] !='合计')
                    data_name.push("{{$v['name']}}");
                    data_jobs.push("{{$v['job_amount']}}");
                    data_resumes.push("{{$v['resume_num']}}");
                @endif
            @endforeach
        @endif
        console.log(data_name);

        var colors = ['#2da1f9','#f9629a'];
        option = {
            title: [{
                left: '5',
                top: '5',
                text: '',
                textStyle:{
                    color:'#565656',
                    fontSize:14,
                    fontWeight:'normal'
                }
            }],
            color:colors,
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['需求人数', '求职人数','求人倍率'],
                align: 'right',
                top:10,
                right: 20,
                itemWidth:18,
                itemHeight:6
            },
            grid: {
                left: '8',
                right: '8',
                bottom: '10',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                boundaryGap:true,
                axisTick:{
                    alignWithLabel:true
                },
                axisLabel:{
                    interval: 0, //坐标轴刻度标签的显示间隔 , 0 强制显示所有标签。
                    //rotate:-45,  //刻度标签旋转的角度
                    margin:15,
                    textStyle: {
                        color: '#333333',
                        fontSize:10
                    }
                },
                data: data_name
            }],
            yAxis: [{
                type: 'value',
                name: '',
                axisLabel: {
                    formatter: '{value}'
                }
            }],
            series: [{
                name: '需求人数',
                type: 'bar',
                barMaxWidth: '40',
                barGap: 0,
                data: data_jobs
            }, {
                name: '求职人数',
                type: 'bar',
                barMaxWidth: '40',
                data: data_resumes
            }]
        };
        var myChart = echarts.init(document.getElementById('trend'));
        myChart.setOption(option);
    </script>
@endsection