<template>
	<div class="container resource close-left-menu contaNEW">
		<div class="pop-banner clearfix">
			<!-- 	<div class="operate-btns">
				<a href="javascript:;" class="fbtn fb-export">导出</a>
			</div> -->
			<h3 class="current-module">库存数据分析</h3>
		</div>

		<nav class="o_nav_4 clearfix" style='display:inline-block; margin-left:34%;'>
			<li>
				<a class="pandect-sort active" href="javascript:;"></a>
			</li>
			<!--  <li><a class="region-sort" href="#"></a></li>
	      <li><a class="hospital-sort active" href="#"></a></li>
	      <li><a class="firm-sort" href="#"></a></li>
 -->
			<li>
				<a class="category-sort" href="javascript:;" v-link="{path:'/inventoryAnalyze2'}"></a>
			</li>
			<!--  <li><a class="salesman-sort" href="#"></a></li> -->
		</nav>

		<div class="pd-form mt-20 fast-search-form">
			<div class="group-row">
				<div class="form-group ml-20 fl" style='width: 800px;'>
					<label for="cn3" class="label w60 fl">时间范围</label>
					<div class="control control-filtering control-filtering-green fl ml-10" style='width:580px;'>
						<a class="option" @click='search.search_EQ_date=""' :class="{'all active':search.search_EQ_date==''}" href="javascript:;">全部</a>
						<a class="option" href="javascript:;" style='margin: 4px 14px;' @click='search.search_EQ_date=1' :class="{'all active':search.search_EQ_date==1}">近三月</a>
						<a class="option" href="javascript:;" style='margin: 4px 14px;' @click='search.search_EQ_date=2' :class="{'all active':search.search_EQ_date==2}">近六月</a>
						<a class="option" href="javascript:;" style='margin: 4px 14px;' @click='search.search_EQ_date=3' :class="{'all active':search.search_EQ_date==3}">近一年</a>
						<a class="option" href="javascript:;" style='margin: 4px 14px;' @click='search.search_EQ_date=4' :class="{'all active':search.search_EQ_date==4}">近二年</a>
						<a class="option" href="javascript:;" style='margin: 4px 14px;' @click='search.search_EQ_date=5' :class="{'all active':search.search_EQ_date==5}">近三年</a>
						<a class="option" href="javascript:;" style='margin: 4px 14px;' @click='search.search_EQ_date=6' :class="{'all active':search.search_EQ_date==6}">其他</a>
					</div>
				</div>
				<div class="form-group" style="width: 414px;" v-if='search.search_EQ_date==6'>
					<!-- <label for="cn3" class="label label-xf"></label> -->
					<div class="control control-date" style="width: 414px;height:34px;overflow: inherit;">
						<div style="width: 46%;float: left">
							<datepicker :target.sync='search.beginDate' :readonly="readonlyFlag" title="时间范围" placeholder="时间范围" styleobj="width:100% !important;border-radius:8px 0px 0px 8px !important;"></datepicker>
						</div>
						<span class="text-and">—</span>
						<div style="width: 46%;float: left">
							<datepicker :target.sync='search.endDate' :readonly="readonlyFlag" title="时间范围" placeholder="时间范围" styleobj="width:100% !important;border-radius:0px 8px 8px 0px !important;"></datepicker>
						</div>
					</div>
				</div>
			</div>
			<div class="group-row">
				<div class="form-group ml-20 fl" style='width: 800px;'>
					<label for="cn3" class="label w60 fl">分析维度</label>
					<div class="control control-filtering control-filtering-green fl ml-10" style='width:440px;'>
						<a class="all active" href="javascript:;" @click='search.search_EQ_FLAG=1' :class="{'all active':search.search_EQ_FLAG==1}">金额</a>
						<a class="option" href="javascript:;" style='margin: 4px 14px;' @click='search.search_EQ_FLAG=2' :class="{'all active':search.search_EQ_FLAG==2}">库存品种</a>
						<!--<a class="option" href="javascript:;" style='margin: 4px 14px;' @click='search.search_EQ_FLAG=3' :class="{'all active':search.search_EQ_FLAG==3}">库存周转天数</a>-->
					</div>
				</div>
			</div>
			<div class="group-row t-right">
				<button class="fast-analy-form-btn btn-d btn-d-lg btn-d-activate btn-d-circle" @click='getData'>分 析</button>
			</div>
		</div>

		<div class="fpart "> 
			<div class="fheader">
				<h4 class="fh-rental">总额分析</h4>
				<!-- 	<div class="stretch ml-20">
					<div class="stretch-pull">
					</div>
				</div> -->
				<div class="from-button fr">
					<a href="javascript:;" class="green-button icon rental" @click='echarts(1)'>查看总额分布<i>|</i></a>
					<a href="javascript:;" class="green-button icon provinces" @click='echarts(2)'>查看各省排名</a>
				</div>
			</div>
			<div class="information clearfix" v-if='sumData'>
				<div class="information-left">
					<div class="information-left-hos">
						<div class="fw">{{details.name}}</div>
						<span  class="fW">{{sumData.sum| numDigit 2 | numFmt}}&nbsp;<i class="f-size14 text-color-gray">{{details.unit}}</i></span>
					</div>
					<div class="information-left-hos">
						<div class="fw">最高：{{sumData.upAndDown.up |splitStr1}}</div>
						<span  class="fW">{{sumData.upAndDown.up |splitStr2| numDigit 2 | numFmt}}&nbsp;<i class="f-size14 text-color-gray">{{details.unit}}</i></span>
					</div>
					<div class="information-left-hos">
						<div class="fw">最低：{{sumData.upAndDown.down|splitStr1}}</div>
						<span  class="fW">{{sumData.upAndDown.down|splitStr2| numDigit 2 | numFmt}}&nbsp;<i class="f-size14 text-color-gray">{{details.unit}}</i></span>
					</div>
				</div>
				<div class="information-right fr" style='width:700px;'>
					<div id='echart1' style='width:100%;height:440px;'></div>
				</div>
			</div>
		</div>
		<div class="fpart">
			<div class="fheader">
				<h4 class="fh-tendency">趋势分析</h4>
				<!-- 	<div class="stretch ml-20">
					<div class="stretch-pull">
					</div>
				</div> -->
			</div>
			<div class="epi-form">
				<div class="group-row">
					<div class="form-group form-radio">
						<label class="label">趋势分类</label>
						<div class="control radio-control w700">
							<input type="radio" id="radio103" v-model="search.search_EQ_cycle2" value='1'>
							<label class="radio" for="radio103">总额趋势</label>
							<input type="radio" id="radio101" v-model="search.search_EQ_cycle2" value='2'>
							<label class="radio" for="radio101">增长率趋势（同比）</label>
							<input type="radio" id="radio102" v-model="search.search_EQ_cycle2" value='3'>
							<label class="radio" for="radio102">增长率趋势（环比）</label>
						</div>
					</div>
				</div>
				<div class="group-row">
					<div class="form-group form-radio">
						<label class="label">趋势周期</label>
						<div class="control radio-control">
							<input type="radio" id="ad1" v-model="search.search_EQ_cycle" value='1'>
							<label class="radio" for="ad1">天</label>
							<input type="radio" id="ad2" v-model="search.search_EQ_cycle" value='2'>
							<label class="radio" for="ad2">周</label>
							<input type="radio" id="ad3" v-model="search.search_EQ_cycle" value='3'>
							<label class="radio" for="ad3">月</label>
							<input type="radio" id="ad4" v-model="search.search_EQ_cycle" value='4'>
							<label class="radio" for="ad4">年</label>
						</div>
					</div>
				</div>
				<div class="group-row">
					<div class="form-group form-radio">
						<label class="label text-color-blue">切换维度</label>
						<div class="control radio-control">
							<input type="radio" id="ads4" v-model="search.search_EQ_classify" value='1'>
							<label class="radio" for="ads4">金额</label>
							<input type="radio" id="ads3" v-model="search.search_EQ_classify" value='2'>
							<label class="radio" for="ads3">品种数</label>
							<input type="radio" id="ads2" v-model="search.search_EQ_classify" value='3'>
							<label class="radio" for="ads2">条目数</label>
							<input type="radio" id="ads1" v-model="search.search_EQ_classify" value='4'>
							<label class="radio" for="ads1">单量</label>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div style='width:100%;height:400px;'>
			<div id='echart2' style='width:100%;height:400px;'></div>
		</div>
	</div>
</template>
<script>
	var echarts_api = require('../../options/echarts_api.js');
	// 采购目录列表状态

	module.exports = {
		data: function() {
			return {
				search: {
					search_EQ_date: '',
					beginDate: '',
					endDate: '',
					search_EQ_cycle: 1,
					search_EQ_classify: 1,
					search_EQ_FLAG: 1,
					search_EQ_cycle2: 1
				},
				row: [],
				rowName: '',
				rentalName: [],
				details: {
					name: '出库总金额',
					unit: '万元'
				},
				dateList: [],
				map: {},
				hos: [],
				hosList: [],
				hosListS: [],
				rowArr: [],
				valueArr: [],
				seriesList: [],
				colorList: ['#f0b3b0', '#7ea677', '#f6e0c4', '#7293b4', '#ffc63b', '#f2ccc4', '#c6df15', '#e3cf08', '#fad895', '#b37ec0'],
				stateFlag: true,
				sumData: '',
				rentalData: [],
			}
		},
		methods: {
			getData: function() {
				var self = this;
				if(self.search.search_EQ_date == 6) {
					console.log(self.search.beginDate);
					if(!self.search.beginDate || !self.search.endDate) {
                        layer.msg('请输入正确的日期格式，如1992-03-02');
						return;
					}
				}
				var params = {
					'datecondition': self.search.search_EQ_date,
					'beginDate': self.search.beginDate,
					'endDate': self.search.endDate,
				}
				// 单位换算
				switch(self.search.search_EQ_FLAG) {
					case 1:
						self.details.name = '出库总金额';
						self.details.unit = '万元';
						self.getSumAmountPer(params);
						break;
					case 2:
						self.details.name = '库存品种';
						self.details.unit = '种';
						self.getSumAmountRound(params);
						break;
					case 3:
						self.details.name = '条目数';
						self.details.unit = '条';
						break;
					case 4:
						self.details.name = '单量';
						self.details.unit = '张';
						break;
				}

			},
			// 金额
			getSumAmountPer: function(params) {
				var self = this;
				Ajax.post('/supplierSupplierReport/getSumAmountPer', params)
					.then(function(response) {
						var data = response.data.data;
						var retalEchartData, perval;
						var perSum = 0;
						self.$set('sumData', data);
						
						self.rentalName = [];
						self.rentalData = [];
						
						for(var i = 0; i < data.pers.length; i++) {
							perSum += data.pers[i].sum;
						}
						for(var a = 0; a < data.pers.length; a++) {
							perval = data.pers[a].sum / perSum
							perval = perval.toFixed(2);

							retalEchartData = {
								'value': data.pers[a].sum,
								'name': data.pers[a].medname + ' ' + perval * 1000000000000/10000000000 + '%'
							}
							self.rentalName.push(data.pers[a].medname);
							self.rentalData.push(retalEchartData)
						}


						setTimeout(function() {
							self.echarts(1);
						}.bind(this), 1000)
					});
			},
			// 库存品种
			getSumAmountRound: function(params) {
				var self = this;

				Ajax.post('/supplierSupplierReport/getSumAmountRound', params)
					.then(function(response) {
						var data = response.data.data;
						var perSum = 0;
						var retalEchartData, perval;
						
						self.$set('sumData', data);

						self.rentalName = [];
						self.rentalData = [];
						
						for(var i = 0; i < data.pers.length; i++) {
							perSum += data.pers[i].sum;
						}
						for(var a = 0; a < data.pers.length; a++) {
							perval = data.pers[a].sum / perSum
							perval = perval.toFixed(2);
							retalEchartData = {
								'value': data.pers[a].sum,
								'name': data.pers[a].medname + ' ' + perval * 100 + '%'
							}
							self.rentalName.push(data.pers[a].medname);
							self.rentalData.push(retalEchartData)
						}


						setTimeout(function() {
							self.echarts(1);
						}.bind(this), 1000)
					})

			},
			echarts: function(num) {
				var self = this;
				if(num == 1) {
					this.chart1 = echarts_api.init('echart1', {
						tooltip: {
							trigger: 'item',
							formatter: "{a} <br/>{b}: {c} ({d}%)"
						},
						legend: {
							orient: 'vertical',
							x: 'left',
							y: 'bottom',
							data: self.rentalName
						},
						toolbox: {
							feature: {
								saveAsImage: {}
							}
						},
						series: [{
							name: '医院',
							type: 'pie',
							radius: [0, '70%'],
							selectedMode: 'single',

							data: self.rentalData,
							color: ['#f0b3b0', '#7ea677', '#f6e0c4', '#7293b4', '#ffc63b',
								'#f2ccc4', '#c6df15', '#e3cf08', '#fad895', '#b37ec0'
							]
						}]
					}, 'echart1')
				} else {
					var self = this;
					console.log(self.rentalName);
					this.chart1 = echarts_api.init('echart1', {
						title: {
							text: '',
							subtext: ''
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'shadow'
							}
						},
						legend: {
							data: self.rentalName
						},
						toolbox: {
							feature: {
								saveAsImage: {}
							}
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						xAxis: {
							type: 'value',
							boundaryGap: [0, 0.01]
						},
						yAxis: {
							type: 'category',
							data: self.rentalName
						},
						series: [{
							name: '汇总',
							type: 'bar',
							barMaxWidth: 50,
							data: self.rentalData,
							color: ['#ff7202']
						}, ]
					}, 'echart1')
				};
//				self.echart2();
			},
			echart2: function() {
				var self = this;
				self.hos = [];
				self.hosList = [];
				self.dateList = [];
				self.stateFlag = true;
				if(self.stateFlag) {
					self.stateFlag = false;
					Ajax.get('/supplierSupplierReport/getSaleMedViewAnalysis', self.search)
						.then(function(response) {
							var data = response.data.data;;
							//							console.log(data);
							for(var k in data.map) {
								self.hos.push(k);
								self.hosList.push(data.map[k]);

							}

							// 周处理
							var S, M, SM;
							for(var a = 0; a < data.dateList.length; a++) {
								if(self.search.search_EQ_classify == 2) {
									S = data.dateList[a].substr(0, 4);
									M = data.dateList[a].substr(4, 2);
									SM = S + '年' + M + '周';
									self.dateList.push(SM);
								} else if(self.search.search_EQ_classify == 3) {
									S = data.dateList[a].substr(0, 4);
									M = data.dateList[a].substr(5, 2);
									SM = S + '年' + M + '月';
									self.dateList.push(SM);
								} else if(self.search.search_EQ_classify == 4) {
									self.dateList.push(data.dateList[a] + '年')
								} else {
									self.dateList = data.dateList;
								}
							}

							for(var i = 0; i < self.hosList.length; i++) {
								var Y, W, YW;
								for(var b = 0; b < self.hosList[i].length; b++) {

									if(self.search.search_EQ_classify == 2) {
										Y = self.hosList[i][b].row.substr(0, 4);
										W = self.hosList[i][b].row.substr(4, 2);
										YW = Y + '年' + W + '周';
										self.hosList[i][b].row = YW;
									} else if(self.search.search_EQ_classify == 3) {
										Y = self.hosList[i][b].row.substr(0, 4);
										W = self.hosList[i][b].row.substr(5, 2);
										YW = Y + '年' + W + '月';
										self.hosList[i][b].row = YW;
									} else if(self.search.search_EQ_classify == 4) {
										YW = self.hosList[i][b].row + '年';
										self.hosList[i][b].row = YW;
									}
								}

							}

							var formate_data = formateDate(self.dateList, self.hosList);

							function formateDate($arr, $obj) {
								var datalist = $arr || [],
									obj = $obj || {},
									datalistlength = datalist.length,
									key, finalData = obj,
									a;
								for(key in obj) {
									a = formate(obj[key], 'row')
									finalData[key] = a;
								}

								function formate($array, $n) {
									var array = $array || [],
										listname, da, n = $n || 'name',
										name = ''
									if(!array.length) {
										array = [array]
									}
									for(var i = 0; i < datalistlength; i++) {
										listname = datalist[i];
										da = array[i] || {};
										name = da[n] || ""
										if(listname != name) {
											array.splice(i, 0, {
												'row': listname,
												"value": "0"
											})
										} else {

										}
									}
									return array;
								}
								return finalData;
							}

							self.echart(formate_data);
						});

				}
			},
			echart: function(formate_data) {
				var self = this;
				self.seriesList = [];
				for(var a = 0; a < formate_data.length; a++) {
					self.seriesList[a] = {};
					// self.details.unit  //self.hos[a]
					self.seriesList[a].name = self.hos[a];
					self.seriesList[a].type = 'line';
					// self.seriesList[a].stack= '总量';
					self.seriesList[a].areaStyle = {
						opacity: 0
					};
					self.seriesList[a].showAllSymbol = true;
					self.seriesList[a].itemStyle = {
						normal: {
							borderWidth: 5,
							borderType: 'solid',
							shadowColor: [self.colorList[a]],
							shadowBlur: 10
						}
					};
					// xAxisIndex:'09-01',
					self.seriesList[a].color = [self.colorList[a]];
					self.seriesList[a].symbolSize = 5;
					self.seriesList[a].data = formate_data[a];

				}

				this.chart2 = echarts_api.init('echart2', {
					title: {
						text: ''
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},
					legend: {
						top: 'auto',
						left: 'center',
						data: self.hos,
						show: true,

					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '4%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						boundaryGap: true,
						data: self.dateList
					}],
					yAxis: [{
						type: 'value',
						boundaryGap: false,
					}],
					series: self.seriesList

				}, 'echart2')
				self.stateFlag = true;
			}
		},
		filters: {
			splitStr1: function(val) {
				let attr = val.split('-');
				return attr[1];
			},
			splitStr2: function(val) {
				let attr = val.split('-');
				return attr[0];
			},
		},
		route: {
			activate: function() {
				this.getData();
			}
		},
		watch: {
			'search.search_EQ_cycle': function() {
				this.echart2();
			},
			'search.search_EQ_classify': function() {
				this.echart2();
			},
			'search.search_EQ_date':function(){
				this.getData();
			},
			'search.search_EQ_FLAG':function(){
				this.getData();
			}
		}
	}
</script>