<style>
	.button-green {
		border: 1px solid #649fa3;
		color: #649fa3;
	}
	
	.btn {
		display: inline-block;
		border-radius: 8px;
		padding: 0 20px;
		height: 34px;
		line-height: 32px;
		font-size: 14px;
		background: inherit;
		text-decoration: none !important;
	}
	
	.button-green:hover {
		color: #fff;
		background: #649fa3;
	}
</style>
<template>
	<div class="container resource close-left-menu">
		<div class="pop-banner clearfix">
			<div class="operate-btns">
				<!-- <a href="javascript:;" class="fbtn" @click='allAdd'>全部生成供应关系</a> -->
			</div>
			<h3 class="current-module">自动注册用户监控</h3>
		</div>
		<div class="f-size16 text-color-green">
			<span class="fl ml-198">今日新增注册数<b class="text-color-red"> {{getRegistSumList.one}}</b></span>
			<span class="fl ml-120">近3日新增注册数 <b class="text-color-red"> {{getRegistSumList.three}}</b></span>
			<span class="fl ml-120">近7日新增注册数<b class="text-color-red"> {{getRegistSumList.seven}}</b></span>
		</div>
		<div id='ecstyle' style='width:100%;height:400px;padding-top:60px;padding-bottom: 30px;'></div>
		<!--supply-productlist start-->
		<div class="supply-productlist clearfix">
			
			<table class="itable itable-thead-13px itable-td-long-text mb-20">
				<thead>
					<tr>
						<th class="w50">序号</th>
						<th class="w70">单位名称</th>
						<th class="w70">联系人</th>
						<th class="w140">联系电话</th>
						<th class="w100">自动注册时间</th>
					</tr>
				</thead>
				<tbody>
					<tr v-if="hospitalProductList.length == 0"><td colspan="5">暂无数据！</td></tr>
					<tr v-for="hospitalProduct in hospitalProductList">
						<td class="v-top">{{$index + 1 | getIndex}}</td>
						<td class="t-left v-top">{{hospitalProduct.chinesename}}</td>
						<td class="t-center v-top">{{hospitalProduct.linkman}}</td>
						<td class="t-center v-top">{{hospitalProduct.logonuser}}</td>
						<td class="t-center v-top">{{hospitalProduct.create_time}}</td>
					</tr>
				</tbody>
			</table>
			<pagination @page-change="getData"  :page-no.sync="search.page" :total-pages.sync="search.totalPages"></pagination>
		</div>
	</div>
</template>
<script>
	var echarts_api1 = require('../../options/echarts_api.js');
	module.exports = {
		data: function() {
			return {
				getRegistSumList:'',
				hospitalProductList: [],
				search: {
					pageSize: 10,
					page: 1,
					totalPages: 0
				},
			};
		},
		methods: {
			getRegistSum: function() {
				var self = this;
				Ajax.post('/supplier/getRegistSum')
					.then(function(response) {						
						var data = response.data.data;
						if(response.data.errorCode == 0) {
				            			self.$set('getRegistSumList',data);
						} else {
				                            	layer.msg(response.data.message);
				                        	}
					})
			},
			getRegistSupplierList: function() {
				var self = this;
				Ajax.post('/supplier/getRegistSupplierList',self.search)
					.then(function(response) {						
						var data = response.data.data;
						if(response.data.errorCode == 0) {
				            			self.$set('hospitalProductList',data.list);						
							self.search.totalPages = data.totalPages;
						} else {
				                            	layer.msg(response.data.message);
				                        	}
					})
			},
			getData: function() {
				var self = this;
				Ajax.post('/supplier/getAutoRegistList')
					.then(function(response) {						
						var data = response.data.data;
						if(response.data.errorCode == 0) {	
							self.echartsList('ecstyle',data);
						} else {
				                            	layer.msg(response.data.message);
				                        	}
					})
			},
			    echartsList:function(sty,echlist){ 
			      var self=this; 
			        var namess=[];
			        var valuess1=[];
			        var valuess=[];
			        // var color=['#4472c4','ed7d31'];
			        for(var i=0;i<echlist.length;i++){
			          namess.push(echlist[i].date);
			          valuess1.push(echlist[i].allcount);
			          valuess.push(echlist[i].count);
			        }
			       this.chartsty=echarts_api1.init(sty,{
			            title: {
			            	left:'423',
			              text: '自动注册用户增长趋势',
			          },
			          color:['#4472c4','#ed7d31'],
			          tooltip : {
			              trigger: 'axis',
			              axisPointer: {
			                  type: 'cross',
			                  label: {
			                      backgroundColor: '#6a7985'
			                  }
			              }
			          },
			          legend: {
			          	left:'0',
			              data:['累计数量','较昨日新增']
			          },
			          toolbox: {
			              feature: {
			                  saveAsImage: {}
			              }
			          },
			          grid: {
			              left: '3%',
			              right: '4%',
			              bottom: '3%', 
			              containLabel: true
			          },
			          xAxis : [
			              {
			                  type : 'category',
			                  boundaryGap : true,
			                  data : namess,
			              }
			          ],
			          yAxis : [
			              {
			                  type : 'value', 
			                  minInterval:1,
			                  min:0,
            				     max:25,
			              }
			          ],
			          series : [
			              {
			                  name:'累计数量',
			                  type:'line',
			                  stack: '总量',
			                  data:valuess1,
			              },
			              {
			                  name:'较昨日新增',
			                  type:'line',
			                  stack: '总量',
			                  data:valuess,
			              },
			          ]
			        },sty) 
			    },	
		},
		route: {
			activate: function() {
				var self=this; 
				self.getRegistSupplierList();
				self.getRegistSum();
				window.setTimeout(function (){
			                self.getData();
			            },1000);
			}
		}
	};
</script>