<template>
	<section class="container resource close-left-menu contaNEW" style="min-height: 809px;">
		<div class="pop-banner clearfix">
			<div class="operate-btns">
				<span v-link="{path:'/supplierOrderInquiry'}" 　 class="fbtn fb-return">返回</span>
			</div>
			<h3 class="current-module">汇总统计</h3>
		</div>
		<!--order-orderlist-view start-->
		<main class="order-orderlist-view clearfix "  >

			<!--<div id='myechart' style='width:100%;height:400px;'></div>
			<ul class="con_box" v-if="datelist">
				<li>
					<h4>总额排名</h4></li>
				<li v-for="list in datelist">
					<span class="lh_30 company_name">{{$index+1}}. {{list.supplierName}}</span>
					<span class="tip_red w50 disil text-right ">{{list.count}}</span>条明细 <span class="tip_red">{{list.countAmount|numFmt}}</span>元
				</li>
			</ul>
			<div class="tip_con"  v-else>
			<p class="t-center">暂时没有数据可汇总</p>
			</div>-->

            <div class="fpart ">
                <!-- <div class="fpart-icon">
                     <div class="fpart-icon-top medical">

                     </div>
                     <div class="fpart-icon-bottom">
                         <div class="left">总金额</div>
                         <div class="right"><em  v-for='item in medusercount'>{{coutSum|numFmt}}</em><span>元</span></div>
                     </div>
                 </div>-->
                <div class="fheader">
                    <h4 class="fh-rental">汇总统计</h4>
                </div>
                <div class="information clearfix">
                    <div class="fl" style='width:100%'>
                        <div id='myechart' style='width:100%;height:440px;'></div>
                    </div>
                </div>
                <div>
	                <h3 class="con_box fl" style='display: inline-block;'>
	                    汇总周期：<span class="text-color-blue f-size22">{{getStatisticsbypartsList.startDate | getYMD}}  ~  {{getStatisticsbypartsList.endDate | getYMD}}</span>
	                </h3>
	                <h3 class="con_box fr" style='display: inline-block;'>
	                    累计采购总金额：<span class="text-color-blue f-size22">{{coutSum|numDigit 2|numFmt }}</span> 元
	                </h3>
                </div>
                <table class="itable itable-thead-13px itable-bordertop itable-td-long-text echart-left"
                       style='border-bottom:2px solid #D3E6F2;'>
                    <thead>
                    <tr>
                    	<th class="w130"></th>
                        <th class="w50">序号</th>
                        <th class="w200">总额排名</th>
                        <th class="w100">订单数</th>
                        <th class="pl20 w120">总金额</th>
                        <th class="w130"></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="list in datelist">
                    	<td></td>
                        <td>{{$index+1}}.</td>
                        <td class="t-left">{{list.supplierName}}</td>
                        <td>{{list.count}}</td>
                        <td class="t-right pl20"> <span class="text-color-green" style='font-weight:bold;'>{{list.countAmount|numDigit 2|numFmt}}</span>元 </td>
                        <td></td>
                    </tr>
                    </tbody>
                </table>
                <pagination
                    @page-change="hosList(false)"
                    :class="['m-20-0']"
                    :page-no.sync="searchHos.page"
                    :total-pages.sync="searchHos.totalPages">
                </pagination>

            </div>




        </main>
		<!--order-orderlist-view end-->
	</section>
</template>
<script>
	var echarts = require('echarts');

	module.exports = {
		data: function() {
			return {
				datelist: '',
				supOrderSum: '',
			                coutSum:0,
			                searchHos:{
			                	page:50,
					totalPages:0
                			},
                			getStatisticsbypartsList:'',
			};
		},
		methods: {
			getDate: function() {
				//供应商订单汇总
				var self = this;
				self.supOrderSum = JSON.parse(localStorage.getItem('suplierOrderSum'));
				var supObj = {
					'goodsname': self.supOrderSum.search_LIKE_goodsname,
					'suppliername': self.supOrderSum.search_LIKE_suppliername,
					'billno': self.supOrderSum.search_LIKE_billno,
					'startDate': self.supOrderSum.search_GTE_startDate,
					'endDate': self.supOrderSum.search_LTE_endDate
				}

				// 绘制图表

				Ajax.post('/hospitalTrmedplan/findGetStatistics', supObj)
					.then(function(response) {
						var data = response.data.data;
						self.$set('datelist', data);
						var coutsum = 0;
						for(var j = 0; j < data.length; j++) {
							coutsum += data[j].countAmount;
						}
						self.coutSum=coutsum;  
					});
			},
			getStatisticsbyparts: function() {
				//供应商订单汇总
				var self = this;
				self.supOrderSum = JSON.parse(localStorage.getItem('suplierOrderSum'));
				var supObj = {
					'goodsname': self.supOrderSum.search_LIKE_goodsname,
					'suppliername': self.supOrderSum.search_LIKE_suppliername,
					'billno': self.supOrderSum.search_LIKE_billno,
					'startDate': self.supOrderSum.search_GTE_startDate,
					'endDate': self.supOrderSum.search_LTE_endDate
				} 
				// 绘制图表 
				Ajax.post('/hospitalTrmedplan/getStatisticsbyparts', supObj)
					.then(function(response) {
						var data = response.data.data;
						self.$set('getStatisticsbypartsList', data);  
						var myChart = echarts.init(document.getElementById('myechart'));
						var options = {
							tooltip: {
								trigger: 'item',
								formatter: "{a} <br/>{b} ({d}%)"
							},
							series: [{
									name: '统计',
									type: 'pie',
									selectedMode: 'single',
									radius: [0, '60%'],
									startAngle:220,
									data: [],
					                                		label: {
						                                    normal: {
						                                        textStyle: {
						                                            fontSize: '16',
						                                            fontWeight: 'bold'
						                                        }
						                                    }, 
						                                },
						                                color:['#f0b3b0','#7ea677','#c23520','#7293b4','#ffc63b',
						                                    '#f2ccc4','#c6df15','#e3cf08','#fad895','#b37ec0']
								},

							]
						};

						var obj = ''; 
						var a; 
						for(var i = 0; i < data.list.length; i++) {		
							
							if(self.coutSum==0){
								a=100;
							}else{ 
							a = ((data.list[i].countAmount * 1) / self.coutSum)*100;
							}
							
							a=a.toFixed(1);
							obj = {
								'value': data.list[i].countAmount,
								'name': data.list[i].supplierName + ' ' + a + '%'
							}
							options.series[0].data.push(obj);
						}

						myChart.setOption(options);

					});
			},
		},
		route: {
			activate: function() {  
				var self = this;
				self.getDate();
				setTimeout(function() { 
					self.getStatisticsbyparts();
				}, 1000)

			}
		},
		ready: function() {
			//			this.getDate();

		}

	};
</script>
<style scoped>
	.lh_30 {
		line-height: 30px;
	}
	
	.tip_red {
		color: red;
		padding: 0 8px;

	}
	
	.con_box {
font-size: 18px;
line-height: 1.5;
text-align: right;
padding-bottom: 8px;
	}
	
	.company_name {
		width: 300px;
		display: inline-block;
	}
	.tip_con{
		position: absolute;
		top: 200px;
		width: 100%;
	}
	.echart-left tbody tr:nth-child(2n-1) {
    background: #e4edf2;
}
</style>