@extends('layout.home')
@section('csrf-token')
    <meta name="csrf-token" content="{{ csrf_token() }}" />
@endsection
@section('title', '订单列表')
@section('content')
    @if(Session::get('msg'))
        <div class="alert alert-success">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>{{ Session::get('msg') }}
        </div>
    @endif

    @if(Session::get('dmsg'))
        <div class="alert alert-danger">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>{{ Session::get('dmsg') }}
        </div>
    @endif
    <style>
        .layui-table-cell {
            line-height: 30px !important;
            vertical-align: middle;
            height: auto !important;
            overflow: visible;
            text-overflow: inherit;
            white-space: normal;
        }
    </style>
    <div class="contentpanel contentContainer">
        <div class="contentRight" style="margin-left:0">
            <div class="chartDom">
                <div class="targetMarket">
                    @foreach($fieldList as $field)
                    <div class="market {{$field['isShow']?'show active':''}}" data-val="{{$field['val']}}" data-color="{{$field['color']}}" style="{{$field['isShow']?'border-bottom-color:'.$field['color']:''}}">
                        <div class="closeField"><i class="layui-icon layui-icon-close"></i></div>
                        <div class="partName">{{$field['title']}}</div>
                        <div class="number {{$field['val']}}">{{$sumArr[$field['val']]}}</div>
                    </div>
                    @endforeach
                    <div class="market addMarket">+ 添加指标</div>
                </div>
                <div class="marketList">
                    @foreach($fieldList as $field)
                    <div class="market {{$field['isShow']?'added':''}}" data-val="{{$field['val']}}">
                        <div class="partName">{{$field['title']}}</div>
                        <div class="number {{$field['val']}}">{{$sumArr[$field['val']]}}</div>
                    </div>
                    @endforeach
                </div>
                <div class="chart" id="chart"></div>
            </div>
            <form class="filterList layui-form">
                <div class="formList mr20">
                    <div id="chooseTime"></div>
                    <input type="text" name="time" id="time" autocomplete="off" value="{{$time}}" class="layui-input">
                </div>
                <div class="formList mr20">
                    <input type="text" name="title" autocomplete="off" placeholder="请输入SKU & ASIN" class="layui-input">
                </div>
                <div class="formList mr20">
                    <select name="sitename">
                        @foreach($sites as $site)
                            <option value="{{$site}}">{{$site}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="formList mr20">
                    <input type="radio" name="groupType" value="Ymd" title="日" checked="checked">
                    <input type="radio" name="groupType" value="Y-W" title="周">
                    <input type="radio" name="groupType" value="Y-m" title="月">
                </div>
                <div class="formList mr30">
                    <button type="submit" lay-submit lay-filter="searchList" class="layui-btn layui-btn-sm" id="searchList">搜索</button>
                </div>
            </form>
            <div class="itemList">
                <table lay-filter="list" id="list"></table>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            layui.use(function () {
                let $ = layui.$;
                let table = layui.table;
                let form = layui.form;
                let laydate = layui.laydate;
                let timeList = eval('{!! json_encode($timeList) !!}');
                let sevenItems = {!! json_encode($sevenItems) !!};
                var chartItems = eval('{!! json_encode($chart) !!}');
                var data={!! json_encode($items) !!};
                let times =  eval('{!! json_encode($times) !!}');
                $('.downOrder').click(function (){
                    let type = $(this).data('type');
                    let time = $('#time').val();
                    let link = '{{url('order/downOrderByMonth',['type'=>'_type_','time'=>'_time_'])}}';
                    link = link.replace('_type_',type);
                    link = link.replace('_time_',time);
                    window.open(link);
                });

                laydate.render({elem: '#time',range:true,shortcuts:times,trigger: 'click',rangeLinked: true,done: function(value, date, endDate){
                    $('#time').val(value).focus();
                    return false;
                }});
                var cols = [[
                    {field:'key',  title: 'SKU',totalRowText:'合计总和',width:160},
                    {field:'orderNums',  title: '订单量',sort: true,totalRow:true},
                    {field:'quantity',  title: '销量',sort: true,totalRow:true},
                    {field:'price', title: '销售额',sort: true,totalRow:true},
                    {field:'refund',  title: '退款量',sort: true,totalRow:true},
                    {field:'refundRate', title: '退款率'},
                    {field:'soloPrice', title: '客单价',sort: true,totalRow:false},
                ]];
                //搜索事件
                form.on('submit(searchList)', function(data){
                    layer.load(3, {shade: [0.1, '#333333']});
                    params = data.field;
                    params._token = "{{ csrf_token() }}";
                    $.post('{{url('/order/orderList')}}', params, function (ret) {
                        if (ret.error != 0) {
                            layer.msg(ret.msg, {icon: 5});
                            return false;
                        }
                        layer.closeAll('loading')
                        data = ret.data.items;
                        chartItems = ret.data.chart;
                        timeList = ret.data.timeList;
                        sevenItems = ret.data.sevenItems;
                        refreshChart();
                        $.each(ret.data.sumArr,function (k,v) {
                            $('.number.'+k).text(v);
                        });
                        itemsTable.reload({data:data});
                    }, 'json');
                    return false;
                });
                // 活动列表
                let itemsTable = table.render({
                    elem: '#list', skin:'nob', totalRow:true, height:$('.itemList').height()-20, width:$('.itemList').width(),
                    toolbar: true, defaultToolbar: ['filter', 'exports'], cols: cols,
                    parseData: function (ret) {
                        return {code: ret.error,msg: ret.msg,count: ret.data.count,data: ret.data.items};
                    },
                    page: false, data: data, limit: 100, limits: [50, 100, 150, 200], text: {none: '无数据'}
                });
                // 展示隐藏字段仓库
                $('.addMarket').click(function () {
                    let isActive = $(this).hasClass('showMarketList');
                    if(isActive){
                        $(this).removeClass('showMarketList');
                        $('.marketList').removeClass('active');
                    }else{
                        $(this).addClass('showMarketList');
                        $('.marketList').addClass('active');
                    }
                });
                var myChart = echarts.init(document.getElementById('chart'));
                refreshChart();
                //关闭字段
                $('.closeField').click(function () {
                    let that = $(this).parent();
                    let val = that.removeClass('active').removeClass('show').css('border-color','#e4e7ea').data('val');
                    //展示字段数小于5个，则展示出来
                    if($('.targetMarket .show').length<5){
                        $('.addMarket').css('display','flex').appendTo($('.targetMarket'));
                    }
                    $('.marketList .market').each(function () {
                        if($(this).data('val')==val){
                            $(this).removeClass('added');
                            return false;
                        }
                    });
                    // 刷新折线图
                    refreshChart();
                    return false;
                });
                //字段点击事件
                $('.market').click(function () {
                    if($(this).hasClass('addMarket')){
                        return false;
                    }
                    if($(this).hasClass('added')){
                        return false;
                    }
                    let isChoose = $(this).parent().hasClass('targetMarket');
                    if(isChoose){
                        //点击的是已选择字段，根据状态展示折线图中此字段显示情况
                        let isActive = $(this).hasClass('active');
                        if(isActive){
                            // 点击已打开的字段则是关闭
                            $(this).removeClass('active').css('border-color','#e4e7ea');
                        }else{
                            // 点击已关闭的字段则是打开
                            $(this).addClass('active').css('border-bottom-color',$(this).data('color'));
                        }
                        // 刷新折线图
                        refreshChart();
                    }else{
                        //点击的是待选字段，先隐藏最后一个已选择字段，再将这个添加到已选择字段
                        let val =  $(this).data('val');
                        if($('.targetMarket .market.show').length==4){
                            //展示第五个字段时候隐藏添加字段按钮
                            $('.addMarket').css('display','none');
                        }
                        $('.targetMarket .market').each(function () {
                            if($(this).data('val')==val){
                                $(this).addClass('show').appendTo($('.targetMarket'));
                                return false;
                            }
                        });
                        $('.marketList .market').each(function () {
                            if($(this).data('val')==val){
                                $(this).addClass('added');
                                return false;
                            }
                        });
                        $('.marketList').removeClass('active');
                        $('.addMarket').removeClass('showMarketList').appendTo($('.targetMarket'));
                    }
                    return false;
                });
                //刷新折线图
                function refreshChart() {
                    let series = [];
                    $('.targetMarket .show.active').each(function () {
                        let val = $(this).data('val');
                        let color = $(this).data('color');
                        let yAxisIndex=0;
                        $.each(chartItems,function (k,v) {
                            if(v.name==val){
                                yAxisIndex +=1;
                                series.push({
                                    name: v.title,
                                    type: 'line',
                                    smooth: true,
                                    color: color,
                                    yAxisIndex: v.yIndex,
                                    data:v.data,
                                });
                            }
                        });
                    });
                    let config = {
                        tooltip: {
                            trigger: 'axis',
                            formatter:function (params) {
                                let html = '<div style="font-weight: bold">'+params[0].axisValue+'</div>';
                                $.each(params,function (k,v) {
                                    let num = v.value;

                                    html += '<div>' +
                                        '<span style="width:10px;height:10px;border-radius:10px;margin-right:15px;display:inline-block;background-color: '+v.color+'"></span>' +
                                        '<span style="display:inline-block;min-width: 115px">'+v.seriesName+'</span>' +
                                        '<span style="display:inline-block;width: 100%">'+num+'</span>' +
                                        '<div>';
                                });
                                return html;
                            }
                        },
                        grid: {left: '2%',right: '2%',bottom: '2%',containLabel: true},
                        xAxis: {type: 'category',data: timeList},
                        yAxis: [
                            {
                                type: 'value',
                                splitLine: {lineStyle: {color: ['#ccc'],width: 0,type: 'solid'}},
                            },
                            {
                                type: 'value',
                                splitLine: {lineStyle: {color: ['#ccc'],width: 1,type: 'solid'}},
                                axisLabel: {formatter: function (val) {return val + '%';}},
                            }
                        ],
                        series: series,
                    };
                    myChart.setOption(config,true);
                }
            });
        });
    </script>
@endsection