@extends('layout.home')
@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>
        .items {padding: 10px 5px;display: flex;flex-direction: column;}
        .topTitle {font-weight: bold;line-height: 30px;color: #000;justify-content: space-between;display: flex}
        .centerBlock {display: flex;}
        .flexCenter {display: flex;flex-direction: column;align-items: center;}
        .flexCenter h3{font-weight: bold;}
        .market{min-width: 50px!important;width: calc(12% - 15px)!important;height: 60px;}
        .rankItems .layui-table-cell {
            line-height: 30px !important;
            vertical-align: middle;
            height: auto !important;
            overflow: visible;
            text-overflow: inherit;
            white-space: normal;
        }
        #demoTabsHeader .layui-btn.layui-this{border-color: #eee; color: unset; background: none;}
    </style>
    <div class="contentpanel contentContainer" style="background: #f5f5f5;">
        <div class="contentRight" style="margin: 0;padding: 10px;">
            <div class="layui-row padding10" id="demoTabsHeader">
                <div class="layui-col-xs6">
                @foreach($allSites as $site=>$siteUrl)
                    @continue(!in_array($site,$mySites))
                    @if($site==$defaultSite)
                        <button data-val="{{$site}}" data-url="{{$siteUrl}}" class="sites layui-btn layui-this">{{$site}}</button>
                    @else
                        <button data-val="{{$site}}" data-url="{{$siteUrl}}" class="sites layui-btn">{{$site}}</button>
                    @endif
                @endforeach
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs6 items">
                    <div class="layui-panel padding10">
                        <div class="topTitle">
                            <div>
                                实时销量 <i class="layui-icon layui-icon-right layui-font-gray layui-font-13"></i>
                            </div>
                            <div class="layui-font-gray layui-font-12" style="font-weight: 100;">
                                更新至 <span id="val1">{{date('Y-m-d H:i:s',$items[$defaultSite]['time'])}}</span>（系统时间）
                            </div>
                        </div>
                        <hr>
                        <div class="centerBlock" style="">
                            <div class="flexCenter" style="width: 20%">
                                <div>销量</div>
                                <h3 class="layui-font-black"><span id="val2">{{$items[$defaultSite]['orderRealTime']['today']['totalSales']}}</span></h3>
                                <div class="layui-font-gray">昨 <span id="val3">{{$items[$defaultSite]['orderRealTime']['yest']['totalSales']}}</span></div>
                            </div>
                            <div class="flexCenter" style="width: 20%">
                                <div>销售额</div>
                                <h3 class="layui-font-blue"><span id="val4">{{$items[$defaultSite]['orderRealTime']['today']['totalAmount']}}</span></h3>
                                <div class="layui-font-gray">昨 <span id="val5">{{$items[$defaultSite]['orderRealTime']['yest']['totalAmount']}}</span></div>
                            </div>
                            <div class="flexCenter" style="width: 20%">
                                <div>订单量</div>
                                <h3 class="layui-font-black"><span id="val6">{{$items[$defaultSite]['orderRealTime']['today']['orderNums']}}</span></h3>
                                <div class="layui-font-gray">昨 <span id="val7">{{$items[$defaultSite]['orderRealTime']['yest']['orderNums']}}</span></div>
                            </div>
                            <div class="flexCenter" style="width: 20%">
                                <div>客单价</div>
                                <h3 class="layui-font-black"><span id="val8">{{$items[$defaultSite]['orderRealTime']['today']['soloPrice']}}</span></h3>
                                <div class="layui-font-gray">昨 <span id="val9">{{$items[$defaultSite]['orderRealTime']['yest']['soloPrice']}}</span></div>
                            </div>
                            <div class="flexCenter" style="width: 20%">
                                <div>退单数</div>
                                <h3 class="layui-font-black"><span id="val10">{{$items[$defaultSite]['orderRealTime']['today']['refundNums']}}</span></h3>
                                <div class="layui-font-gray">昨 <span id="val11">{{$items[$defaultSite]['orderRealTime']['yest']['refundNums']}}</span></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6 items">
                    <div class="layui-panel padding10">
                        <div class="topTitle">
                            <div>
                                实时广告 <i class="layui-icon layui-icon-right layui-font-gray layui-font-13"></i>
                            </div>
                            <div class="layui-font-gray layui-font-12" style="font-weight: 100;">
                                更新至 <span id="val12">{{date('Y-m-d H:i:s',$items[$defaultSite]['time'])}}</span>（系统时间）
                            </div>
                        </div>
                        <hr>
                        <div class="centerBlock">
                            <div class="layui-col-xs2 flexCenter">
                                <div>广告花费</div>
                                <h3 class="layui-font-black"><span id="val13">{{$items[$defaultSite]['advRealTime']['today']['spend']}}</span></h3>
                                <div class="layui-font-gray">昨 <span id="val14">{{$items[$defaultSite]['advRealTime']['yest']['spend']}}</span></div>
                            </div>
                            <div class="layui-col-xs2 flexCenter">
                                <div>广告销售额</div>
                                <h3 class="layui-font-black"><span id="val15">{{$items[$defaultSite]['advRealTime']['today']['sales']}}</span></h3>
                                <div class="layui-font-gray">昨 <span id="val16">{{$items[$defaultSite]['advRealTime']['yest']['sales']}}</span></div>
                            </div>
                            <div class="layui-col-xs2 flexCenter">
                                <div>广告订单量</div>
                                <h3 class="layui-font-black"><span id="val17">{{$items[$defaultSite]['advRealTime']['today']['orders']}}</span></h3>
                                <div class="layui-font-gray">昨 <span id="val18">{{$items[$defaultSite]['advRealTime']['yest']['orders']}}</span></div>
                            </div>
                            <div class="layui-col-xs2 flexCenter">
                                <div>ACOS</div>
                                <h3 class="layui-font-black"><span id="val19">{{$items[$defaultSite]['advRealTime']['today']['acos']??'0'}}</span>%</h3>
                                <div class="layui-font-gray">昨 <span id="val20">{{$items[$defaultSite]['advRealTime']['yest']['acos']??'0'}}</span>%</div>
                            </div>
                            <div class="layui-col-xs2 flexCenter">
                                <div>转化率</div>
                                <h3 class="layui-font-black"><span id="val21">{{$items[$defaultSite]['advRealTime']['today']['cvr']}}</span></h3>
                                <div class="layui-font-gray">昨 <span id="val22">{{$items[$defaultSite]['advRealTime']['yest']['cvr']}}</span></div>
                            </div>
                            <div class="layui-col-xs2 flexCenter">
                                <div>广告费占比</div>
                                <h3 class="layui-font-black"><span id="val23">{{$items[$defaultSite]['advRealTime']['today']['spendRate']??'0'}}</span>%</h3>
                                <div class="layui-font-gray">昨 <span id="val24">{{$items[$defaultSite]['advRealTime']['yest']['spendRate']??'0'}}</span>%</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs12 items">
                    <div class="layui-panel padding10">
                        <div class="topTitle">
                            <div>
                                业绩走势 <i class="layui-icon layui-icon-right layui-font-gray layui-font-13"></i>
                            </div>
                            <div>
                                <button type="button" data-val="seven" class="trendBtn layui-btn layui-btn-xs">前7日</button>
                                <button type="button" data-val="thirty" class="trendBtn layui-btn layui-btn-primary layui-btn-xs">前30日</button>
                            </div>
                        </div>
                        <hr>
                        <div class="centerBlock rankItems" style="height: 400px;">
                            <div class="chartDom">
                                <div class="targetMarket">
                                    @foreach($items[$defaultSite]['fieldList'] as $k=>$field)
                                        <div class="market show {{$k==0?'active ':''}}" data-val="{{$field['val']}}" data-color="{{$field['color']}}" style="{{'border-bottom-color:'.$field['color']}}">
                                            <div class="partName layui-font-gray">{{$field['title']}}</div>
                                            <div class="number layui-font-blue {{$field['val']}}">{{$items[$defaultSite]['sumArr'][$field['val']]}}</div>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="chart" id="chart"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs9 items">
                    <div class="layui-panel padding10">
                        <div class="topTitle">
                            <div>
                                排行榜 TOP <i class="layui-icon layui-icon-right layui-font-gray layui-font-13"></i>
                            </div>
                            <div>
                                <button data-val="today" type="button" class="orderBtn layui-btn layui-btn-primary layui-btn-xs">今日</button>
                                <button data-val="seven" type="button" class="orderBtn layui-btn layui-btn-xs">前7日</button>
                                <button data-val="thirty" type="button" class="orderBtn layui-btn layui-btn-primary layui-btn-xs">前30日</button>
                            </div>
                        </div>
                        <hr>
                        <div class="centerBlock rankItems">
                            <table class="layui-hide" lay-filter="items" id="items"></table>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs3 items">
                    <div class="layui-panel padding10">
                        <div class="topTitle">
                            本月销售计划 <i class="layui-icon layui-icon-right layui-font-gray layui-font-13"></i>
                        </div>
                        <hr>
                        <div class="centerBlock planBlock">
                            <table class="layui-hide" lay-filter="plan" id="plan"></table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-top: 35px; margin-bottom: 35px; text-align: center">
                <div class="col-sm-12">
                    <span>[</span>@lang('lang_template.erp')<span>]</span> @lang('lang_template.copyright')
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            layui.use(function () {
                let table = layui.table;
                let trendData = [];
                let myChart = echarts.init(document.getElementById('chart'));
                let sevenTime = {!! json_encode($sevenTime) !!};
                let thirtyTime = {!! json_encode($thirtyTime) !!};
                let items = {!! json_encode($items) !!};
                let fieldList = {!! json_encode($items[$defaultSite]['fieldList']) !!};
                let allTrendList = {!! json_encode($items[$defaultSite]['trendList']??[]) !!};
                let allOrderList = {!! json_encode($items[$defaultSite]['orderList']??[]) !!};

                let orderList = {!! json_encode(array_values($items[$defaultSite]['orderList']['seven']??[])) !!};
                let planList = {!! json_encode($items[$defaultSite]['planList']) !!};
                let chartType = 'seven';
                let timeList=[];
                let chartItems=[];
                let chartSum=[];
                let siteUrl = '{{$allSites[$defaultSite]}}';
                let site = '{{$defaultSite}}';
                function arrayValues(data) {
                    if (Array.isArray(data)) {
                        return Array.from(data);
                    }
                    if (data !== null && typeof data === 'object') {
                        return Object.values(data);
                    }
                    return [];
                }
                $('.sites').click(function () {
                    site = $(this).data('val');
                    siteUrl = $(this).data('url');
                    if(items[site]==undefined || items[site]==null){
                        layer.msg(site+'站点下无关联账户！');
                        return false;
                    }
                    refreshAllData();
                    $('.sites').removeClass('layui-this');
                    $(this).addClass('layui-this');
                    $('#val1').text(items[site]['time']);
                    $('#val2').text(items[site]['orderRealTime']['today']['totalSales'].toFixed(2));
                    $('#val3').text(items[site]['orderRealTime']['yest']['totalSales'].toFixed(2));
                    $('#val4').text(items[site]['orderRealTime']['today']['totalAmount'].toFixed(2));
                    $('#val5').text(items[site]['orderRealTime']['yest']['totalAmount'].toFixed(2));
                    $('#val6').text(items[site]['orderRealTime']['today']['orderNums'].toFixed(2));
                    $('#val7').text(items[site]['orderRealTime']['yest']['orderNums'].toFixed(2));
                    $('#val8').text(items[site]['orderRealTime']['today']['soloPrice']);
                    $('#val9').text(items[site]['orderRealTime']['yest']['soloPrice']);
                    $('#val10').text(items[site]['orderRealTime']['today']['refundNums'].toFixed(2));
                    $('#val11').text(items[site]['orderRealTime']['yest']['refundNums'].toFixed(2));
                    $('#val13').text(items[site]['advRealTime']['today']['spend'].toFixed(2));
                    $('#val14').text(items[site]['advRealTime']['yest']['spend'].toFixed(2));
                    $('#val15').text(items[site]['advRealTime']['today']['sales'].toFixed(2));
                    $('#val16').text(items[site]['advRealTime']['yest']['sales'].toFixed(2));
                    $('#val17').text(items[site]['advRealTime']['today']['orders'].toFixed(2));
                    $('#val18').text(items[site]['advRealTime']['yest']['orders'].toFixed(2));
                    $('#val19').text(items[site]['advRealTime']['today']['acos'].toFixed(2));
                    $('#val20').text(items[site]['advRealTime']['yest']['acos'].toFixed(2));
                    $('#val21').text(items[site]['advRealTime']['today']['cvr'].toFixed(2));
                    $('#val22').text(items[site]['advRealTime']['yest']['cvr'].toFixed(2));
                    $('#val23').text(items[site]['advRealTime']['today']['spendRate'].toFixed(2));
                    $('#val24').text(items[site]['advRealTime']['yest']['spendRate'].toFixed(2));
                });
                let refreshAllData = function(){
                    planList = items[site]['planList'];
                    allOrderList = items[site]['orderList'];
                    allTrendList = items[site]['trendList'];
                    fieldList = items[site]['fieldList'];
                    if($('.orderBtn.layui-btn-primary').data('val')=='today'){
                        orderList = allOrderList['today'];
                    }else if($('.orderBtn.layui-btn-primary').data('val')=='seven'){
                        orderList = allOrderList['seven'];
                    }else{
                        orderList = allOrderList['thirty'];
                    }
                    orderList = arrayValues(orderList);

                    planTable.reload({data:planList});
                    itemsTable.reload({data:orderList});
                    refresh();
                }


                let planTable = table.render({
                    title: '销售计划',
                    elem: '#plan',
                    data: planList,
                    height: 400,
                    width: $('.planBlock').width(),
                    defaultToolbar: [],
                    initSort: {field: 'okRate', type: 'desc'},
                    cols: [[
                        {fixed:'left',field:'name',align: 'left', title: '产品'},
                        {field:'monthRate',align: 'center',title: '目标完成率',templet:function (d) {return d.monthRate+'%'}},
                        {field:'okRate',align: 'center',title: '实际完成率',sort: true,templet:function (d) {return d.okRate+'%'}},
                    ]],
                    done: function (res) {
                        let that = this;
                        that.elem.next().on('mousedown', 'input[lay-filter="LAY_TABLE_TOOL_COLS"]+', function () {
                            let input = $(this).prev()[0];
                            layui.data('table-filter-order_plan', {key: input.name, value: input.checked})
                        });
                        let items = res.data;
                        if(items.length<1){return false;}
                        that = $("#items").siblings();
                        for (let key in items) {
                            let info = items[key];
                            if(info.color!=''){
                                that.find(".layui-table-box tbody tr[data-index='" + key + "']").css("background-color", info.color);
                            }
                        }
                    },page: false,limit: 100
                });
                let itemsTable = table.render({
                    elem: '#items',
                    data: orderList,
                    height: 400,
                    initSort: {field: 'totalSales', type: 'desc'},
                    defaultToolbar: [],
                    cols: [[
                        {align:'center',title: '图片', templet:function (d) {
                            if(d.cover!=''){
                                let imgUrl = siteUrl+'/upload/img/'+d.cover;
                                if(d.cover.indexOf('https://m.media-amazon.com')!==-1){
                                    imgUrl = d.cover;
                                }
                                return '<img lay-event="seeImg" style="width: 50px;" src="'+imgUrl+'">';
                            }else{
                                return '<img lay-event="seeImg" style="width: 50px;" src="{{ url('/upload/img/no.png')}}">';
                            }
                        }},
                        {field:'sku', title: 'SKU',sort: true},
                        {field:'asin', title: 'ASIN',sort: true},
                        {field:'totalSales', title: '销量',sort: true},
                        {field:'totalAmount', title: '销售额',sort: true},
                        {field:'orderNums', title: '订单数',sort: true},
                        {field:'refundNums', title: '退单量',sort: true},
                        {field:'soloPrice', title: '客单价',sort: true},
                        {field:'refundRate', title: '退单率',sort: true},
                    ]],
                    parseData: function (ret) {
                        return {code: ret.error,msg: ret.msg,count: ret.data.count,data: ret.data.items};
                    },
                    page: false,limit: 100
                });
                $('.orderBtn').click(function () {
                    $('.orderBtn').addClass('layui-btn-primary');
                    if($(this).data('val')=='today'){
                        orderList = allOrderList['today'];
                    }else if($(this).data('val')=='seven'){
                        orderList = allOrderList['seven'];
                    }else{
                        orderList = allOrderList['thirty'];
                    }
                    orderList = arrayValues(orderList);
                    $(this).removeClass('layui-btn-primary');
                    itemsTable.reload({data:orderList});
                });
                $('.trendBtn').click(function () {
                    $('.trendBtn').addClass('layui-btn-primary');
                    chartType = $(this).data('val');
                    $(this).removeClass('layui-btn-primary');
                    chartItems=[];
                    refresh();
                });
                $('.market').click(function () {
                    let isActive = $(this).hasClass('active');
                    let that = $(this);
                    if(!isActive){
                        $('.market').each(function () {
                            $(this).removeClass('active').css('border-color','#e4e7ea');
                        });
                        that.addClass('active').css('border-bottom-color',$(this).data('color'));
                        refreshChart();
                    }
                });
                let refresh=function () {
                    if(chartType=='seven'){
                        timeList = sevenTime;
                        trendData=allTrendList['seven'];
                        chartSum=allTrendList['sevenSum'];
                    }else {
                        timeList = thirtyTime;
                        trendData=allTrendList['thirty'];
                        chartSum=allTrendList['thirtySum'];
                    }
                    chartSum = chartSum||[];
                    $.each(chartSum,function (k,v) {
                        $('.number.'+k).text(v);
                    });
                    chartItems = [];
                    fieldList = fieldList || [];
                    $.each(fieldList,function (k,v) {
                        let data = [];
                        Object.entries(trendData).forEach(([day, arr]) => {
                            data.push(arr[v.val]);
                        });
                        chartItems.push({
                            name:v.val,
                            title:v.title,
                            yIndex:k,
                            data:data
                        })
                    });
                    refreshChart();
                }
                function refreshChart() {
                    let series = [];
                    $('.targetMarket .active').each(function () {
                        let val = $(this).data('val');
                        let color = $(this).data('color');
                        $.each(chartItems,function (k,v) {
                            if(v.name==val){
                                series.push({
                                    name: v.title,
                                    type: 'line',
                                    smooth: true,
                                    color: color,
                                    yAxisIndex: 0,
                                    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);
                }
                refresh();
            });
        });
    </script>
@endsection