@extends('base.base')
@section('base')
    <!-- 内容区域 -->
    <div class="main-panel">
        <div class="content-wrapper">
            <div class="page-header">
                <h3 class="page-title">
                     <span class="page-title-icon bg-gradient-primary text-white mr-2">
                        <i class="mdi mdi-settings"></i>
                    </span>
                    {{ __('auto.库存变化曲线') }}

                </h3>

                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">{{ __('auto.库存变化曲线') }}</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{ __('auto.用户控制') }}</li>
                    </ol>
                </nav>
            </div>
            <div class="row">
                <div class="col-lg-12 grid-margin stretch-card">
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title">{{ __('auto.库存变化曲线') }}</h4>
                            <form class="well form-inline margin-top-20" method="get" action='/admin/stock/change'>
                                <spen style="padding-left: 10px" >{{ __('auto.库存选择：') }}</spen>
                                <select class="form-control" name="type" value="{{$type}}" style="color: black" onchange="gradeChange(this.options[this.options.selectedIndex].value)">
                                    <option value="">{{ __('auto.全部') }}</option>
                                    @foreach($stocks as $key=>$val)
                                        <option value="{{$key}}" @if ($type == $key)
                                            selected
                                        @endif>{{$val}}</option>
                                    @endforeach
                                </select> &nbsp;&nbsp;

                                <spen style="padding-left: 10px" >{{ __('auto.房间选择：') }}</spen>
                                <select class="form-control" name="roomID" value="" style="color: black" id="room_list">
                                    <option value="">{{ __('auto.全部') }}</option>
                                    @foreach($roomList as $key=>$val)
                                        <option value="{{$val->ServerID}}" @if ($room == $val->ServerID)
                                        selected
                                            @endif>{{$val->ServerName}}</option>
                                    @endforeach
                                </select> &nbsp;&nbsp;

                                <spen style="padding-left: 10px" >{{ __('auto.选择时间：') }}</spen>
                                <input type="datetime-local"  step="01" name="start_time" class="form-control" value="{{$start_time}}" />&nbsp;&nbsp;
                                <input type="datetime-local"  step="01" name="end_time" class="form-control" value="{{$end_time}}" />&nbsp;&nbsp;

                                <spen style="padding-left: 10px" >{{ __('auto.选择时间：') }}</spen>
                                <select class="form-control" name="date" value="" style="color: black">
                                    <option value="">{{ __('auto.全部') }}</option>
                                    @foreach($dates as $key=>$val)
                                        <option value="{{$key}}" @if ($choice_date == $key)
                                            selected
                                        @endif>{{$val}}</option>
                                    @endforeach
                                </select> &nbsp;&nbsp;

                                <input type="submit" class="btn btn-sm btn-gradient-dark btn-icon-text" value="{{ __('auto.搜索') }}"/>&nbsp;&nbsp;
                                <a href="/admin/stock/change" class="btn btn-sm btn-gradient-warning btn-icon-text">{{ __('auto.清空') }}</a>&nbsp;&nbsp;
                                <a href="/admin/stock/change?excel=1&start_time={{$start_time}}&end_time={{$end_time}}&roomID={{$room}}" class="btn btn-sm btn-gradient-light btn-icon-text">{{ __('auto.导出') }}</a>
                            </form>
                            <div  style="margin-left:20px;float: left ;width: 100%;height:400px;" id="zhexian" >


                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入 ECharts 文件 -->
    <script src="/assets/js/echarts.min.js"></script>

    <script>


        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('zhexian'));
        option = {
            title: {
                text: '{!! $title !!}'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: []
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: {!! $date !!}
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '{!! $title !!}',
                    type: 'line',
                    stack: '{{ __('auto.库存') }}',
                    data: {!! $list !!},
                },
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

    <script>

        $(function(){
            cutStr(50);
        });

        function gradeChange(value) {

            myRequest("/admin/stock/room_list", "get", {'type': value}, function (res) {
                var data = res.data
                var html = ''
                for (var i of data) {
                    html += '<option value=' + i['ServerID'] + '>' + i['ServerName'] + '</option>'
                }
                $("#room_list").html(html)
            });
        }
    </script>
@endsection