<template>
	<div class="container resource close-left-menu contaNEW">
		<div class="pop-banner clearfix">
			<div class="operate-btns">
				<a href="javascript:history.go(-1)" class="fbtn fb-return">返回</a>
			</div>
			<h3 class="current-module">耗材分析</h3>
		</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="radio3" v-model="search.mark1" value='1'>
		            <label class="radio" for="radio3">总额趋势</label>
		            <input type="radio" id="radio1" v-model="search.mark1" value='2'>
		            <label class="radio" for="radio1">增长率趋势（同比）</label>
		            <input type="radio" id="radioi2" v-model="search.mark1" value='3'>
		            <label class="radio" for="radioi2">增长率趋势（环比）</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="radio03" v-model="search.classify" value='1'>
		            <label class="radio" for="radio03">天</label>
		            <input type="radio" id="radio01" v-model="search.classify" value='2'>
		            <label class="radio" for="radio01">周</label>
		            <input type="radio" id="radio04" v-model="search.classify" value='3'>
		            <label class="radio" for="radio04">月</label>
		            <input type="radio" id="radio02" v-model="search.classify" value='4'>
		            <label class="radio" for="radio02">年</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="radio11" v-model="search.mark2" value='1'>
		            <label class="radio" for="radio11">金额</label>
		            <input type="radio" id="radio12" v-model="search.mark2" value='2'>
		            <label class="radio" for="radio12">申领次数</label>
		          </div>
		        </div>
		      </div>
	      </div>
	    </div>
	    <div  style='width:100%;height:400px;'>
	    	<div id='echart1' style='width:100%;height:400px;'></div>
	    </div>

	</div>
</template>
<script>
	var echarts_api = require('../../options/echarts_api.js');
	// 采购目录列表状态

	module.exports = {
		data: function() {
			return {
				countName:'',
				countUnit:'',
				search: {
					classify: 1,
					mark2:1,
					mark1:1
				},
				rowName:'',


				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: [],
				goodsguid:'',
				deptguid:''
			}
		},
		methods: {
			echarts:function(){ 
		    	var self=this;
		    	var rowName;
		    	if(self.search.mark1==2 || self.search.mark1==3){
			    	self.countName='占比（%）';
			    }else if(self.search.mark2=='1'){

					self.countName='金额（元）';
					self.rowName='元';
				}else if(self.search.mark2=='2'){
					self.countName='申领次数（单）';
					self.rowName='单';
				}



		    	self.rowName=rowName;
		    	this.chart1=echarts_api.init('echart1',{
				       	title: {
					        text: ''
					    },
					    tooltip : {
					        trigger: 'axis',
					        axisPointer: {
					            type: 'cross',
					            label: {
					                backgroundColor: '#6a7985'
					            }
					        }
					    },
					    legend: {
					        data:['']
					    },
					    toolbox: {
					        feature: {
					            saveAsImage: {

					            }
					        }
					    },
					    grid: {
					        left: '3%',
					        right: '4%',
					        bottom: '12%',
					        containLabel: true
					    },
					    xAxis : [
					        {
					            type : 'category',
					            boundaryGap : true,
					            data : self.row,
					        }
					    ],
					    yAxis : [
					        {
					            type : 'value',
					            boundaryGap : false,
					            // data :['0','200','400','600','800','1000']  
					        }
					    ],
					   dataZoom: [{
					        type: 'inside',
					        startValue: self.rowVlaue.length-12,
					        endValue: self.rowVlaue.length
					    }, {
					        startValue: self.rowVlaue.length-12,
					        endValue: self.rowVlaue.length,
					        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
					        handleSize: '60%',
					        handleStyle: {
					            color: '#fff',
					            shadowBlur: 3,
					            shadowColor: 'rgba(0, 0, 0, 0.6)',
					            shadowOffsetX: 2,
					            shadowOffsetY: 2
					        }
					    }],
					    series : [
					        {
					            name:self.countName,
					            type:'line',
					            stack: '总量',
					            areaStyle: {opacity:0},
					            itemStyle:{
					            	normal:{
					            		borderWidth:5,
					            		borderType:'solid',
					            		shadowColor:'#49A7E5',
					            		shadowBlur:10
					            	}
					            	
					            },
					            showAllSymbol:true,
					            color:["#49A7E5"] ,
					            data:self.rowVlaue,
					            symbolSize:5,
					            
					        },
					    ]

			           },'echart1') 
		    },
			// 金额
			getData: function(params) {
				var self = this;
				self.row=[];
				Ajax.post('/billType/getmeddeptdogoodshhistoricaltrend', self.search)
					.then(function(response) {
						var data = response.data.data;
						if(response.data.errorCode==0){
							var Y,W,YW;
							for(var a=0;a<data.length;a++){
								if(self.search.classify==2){
					            		data[a].name=data[a].name.toString();
					            		Y=data[a].name.substr(0 , 4 );
					            	 	W=data[a].name.substr(4 , 2 );
					            		YW=Y+'年'+W+'周';
					            		self.row.push( YW );

						            }else{
						            	self.row.push(data[a].name);
						            }
						        }
							// for(var a=0;a<data.length;a++){
							// 	self.row.push(data[a].name);
							// }
							self.rowVlaue=data;
						}else{
							layer.msg(response.data.message);

						}

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

		},
		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.search.goodsguid=this.$route.params.goodsguid;
				this.search.deptguid=this.$route.params.deptguid;
				this.getData();
			}
		},
		watch: {
			'search.mark2':function(){
				this.getData();
			},
			'search.mark1':function(){
				this.getData();
			},
			'search.classify':function(){
				this.getData();
			}
		}
	}
</script>