<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="pd-form fast-search-form">
		            <div class="group-row">
			            <div class="form-group">
			                    <label class="label">所在省</label>
			                    <div class="control">
			                        <select v-model="search.province" class="inp3">
			                            <option value="">&nbsp;全部</option>
			                            <option v-for="item in areaList" :value="item.province">&nbsp;{{item.province}}</option>
			                        </select>
			                    </div>
			                </div> 
			            <div class="form-group">
			                    <label class="label">所在市</label>
			                    <div class="control">
			                        <select v-model="search.city" class="inp3">
			                            <option value="">&nbsp;全部</option>
			                            <option v-for="ci in cityList" :value="ci.city">{{ci.city}}({{ci.number}})</option>
			                        </select>
			                    </div>
			                </div> 
		            </div>
		            <div class="group-row t-right">
		                <button v-on:click="getData()" class="fast-search-form-btn btn-d btn-d-lg btn-d-activate btn-d-circle">查 询</button>
		            </div>
	            </div>
		<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" style="height: 30px;">
			<span class="fl ml-100">今日新增注册数<b class="text-color-red"> {{getRegistSumList.one}}</b></span>
			<span class="fl ml-100">近3日新增注册数 <b class="text-color-red"> {{getRegistSumList.three}}</b></span>
			<span class="fl ml-100">近7日新增注册数<b class="text-color-red"> {{getRegistSumList.seven}}</b></span>
			<span class="fl ml-100">平均停留时长<b class="text-color-red"> {{getRegistSumList.seven}}</b></span>
		</div>
		<div style="width: 100%; height: 500px;">
			<div style="float: left;width: 680px;">
				<h3>访问量</h3>
				<div id='ecstyle' style='width:680px;height:400px;padding-top:10px;'></div>
			</div>
			<div style="float: left;width: 300px;">
				<h3>TOP 10 搜索词</h3>
				<table>
					<tr>
						<th class="w50"></th>
						<th class="w80">搜索词</th>
						<th class="w80">次数</th>
						<th class="w80">占比</th>
					</tr>
					<tr>
						<td class="w50 t-center">1</td>
						<td class="w80 t-center">N95  口 罩</td>
						<td class="w80 t-center">31</td>
						<td class="w80 t-center">20%</td>
					</tr>
					<tr>
						<td class="w50 t-center">1</td>
						<td class="w80 t-center">N95  口 罩</td>
						<td class="w80 t-center">31</td>
						<td class="w80 t-center">20%</td>
					</tr>
					<tr>
						<td class="w50 t-center">1</td>
						<td class="w80 t-center">N95  口 罩</td>
						<td class="w80 t-center">31</td>
						<td class="w80 t-center">20%</td>
					</tr>
				</table>
			</div>
		</div>
		<div style="width: 100%; height: 500px;">
			<div style="float: left;width: 680px;">
				<h3>按钮点击次数</h3>
				<div id='ecstyle1' style='width:600px;height:400px;padding-top:10px;'></div>
			</div>
			<div style="float: left;width: 300px;">
				<h3>地区搜索次数</h3>
				<div id='ecstyle2' style='width:400px;height:400px;padding-top:10px;'></div>
			</div>
		</div>
		
		<!--supply-productlist start-->
		<div class="ctable ct-parent mt-20">
		            <div class="ct-head">
		                <span class="ct-col w60">序号</span>
		                <span class="ct-col w130">医院</span>
		                <span class="ct-col w100">发布时间</span>
		                <span class="ct-col w120">联系方式</span>
		                <span class="ct-col w120">物资信息</span>
		                <span class="ct-col w80">数量</span>
		                <span class="ct-col w60">单位</span>
		                <span class="ct-col w80">响应数量</span>
		                <span class="ct-col w80">响应供应商</span>
		                <span class="ct-col w80">状态</span>
		                <span class="ct-col w80">备注说明</span>
		            </div>
		            <div v-if="shower" style="height: 100px;
		                text-align: center;
		                font-size: 20px;
		                line-height: 100px;
		                font-weight: 500;">数据正在加载中...</div>
		            <div class="ct-row mt-0 pt10" id="warp2{{$index}}" v-for="(one,cus) in mxList" track-by="$index">
		                <div class="row-line" v-else>
		                    <span class="ct-col w60">{{$index+1}}</span>
		                    <span class="ct-col w130 t-left pr10">{{cus.medname}}</span>
		                    <span class="ct-col w100 pr10">{{cus.pubtime | getYMD}}</span>
		                    <span class="ct-col w120 t-left pr10">
		                      {{cus.contacts}} / {{cus.contactsdept}}
		                      <br>
		                      {{cus.tel}}
		                      <br>
		                      {{cus.address}}
		                      <br>
		                </span>
		                <span class="ct-col w120 t-left pr10">{{cus.goodsname}}<br>{{cus.goodstype | goodscateresponse}}<br>{{cus.goodsspec}}<br>{{cus.executivestandard}}</span>
		                <span class="ct-col w80">{{cus.qty == 999999.99?'不限':cus.qty}}</span>
		                <span class="ct-col w60">{{cus.unitstyle}}</span>
		                <span class="ct-col w80">{{cus.resqty}}</span>
		                    <span  class="ct-col w80 activate isFocus">
		                      <a href="javascript:;" @click="slidedown($index,cus.guid,cus.rowno)"  class="txt_underline  status-switch text-color-blue">{{cus.supcount}}</a>
		                   </span>
		                    <span  class="ct-col w80">
		                        {{cus.issatisfy == 'Y'?'满足':'未满足'}}
		                    </span>
		                    <span  class="ct-col w80">
		                        {{cus.note}}
		                    </span>
		                </div>
		                <div class="row-launch" style="display: none;">
		                    <table class="itable mb-15">
		                        <thead>
		                        <tr>
		                            <th class="w50">序号</th>
		                            <th class="w120">单位名称</th>
		                            <th class="w100">联系人</th>
		                            <th class="w100">联系电话</th>
		                            <th class="w120">响应数量</th>
		                            <th class="w120">响应时间</th>
		                        </tr>
		                        </thead>
		                        <tbody>

		                        <tr v-if="shower2">
		                            <td colspan="12">数据正在加载中...</td>
		                        </tr>
		                        <tr v-if="detailList==null || detailList.length==0&&!shower2">
		                            <td colspan="12">暂无符合条件的记录</td>
		                        </tr>
		                        <tr v-for="(index,variation) in detailList" v-if="!shower2">
		                            <td >{{ $index + 1 }}</td>
		                            <td>{{variation.suppliername}}</td>
		                            <td>{{variation.contacts}}</td>
		                            <td>{{variation.tel}}</td>
		                            <td>{{variation.responseqty}}</td>
		                            <td>{{variation.responsetime}}</td>
		                        </tr>
		                        </tbody>
		                    </table>
		                    <div class="zip" style="bottom: 0px;" @click="slideup($index)"></div>
		                </div>

		            </div>
		            <!--      <div class="mt-20" style="text-align: center" v-if="getTrMedDeptDoList.length==0">
		                     未查询到相关数据！
		                 </div> -->
		            <div class="pagination" style="margin: 20px 0">
		                <pagination @page-change="getData" :class="['m-20-0']" :page-no.sync="search.page"
		                            :total-pages.sync="search.totalPages"></pagination>
		            </div>
		        </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);
							self.echarts();
						} 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:'250',
			              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,
			              },
			              {
				            type: 'value',
				            // name: '温度',
				            min: 0,
				            max: 25,
				            interval: 5
				 }
			          ],
			          series : [
			              {
					name:'平均停留时长',
					type:'line',
					data:valuess1,
			              },
			              {
				            name: '访问量',
				            type: 'bar',
				            data: [2.6, 5.9, 9.0]
				 },
			          ]
			        },sty) 
			    },
			    echarts:function(num){ 
     			 var self=this; 
		      	// 地图
		      	// var list=self.rental.list;

		      	// //  省市截取
		      	// for(var a=0;a<list.length;a++){
		      	// 	 list[a].name=list[a].name.substr(list[a].length-2,2);
		      	// }
		      	
			      	this.chart1=echarts_api1.init('ecstyle2',{
			            title: {
			            text: '',
			            subtext: '',
			            left: 'center'
			        },
			        tooltip: {
			            trigger: 'item'
			        },
			        legend: {
			            orient: 'vertical',
			            left: 'left',
			            data:self.rentalName
			        },
			        visualMap: {
			            type: 'piecewise',
			            min: 100,
			            max: 500,
			            left: 'left',
			            top: 'bottom',
			            calculable: true,
			            symbolSize:20,
			            pieces: [
			              {min: 501, label:'501以上',color:'#008F2A'}, 
			              {min: 401, max: 500,color:'#00B655'}, 
			              {min: 301, max: 400 ,color:'#79CA60'},
			              {min: 201, max: 300 ,color:'#ACD99F'},
			              {min: 101, max: 200,color:'#C7E5BF'},
			              {min: 0, max: 100,color:'#e6f0e6'},
			          ]
			        },
			        toolbox: {
			            show: true,
			            orient: 'vertical',
			            left: 'right',
			            top: 'top',
			            feature: {
			                // dataView: {readOnly: false},
			                restore: {},
			                saveAsImage: {}
			            }
			        },
			        series: [
			            {	
			                type: 'map',
			                map: 'china',
			                roam: false,
			                // data:list

			            },
			        ]
			      },'ecstyle2') 
		    },	
		},
		route: {
			activate: function() {
				var self=this; 
				self.getRegistSupplierList();
				self.getRegistSum();
				window.setTimeout(function (){
			                self.getData();
			            },1000);
			}
		}
	};
</script>