<template>
	<div class="container resource close-left-menu contaNEW" style="min-height: 809px;">

		<div class="pop-banner clearfix">
			<!--  <div class="operate-btns">
      <a href="javascript:void(0)" class="fbtn fb-send">发送提醒</a>
    </div> -->
			<h3 class="current-module">供应商订单查询</h3>
		</div>

		<!--order-orderlist-view start-->
		<div class="order-orderlist-view clearfix">

			<div class="pd-form form-label4em mb-40 fast-search-form">
				<div class="group-row">
					<div class="form-group">
						<!-- <label for="cn1" class="label">计划单号</label> -->
						<div class="control">
							<input type="text" maxlength="17" v-rule v-model="search.search_LIKE_billno" title='采购订单号' placeholder='采购订单号'>
						</div>
					</div>
					<div class="form-group">
						<!-- <label for="cn1" class="label">商品</label> -->
						<div class="control">
							<input type="text" maxlength="50" v-rule v-model="search.search_LIKE_goodsname" title='商品' placeholder='商品'>
						</div>
					</div>
				</div>
				<div class="group-row">
					<div class="form-group">
						<!-- <label for="cn1" class="label">供应商</label> -->
						<div class="control">
							<input type="text"  maxlength="20" v-rule v-model="search.search_LIKE_suppliername" title='供应商' placeholder='供应商'>
						</div>
					</div>
					<div class="form-group">
						<!-- <label for="cn1" class="label">制单日期</label> -->
						<div class="control control-date" style="height:34px;overflow: inherit;">
							<div style="width: 42%;float: left">
								<datepicker :target.sync='search.search_GTE_startDate' :readonly="readonlyFlag" title='采购开始日期' placeholder='采购开始日期' styleobj="width:100% !important;border-radius:8px 0px 0px 8px !important;"></datepicker>
							</div>
							<span class="text-and" style="width: 45.7px">—</span>
							<div style="width: 48%;float: right;">
								<datepicker :target.sync="search.search_LTE_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 t-right">
					<button class=" btn-d btn-d-lg btn-d-activate btn-d-circle mr-20 fast-analysis-form-btn" v-link="{path:'/supplierOrderSummary'}">汇总统计</button>

					<button class="fast-search-form-btn btn-d btn-d-lg btn-d-activate btn-d-circle" @click="getData">查 询</button>
				</div>
			</div>

			<table class="itable itable-td-long-text">
				<thead id='t_header'>
					<tr>
						<th class="w50">序号</th>
						<th class="w180">采购单号</th>
						<th class="w100 click_pointer" @click="clickPurSort">采购日期<span :class="isSorPurUp?'sort_up':'sort_down'"></span></th>
						<th class="w100">送货日期</th>
						<th class="w120">供应商名称</th>
						<th class="w130 click_pointer" @click="clickDetailSort">订单明细数<span :class="isSorDetailUp?'sort_up':'sort_down'"></span></th>
						<th class="w120 click_pointer" @click="clickTotalSort">订单总金额(元)<span :class="isSortTotalUp?'sort_up':'sort_down'"></span></th>
						<th class="w100">备注(订单)</th>
						<th class="w130">操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-if="list==null || list.length==0">
						<td colspan="10">
							<span v-if="!isLoading">暂无符合条件的记录</span>
							<div v-else class="sk-spinner sk-spinner-wave">
								<div class="sk-rect1"></div>
								<div class="sk-rect2"></div>
								<div class="sk-rect3"></div>
								<div class="sk-rect4"></div>
								<div class="sk-rect5"></div>
							</div>
						</td>

					</tr>
					<tr v-for="item in list" v-else>
						<td>{{$index+1}}</td>
						<td class="t-left pr10">{{item.billno}}</td>
						<td>{{item.billDate | getYMD}}</td>
						<td>{{item.predeliverDate | getYMD}}</td>
						<td class="t-left pr10">{{item.supplierName}}</td>
						<td>{{item.countSum}}条</td>
						<td class="t-right pr10">{{item.detailSum | numDigit 2 | numFmt}}</td>
						<td class="t-left pr10">{{item.memo}}</td>
						<td class="pt5">
							<a href="javascript:;" class="btn button-green" v-link="{path:'/supplierOrderInquiryList/'+item.billno+'/'+item.guid}">明细</a>
						</td>
					</tr>
				</tbody>
			</table>

			<!--     <pagination
      @page-change="getData"
      :class="['m-20-0']"
      :page-no.sync="search.pageNo"
      :total-pages.sync="search.totalPages">
    </pagination> -->
			<div class="pagination m-20-0">
				<pagination @page-change="getData" :class="['m-20-0']" :page-no.sync="search.page" :total-pages.sync="search.totalPages">
				</pagination>
			</div>

		</div>
		<!--order-orderlist-view end-->

	</div>
</template>
<script>
	module.exports = {
		data: function() {
			return {
				list: {},
				datalist: {},
				billtype: '',
				billno: '',
				goodsname: '',
				gtinputdate: '',
				ltinputdate: '',
				meddeptname: '',
				medstorename: '',
				dobillno: '',
				wvbillno: '',
				suppliername: '',
				gtdetailmoneysum: '',
				ltdetailmoneysum: '',
				billstate: '',
				search: {
					pageSize: 50,
					page: 1,
					totalPages: 0,
					search_LIKE_goodsname: '',
					search_LIKE_suppliername: '',
					search_LIKE_billno: '',
					search_GTE_startDate: '',
					search_LTE_endDate: ''
				},
				type: {},
				isSorPurUp: true,
				isSorDetailUp: false,
				isSortTotalUp: false,
				billDate: '',
				CountSum: '',
				detailSum: '',
				isLoading: false,
			};
		},
		methods: {
			getData: function() {
				var self = this;

				Ajax.post('/hospitalTrmedplan/findByPageByPo', {
						'page': self.search.page,
						'pageSize': self.search.pageSize,
						'search_LIKE_goodsname': self.search.search_LIKE_goodsname,
						'search_LIKE_suppliername': self.search.search_LIKE_suppliername,
						'search_LIKE_suppliername': self.search.search_LIKE_suppliername,
						'search_LIKE_billno': self.search.search_LIKE_billno,
						'search_GTE_startDate': self.search.search_GTE_startDate,
						'search_LTE_endDate': self.search.search_LTE_endDate
					})
					.then(function(response) {
						var data = response.data.data;
						if(response.data.errorCode == 0) {
							self.$set('list', data.list);
							self.search.totalPages = data.totalPages;
							self.search.pageNo = data.pageNo;
						} else {
							layer.msg(response.data.message);
						}
					});
			},
			getOrderDate: function(val) {
				var self = this;
				this.billDate = this.isSorPurUp ? 'desc' : 'asc';
				this.CountSum = this.isSorDetailUp ? 'desc' : 'asc';
				this.detailSum = this.isSortTotalUp ? 'desc' : 'asc';
				var parmas = {
					'page': self.search.page,
					'pageSize': self.search.pageSize,
					'search_LIKE_goodsname': self.search.search_LIKE_goodsname,
					'search_LIKE_suppliername': self.search.search_LIKE_suppliername,
					'search_LIKE_billno': self.search.search_LIKE_billno,
					'search_GTE_startDate': self.search.search_GTE_startDate,
					'search_LTE_endDate': self.search.search_LTE_endDate
				}

				switch(val) {
					case 0:
						//parmas.sortInfo = self.billDate;
						parmas.search_sortBy = 'billDate';
						parmas.search_sortType = self.billDate;
						break;
					case 1:
						//parmas.sortInfo = self.CountSum;
						parmas.search_sortBy = 'CountSum';
						parmas.search_sortType = self.CountSum;
						break;
					case 2:
						//parmas.sortInfo = self.CountAmount;
						parmas.search_sortBy = 'detailSum';
						parmas.search_sortType = self.detailSum;
						break;
				}
				self.$set('list', '');
				self.isLoading = true;
				//供应商订单查询	排序
				// alert(JSON.stringify(parmas));
				Ajax.post('/hospitalTrmedplan/findByPageByPo', parmas)
					.then(function(response) {
						var data = response.data.data;
						if(response.data.errorCode == 0) {
							self.isLoading = false;
							self.$set('list', data.list);
							self.search.totalPages = data.totalPages;
							self.search.pageNo = data.pageNo;
						} else {
							layer.msg(response.data.message);
						}
					});

			},
			// 采购日期 采购日期排序
			clickPurSort: function() {
				this.isSorPurUp = !this.isSorPurUp;
				this.getOrderDate(0);

			},
			// 订单明细 采购日期排序
			clickDetailSort: function() {
				this.isSorDetailUp = !this.isSorDetailUp;
				this.getOrderDate(1);

			},
			// 订单总金额 采购日期排序
			clickTotalSort: function() {
				this.isSortTotalUp = !this.isSortTotalUp;
				this.getOrderDate(2);

			},
		},
		ready: function() {

		},
		route: {
			activate: function() {
				this.getOrderDate(0);
			},
			deactivate: function() {
				var self = this;

				localStorage.setItem('suplierOrderSum', JSON.stringify(self.search));

			}
		}
	};
</script>
<style scoped>
	.sort_up:before {
		content: '↑';
		padding-left: 5px;
		font-weight: bolder;
		font-size: 16px;
	}

	.sort_down:before {
		content: '↓';
		padding-left: 5px;
		font-weight: bolder;
		font-size: 16px;

    }

	.click_pointer {
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
        color:#649fa3;

    }
</style>