<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>

		<div class="pd-form fast-search-form">
			<div class="group-row">
				<div class="form-group fl" style='width: 480px;'>
					<label for="cn3" class="label w60 fl">时间范围</label>
					<div class="control control-filtering control-filtering-green fl ml-10" style='width:400px;'>
						<!-- <a class="option" @click='search.search_EQ_date=""' :class="{'all active':search.search_EQ_date==''}" href="javascript:;">全部</a> -->
						<a class="option" href="javascript:;" @click='search.time=2' :class="{'all active':search.time==2}">近一月</a>
						<a class="option" href="javascript:;" style='margin: 4px 14px;' @click='search.time=3' :class="{'all active':search.time==3}">近三月</a>
						<a class="option" href="javascript:;" style='margin: 4px 14px;' @click='search.time=4' :class="{'all active':search.time==4}">近六月</a>
						<a class="option" href="javascript:;" style='margin: 4px 14px;' @click='search.time=5' :class="{'all active':search.time==5}">近一年</a>
						<a class="option" href="javascript:;" style='margin: 4px 14px;' @click='search.time=6' :class="{'all active':search.time==6}">其他</a>
					</div>
				</div>
				<div class="form-group" style="width: 462px;" v-if='search.time==6'>
					<!-- <label for="cn3" class="label label-xf"></label> -->
					<div class="control control-date" style="width: 462px;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 fl">
					<label for="cn3" class="label w60 fl">分析维度</label>
					<div class="control control-filtering control-filtering-green fl ml-10" style='width:340px;'>
						<a class="all active" href="javascript:;" @click='search.mark=1' :class="{'all active':search.mark==1}">金额</a>
						<a class="option" href="javascript:;" style='margin: 4px 14px;' @click='search.mark=2' :class="{'all active':search.mark==2}">申领次数</a>
					</div>
				</div>
				<div class="form-group form-label">
					<label for="cn3" class="label w60 fl">科室</label>
					<div class="control">
						<select id="cn3" class="inp2" v-model='search.deptguid'>
							<option value="">请选择</option>
							<option  v-for='item in deptList' :value="item.guid">{{item.hdeptname}}</option>
						</select>
					</div>
				</div>
			</div>
			<div class="group-row">
				<div class="form-group form-label">
					<label for="cn3" class="label w60 fl">商品大类</label>
					<div class="control">
						<select id="cn3" class="inp4" v-model='categuid'>
							<option value="">请选择</option>
							<option  v-for='item in cateList' :value="item.guid">{{item.catename}}</option>
						</select>
					</div>
				</div>
				<div class="form-group form-label">
					<div class="control">
						<input type="text" placeholder="商品分类过滤" id="cnn1" v-model='catename'>
					</div>
				</div>
			</div>
			<div class="group-row">
				<div class="form-group fl" style='width: 960px;'>
					<label for="cn3" class="label w60 fl">过滤分类</label>
					<div class="control control-filtering control-filtering-green fl ml-10" style='width:890px;'>
						<a class="option checked" href="javascript:;" v-if='cateDetail.length==0'>暂无符合的数据</a>
						<a class="option" href="javascript:;" v-for='item in cateDetail' @click='item.state=!item.state' :class="{'all active':item.state==true}">{{item.catename}}</a>
						<a class="option checkbox" href="javascript:;" @click='checkedFlag'>选中</a>
					</div>
				</div>
			</div>
			<div class="group-row">
				<div class="form-group fl" style='width: 960px;'>
					<label for="cn3" class="label w60 fl">已选结果</label>
					<div class="control control-filtering control-filtering-green control-checked fl ml-10" style='width:890px;'>
						<a class="option checked" href="javascript:;" v-if='checkedList.length==0'>暂无符合的数据</a>
						<a class="all active" href="javascript:;" v-for='item in checkedList' track-by="$index" @click='checkedList.splice($index,1)'>{{item.catename}}</a>
					</div>
				</div>
			</div>
			<div class="group-row t-right">
				<button class="fast-search-form-btn btn-d btn-d-lg btn-d-activate btn-d-circle " @click='getGoodS(true)'>查 询</button>
			</div>
		</div>
		 <table class="itable itable-thead-13px itable-td-long-text">
	        <thead id="t_header">
	          <tr>
	           <th class="w50">序号</th>
	           <th class="w100">科室</th>
	           <!--<th class="w140">商品名称</th>-->
	           <th class="w140">商品名称</th>
	           <th class="w140">规格</th>
	           <th class="w50">单位</th>
	           <th class="w100">生产厂商</th>
	           <th class="w100">注册证号</th>
	           <th class="w100">单价</th>
	           <th class="w100">{{countName}}</th>
	           <th class="w130">操作</th>
	          </tr>
	       </thead>
	       <tbody>
	       	<tr v-if="goodsList==null || goodsList.length==0">
				<td colspan="10">
					<span >暂无数据</span>
				</td>
			</tr>
	       	<tr v-for='item in goodsList'>
		         <td>{{$index+1}}</td>
		         <td class="t-left pr10">{{item.meddeptname}}</td>
		         <td class="t-left pr10">{{item.goodsname}}</td>
		         <td>{{item.goodsspec}}</td>
		         <td>{{item.unitstyle}}</td>
		         <td class="t-left pr10">{{item.producer}}</td>
		         <td class="t-left pr10">{{item.registkey}}</td>
		         <td class="t-right pr10">{{item.saleprice| numDigit 2}}元</td>
		         <td class="t-right pr10" v-if='countName=="总金额"'>{{item.pricesum | numDigit 2 }}{{countUnit }}</td>
		         <td class="t-right pr10" v-else>{{item.pricesum }}{{countUnit }}</td>
		         <td style='padding-top:9px;'><a href="javascript:;" class="btn button-green mar-none" 
		         	v-link="{path:'/consumQuery2/'+item.goodsguid+'/'+item.meddeptguid}">历史趋势</a> </td>
		    </tr>
	       </tbody>
	      </table> 
	      <pagination
	      @page-change="getGoodS(false)"
	      :class="['m-20-0']"
	      :page-no.sync="search.page"
	      :total-pages.sync="search.totalPages"
	      ></pagination>
	</div>
</template>
<script>
	
	module.exports = {
		data: function() {
			return {
				cateList:[],
				catename:'',
				categuid:'',
				cateDetail:[],
				checkedList:[],
				search: {
					page:1,
					totalPages:0,
					pageSize:50,
					total:0,
					mark: 1,
					begindate: '',
					enddate: '',
					time: 2,
					deptguid:''
				},
				row: [],
				rowName: '',
				rentalName: [],
				dateList: [],
				map: {},
				hos: [],
				hosList: [],
				hosListS: [],
				rowArr: [],
				valueArr: [],
				seriesList: [],
				colorList: ['#f0b3b0', '#7ea677', '#f6e0c4', '#7293b4', '#ffc63b', '#f2ccc4', '#c6df15', '#e3cf08', '#fad895', '#b37ec0'],
				stateFlag: true,
				sumData: '',
				rentalData: [],
				seriesName:'金额 (万元) ',
				count:0,
				countName:'',
				countUnit:'',
				deptList:[],
				goodsList:[]

			}
		},
		methods: {
			// 查询子级商品大类
			getDataList:function(){
				var self = this;

				Ajax.post('/billType/getmedgoodscate',{guid:self.categuid,catename:self.catename})
					.then(function(response) {
							var data=response.data.data;
							if(response.data.errorCode==0){
								for(var a=0;a<data.length;a++){
									data[a].state=false;
								}
								self.$set('cateDetail',data);
							}
					});
			},
			// 查询第一级 商品大类
			getData: function() {
				var self = this;
								

				Ajax.post('/billType/getmedgoodscate')
					.then(function(response) {
							var data=response.data.data;
							if(response.data.errorCode==0){
								self.$set('cateList',data);
							}
					});

			},
			// 科室查询
			getdeptList:function(){
				var self = this;

				Ajax.post('/billType/getdepartmentlist')
					.then(function(response) {
							var data=response.data.data;
							if(response.data.errorCode==0){
								self.$set('deptList',data);
							}
					});
				
			},
			checkedFlag:function(){
				var self = this;

				 for(var a=0;a<self.cateDetail.length;a++){

					  	if(self.cateDetail[a].state){
					  		self.checkedList.push(self.cateDetail[a]);
					  	}
					  }
					  var hash=[];
					  self.$set('checkedList', self.checkedList.reduce(function(item, next) {
						    hash[next.guid] ? '' : hash[next.guid] = true && item.push(next);
						    return item
						}, []))
			},
			getGoodS:function(flag){
				var self = this;
				self.$set('goodsList',[]);
				if(flag){
					self.search.page=1;
				}
				self.search.list=self.checkedList;

				Ajax.post('/billType/getmeddeptdogoodslist',self.search)
					.then(function(response) {
							var data=response.data.data;
							if(response.data.errorCode==0){
								self.$set('goodsList',data.list);
								self.search.totalPages=data.totalPages;
								self.search.total=data.total;
								if(self.search.mark=='1'){

										self.countName='总金额';
										self.countUnit='元';
									}else if(self.search.mark=='2'){
										self.countName='总申领次数';
										self.countUnit='单';
									}

							}else{
								layer.msg(response.data.message);
							}
					});
				
			},
			// 柱状图
			echarts: function(num) {
				var self = this;

					var self = this;
	
					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,
							inverse:true,
						},
						series: [{
							name: self.seriesName,
							type: 'bar',
							barMaxWidth: 50,
							data: self.rentalData,
							color: ['#ff7202']
						}, ]
					}, 'echart1')
				
			},
		},
		// 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();
				// 科室查询
				this.getdeptList();
				this.getGoodS(true);
				this.getDataList();
			}
		},
		watch: {
			'search.mark':function(){
				this.getGoodS(true);
			},
			'catename':function(){
				this.getDataList();
			},
			'categuid':function(){
				this.getDataList();
				this.getGoodS(true);
			},
			'search.deptguid':function(){
				this.getGoodS(true);
			},
			'search.time':function(){
				var self = this;

				if(self.search.time!=6){
					this.getGoodS(true);
				}
			},
			'checkedList':{
				handler(curVal,oldVal){
　　　　　　　　　　　　var self = this;
					  
					 self.getGoodS(true);
　　　　　　　　　　},
　　　　　　　　　　deep:true
				 
				
			},
		}
	}
</script>