{extend name="base"/}
{block name="resources"}
<style>
	/* 商品整体概况 */
	/* 头部 */
	.ns-card-common:first-child {
		margin-top: 0;
	}
	
	.ns-card-head-right {
		display: flex;
		align-items: center;
	}
	
	.ns-card-head-right .layui-form-item {
		margin-bottom: 0;
	}
	
	.current-time, .ns-flow-time-today {
		margin-left: 10px;
		line-height: 34px;
	}
	/* 头部 end */

	.ns-goods-survey-title {
		font-size: 17px;
		font-weight: 600;
		color: #000000;
	}

	.layui-table[lay-skin=line] {
		border-width: 0;
	}
	.layui-table-tr {
		display: flex;
		justify-content: space-between;
	}
	.ns-goods-intro-num {font-size: 18px;font-weight: 600;margin-top: 10px;}
	.layui-table{color:black;}
	.ns-card-common .ns-card-title{font-size: 18px;}
	.layui-layout-admin .layui-body .ns-body-content{background:none;}
	.layui-card{background:none;}
	.layui-table{background:none;}
	.ns-shop-table tr{padding: 0 !important;}
	.layui-table[lay-size=lg] td, .layui-table[lay-size=lg] th{padding: 0 !important;width: 24%;}
	.ns-goods-intro-block{width:100%;height: 160px;background:rgb(248,241,235);padding-top:50px;box-sizing: border-box;}
	.ns-goods-intro-block-backgroundone{background: rgb(235,243,248);}
	.ns-goods-intro-block-backgroundtwo{background: rgb(248,236,235);}
	.ns-goods-intro-block-backgroundthree{background: rgb(235,247,247);}
	.ns-goods-intro-block p{text-align: center;}
	.layui-form-item .layui-inline{margin:0;margin-left:20px;}
	.ns-card-brief .layui-card-header{display: flex;align-items: center;}
	.layui-card-header{line-height:14px;}
	.layui-input{background:white !important;}
	.ns-calendar{z-index: 555555;}
	.ns-goods-intro-num {font-size: 36px;font-weight: 600;margin-top: 16px;}
	.layui-card-body-flex{display: flex;justify-content: space-between;align-items: center;}
	.layui-input-block{margin-left: 20px;}
	.layui-card-header-die{margin-top:26px;display: flex;align-items: center;justify-content: space-between;margin-bottom:40px;padding-left:20px;box-sizing: border-box;}
	.layui-card-header-die .ns-card-titleDie {font-size:18px;}
	.die-table{background:white;width: 100%;display: flex;justify-content: space-between;padding: 16px;box-sizing: border-box;}
	.die-table-content{width:46%;height:100%;}
	.die-table-center{width:1px;height:auto;background:rgb(230,230,230);}
	.ns-card-titleDie{width: 300px;height: 14px;border-left:3px solid #FF6A00;padding-left:14px;font-weight: 600;}
	.layui-card-header{height: auto;}
</style>
{/block}
{block name="main"}
<!-- 商品整体概况 -->
<div class="layui-card ns-card-common ns-card-brief">
	<div class="layui-card-header ">
		<span class="ns-card-title">商品概况</span>
		
		<div class="ns-card-head-right layui-form">
			<div class="layui-form-item">
				<div class="layui-input-block ns-len-mid">
					<select name="survey-date" lay-filter="date">
						<option value="1">今日实时</option>
						<option value="7">近7天</option>
						<option value="30">近30天</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
			    <div class="layui-inline survey-date">
			        <div class="layui-input-inline">
			            <input type="text" class="layui-input" name="survey_start_time" placeholder="开始时间" id="survey_start_time" readonly>
			            <i class="ns-calendar"></i>
			        </div>
					<div class="layui-form-mid layui-form-mid-die" style="display: none">-</div>
					<div class="layui-input-inline layui-input-inline-die" style="display: none">
						<input type="text" class="layui-input" name="survey_end_time" placeholder="结束时间" id="survey_end_time" readonly>
						<i class="ns-calendar"></i>
					</div>
			    </div>
			</div>
		</div>
	</div>
	<div class="layui-card-body">
		<table class="layui-table" lay-skin="line" lay-size="lg">
			<tbody>
				<tr class="layui-table-tr">
					<td>
						<div class="ns-goods-intro-block">
							<p>新增商品</p>
							<p class="ns-goods-intro-num" id="addGoodsCount">0</p>
						</div>
					</td>
					<td>
						<div class="ns-goods-intro-block ns-goods-intro-block-backgroundone">
							<p>商品浏览</p>
							<p class="ns-goods-intro-num" id="visitCount">0</p>
						</div>
					</td>
					<td>
						<div class="ns-goods-intro-block">
							<p>商品收藏</p>
							<p class="ns-goods-intro-num" id="collectGoods">0</p>
						</div>
					</td>
                    <td>
                        <div class="ns-goods-intro-block ns-goods-intro-block-backgroundthree">
                            <p>订单商品</p>
                            <p class="ns-goods-intro-num" id="goodsPayCount">0</p>
                        </div>
                    </td>
				</tr>
			</tbody>
		</table>
	</div>
</div>

<!-- 商品趋势分析 -->
<div class="layui-card ns-card-common ns-card-brief">
	<div class="layui-card-header">
		<span class="ns-card-title">商品趋势分析</span>
		
		<div class="ns-card-head-right layui-form">
			<div class="layui-form-item">
				<div class="layui-input-block ns-len-mid">
					<select name="date" lay-filter="date_chart">
						<option value="7">近7天</option>
						<option value="30">近30天</option>
					</select>
				</div>
			</div>
			<div class="layui-form-item">
			    <div class="layui-inline">
			        <div class="layui-input-inline">
			            <input type="text" class="layui-input" name="start_time" placeholder="开始时间" id="start_time" readonly >
			            <i class="ns-calendar"></i>
			        </div>
			        <div class="layui-form-mid">-</div>
			        <div class="layui-input-inline">
			            <input type="text" class="layui-input" name="end_time" placeholder="结束时间" id="end_time" readonly >
			            <i class="ns-calendar"></i>
			        </div>
			    </div>
			</div>
		</div>
	</div>
	<div class="layui-card-body">
		<div id="main" style="width: 100%; height: 400px;background:white;padding-top:14px;box-sizing: border-box;"></div>
	</div>
</div>
<div class="layui-card-header  layui-card-header-die">
	<p class="ns-card-title ns-card-titleDie">商品排行榜</p>
	<div class="ns-card-head-right layui-form">
		<div class="layui-form-item">
			<div class="layui-input-block ns-len-mid">
				<select name="date" lay-filter="date_two">
					<option value="">全部</option>
					<option value="7">近7天</option>
					<option value="30">近30天</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-inline">
				<div class="layui-input-inline">
					<input type="text" class="layui-input" name="start_time_two" placeholder="开始时间" id="start_time_two" readonly>
					<i class="ns-calendar"></i>
				</div>
				<div class="layui-form-mid">-</div>
				<div class="layui-input-inline">
					<input type="text" class="layui-input" name="end_time_two" placeholder="结束时间" id="end_time_two" readonly>
					<i class="ns-calendar"></i>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="layui-card-header">
	<div class=" die-table">
		<div class="die-table-content">
			<table id="solution_list_left" lay-filter="solution_list"></table>
		</div>
		<div class="die-table-center"></div>
		<div class="die-table-content">
			<table id="solution_list_right" lay-filter="solution_list"></table>
		</div>
	</div>
</div>

{/block}
{block name="script"}
<script src="SHOP_JS/echarts.min.js"></script>
<script>
    $(function() {
    	var surveyDateLimit = datePick(1);
        $('[name="survey_start_time"]').val(surveyDateLimit.start)
        $('[name="survey_end_time"]').val(surveyDateLimit.end)
        getGoodsStat(1);

        var dateLimit = datePick(7);
        $('[name="start_time"]').val(dateLimit.start);
        $('[name="end_time"]').val(dateLimit.end);
        getGoodsStatChart();
    });

	layui.use(['form', 'laydate','table'], function() {
		var form = layui.form;
        var laydate = layui.laydate;
        var table = layui.table;
		form.render();

        /**
         * 监听下拉框
         */
        form.on('select(date)', function(data) {
        	if (data.value == 1) {
				$('.survey-date .layui-form-mid-die,.survey-date .layui-input-inline-die').css('display', 'none');
			} else {
				$('.survey-date .layui-form-mid-die,.survey-date .layui-input-inline-die').css('display', 'inline-block');
			}
			var dateLimit = datePick(data.value);
            $('[name="survey_start_time"]').val(dateLimit.start)
            $('[name="survey_end_time"]').val(dateLimit.end)
            getGoodsStat(data.value);
        });

        /**
         * 图表监听下拉框
         */
        form.on('select(date_chart)', function(data) {
            var dateLimit = datePick(data.value);
            $('[name="start_time"]').val(dateLimit.start)
            $('[name="end_time"]').val(dateLimit.end)
            getGoodsStatChart();
        });
		/**
		 * 图表监听下拉框
		 */
		form.on('select(date_two)', function(data) {
            var dateLimit = {start: '', end: ''};
		    if (data.value) {
                var dateLimit = datePick(data.value);
            }
            $('[name="start_time_two"]').val(dateLimit.start)
            $('[name="end_time_two"]').val(dateLimit.end)
            saleNumTable.reload();
            saleMoneyTable.reload();
		});
		
		//日期
		laydate.render({
			elem: '#survey_start_time',
			max: 0,
			done: function(value, date, endDate){
                getGoodsStat($('[name="survey-date"]').val());
		    }
		});
		laydate.render({
			elem: '#survey_end_time',
			max: 0,
			done: function(value, date, endDate){
                getGoodsStat($('[name="survey-date"]').val());
		    }
		});

		//渲染时间
		laydate.render({
		    elem: '#start_time',
		    done: function(value, date, endDate){
				getGoodsStatChart()
		        // $(".date-picker-btn").removeClass("selected");
		    }
		});
		laydate.render({
		    elem: '#end_time',
			max:0,
		    done: function(value, date, endDate){
				getGoodsStatChart()
		        // $(".date-picker-btn").removeClass("selected");
		    }
		});

		//渲染时间
		laydate.render({
		    elem: '#start_time_two',
		    type: 'date',
            done: function(value, date, endDate){
                saleNumTable.reload({where: { start_time: $('[name="start_time_two"]').val(), end_time: $('[name="end_time_two"]').val()} });
                saleMoneyTable.reload({where: { start_time: $('[name="start_time_two"]').val(), end_time: $('[name="end_time_two"]').val() }});
		    }
		});
		laydate.render({
		    elem: '#end_time_two',
		    type: 'date',
            done: function(value, date, endDate){
                saleNumTable.reload({where: { start_time: $('[name="start_time_two"]').val(), end_time: $('[name="end_time_two"]').val()} });
                saleMoneyTable.reload({where: { start_time: $('[name="start_time_two"]').val(), end_time: $('[name="end_time_two"]').val() }});
		    }
		});
		
	});

    //获取商品统计
    function getGoodsStat(value){
    	if (value == 1) {
			var data = {start_time: $('[name="survey_start_time"]').val() + ' 00:00:00', end_time: $('[name="survey_start_time"]').val() + ' 23:59:59'}
		} else {
			var data = {start_time: $('[name="survey_start_time"]').val(), end_time: $('[name="survey_end_time"]').val()}
		}
        $.ajax({
            dataType: 'JSON',
            type: 'POST',
            url: ns.url("shop/stat/goods"),
            data: data,
            success: function(res){
                if (res.code == 0) {
                    $("#addGoodsCount").html(res.data.add_goods_count);
                    $("#visitCount").html(res.data.visit_count);
                    $("#collectGoods").html(res.data.collect_goods);
                    $("#goodsPayCount").html(res.data.goods_pay_count);
                }else{
                    layer.msg(res.message);
                }
            }
        });
    }

    //获取商品统计图表
    function getGoodsStatChart(){
        $.ajax({
            dataType: 'JSON',
            type: 'POST',
            url: ns.url("shop/stat/getgoodsstatlist"),
            data: {
                start_time: $('#start_time').val(),
                end_time: $('#end_time').val()
            },
            success: function(res){
                option.xAxis.data = res.time;
                option.series[0].data = res.goods_pay_count;
                option.series[1].data = res.collect_goods;
				option.series[2].data = res.visit_count;
                $(".current-time").html(res.time_range);
                myChart.setOption(option);
            }
        });
    }


	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));
	
	// 指定图表的配置项和数据
	option = {
		tooltip: {
			trigger: 'axis'
		},
		legend: {
			data: ['商品订单数', '商品收藏数', '商品浏览数'],
			textStyle: {
				fontSize: 14,
				color: "#000"
			}
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: []
		},
		yAxis: {
			type: 'value',
			axisLabel: {
				formatter: '{value} 个'
			},
			splitLine:{
			　　show:false
			},
			
		},
		series: [{
				name: '商品订单数',
				type: 'line',
				smooth: true,
				data: [],
			},
			{
				name: '商品收藏数',
				type: 'line',
				smooth: true,
				data: [],
			},
			{
				name: '商品浏览数',
				type: 'line',
				smooth: true,
				data: [],
			}
		]
	};

	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
	//表格
	var saleNumTable = new Table({
		elem: '#solution_list_left',
		url: ns.url("shop/stat/countgoodssale"),
		cols: [
			[{
				field: 'LAY_INDEX',
				title: '排名',
				unresize: 'false',
				width: '20%',
				templet: function (data) {
					return data.LAY_INDEX;
				}
			}, {
	            field: 'goods_name',
				title: '商品信息',
				width:'60%',
	            unresize: 'false',
			}, {
	            field: 'sale_num',
	            title: '销量',
				width:'20%',
	            unresize: 'false',
	        }]
		]
	});
	// 第二表格
	var saleMoneyTable = new Table({
		elem: '#solution_list_right',
		url: ns.url("shop/stat/countgoodssalemoney"),
		cols: [
			[{
				field: 'LAY_INDEX',
				title: '排名',
				unresize: 'false',
				width: '20%',
				templet: function (data) {
					return data.LAY_INDEX;
				}
			}, {
	            field: 'goods_name',
				title: '商品信息',
				width:'60%',
	            unresize: 'false',
			}, {
	            field: 'order_money',
	            title: '销售额',
				width:'20%',
	            unresize: 'false',
	        }]
		]
	});

    function datePick(date_num){
        var now_date = new Date();
        Date.prototype.Format = function (fmt,date_num) { //author: meizz
            this.setDate(this.getDate()-date_num);
            var o = {
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "H+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds(), //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        };
        var now_time =  new Date().Format("yyyy-MM-dd",0);//当前日期
        var before_time =  new Date().Format("yyyy-MM-dd",date_num-1);//前几天日期
		return {start: before_time,end:now_time};
    }
</script>
{/block}