<style scoped>
	.ctable .ct-row .row-line>.ct-col{
		line-height: 18px;
	}
</style>
<template> 
	<div class="container resource close-left-menu">

		<div class="pop-banner clearfix">
			<div class="operate-btns">
				<a @click="exportMedWvSerialView()" class="fbtn fb-upload">导出</a>
			</div>
			<h3 class="current-module">对账明细统计</h3>
		</div>

		<!-- start-->
		<div class="pd-form fast-search-form">
			<div class="group-row">
				<div class="form-group w370">
					<label for="in1" class="label">医院</label>
					<select v-model="search.search_EQ_medguid" class="h-30" style="margin-left:15px; width:285px; border: 1px solid rgba(96, 111, 122, .2);">
						<option v-for="option in getDistributions" v-bind:value="option.medguid">
							{{option.medname}}
						</option>
					</select>
				</div>
				<div class="form-group">
					<label for="in4" class="label">采购单号</label>
					<div class="control">
						<input type="text" value="" id="in4" placeholder='采购单号' v-model="search.search_LIKE_pobillno">
					</div>
				</div>

			</div>
			<div class="group-row">
				<div class="form-group">
					<label for="in3" class="label">供应商</label>
					<div class="control">
						<input type="text" value="" id="in3" placeholder='供应商' v-model="search.search_LIKE_suppliername">
					</div>
				</div>
				<div class="form-group">
					<label for="in2" class="label">商品</label>
					<div class="control">
						<input type="text" value="" id="in2" placeholder='商品' v-model="search.search_LIKE_goodsinfo">
					</div>
				</div>
			</div>
			<div class="group-row">
				<div class="form-group">
					<label for="in1" class="label">采购时间</label>
					<div class="control control-date">
						<div style="width: 42%;float: left">
							<datepicker :target.sync='search.search_LIKE_startdate' :readonly="readonlyFlag"></datepicker>
						</div>
						<span class="text-and" style="width: 45px">至</span>
						<div style="width: 42%;float: right;">
							<datepicker :target.sync="search.search_LIKE_enddate" :readonly="readonlyFlag"></datepicker>
						</div>
					</div>
				</div>
			</div>
			<div class="group-row">
				<div class="form-group">
					<label for="cn1" class="label" style="width:70px;">单据状态</label>
					<div class="control control-filtering control-filtering-green" style="width:410px;">
						<a class="option" :class="{'all active':search.search_LIKE_billstate==''}" href="javascript:void(0)" @click="search.search_LIKE_billstate=''">全部</a>
						<a class="option" :class="{'all active':search.search_LIKE_billstate=='1'}" href="javascript:void(0)" @click="search.search_LIKE_billstate='1'">未受理</a>
						<a class="option" :class="{'all active':search.search_LIKE_billstate=='2'}" href="javascript:void(0)" @click="search.search_LIKE_billstate='2'">已接单</a>
						<a class="option" :class="{'all active':search.search_LIKE_billstate=='3'}" href="javascript:void(0)" @click="search.search_LIKE_billstate='3'">已出库</a>
						<a class="option" :class="{'all active':search.search_LIKE_billstate=='4'}" href="javascript:void(0)" @click="search.search_LIKE_billstate='4'">已签收</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="getData(true)">查 询</button>
			</div>
		</div>

		<div class="ctable ct-parent mt-20">
			<div class="ct-head">
				<span class="ct-col w40">序号</span>
				<span class="ct-col w200">供应关系</span>
				<span class="ct-col w180">商品</span>
				<span class="ct-col w120">价格</span>
				<span class="ct-col w180">单号</span>

				<span class="ct-col w120">时间</span>
				<span class="ct-col w80">数量</span>
				<span class="ct-col w80">单据状态</span>
			</div>
			<div class="ct-row mt-0" id="warp{{$index}}" v-for="item in list">
				<div class="row-line">
					<span class="ct-col w40">{{ $index + 1 }}</span>
					<span class="ct-col w200 t-left">
						<span>医&nbsp;&nbsp; 院: {{item.medname}}</span> <br>
						<span>供应商: {{item.suppliername}}</span>
					</span>
					<span class="ct-col w180 t-left pr20">{{item.goodscode}}<br><p class="text-color-blue mar-none">{{item.goodsname}}</p>{{item.goodsspec}}<br>{{item.manufacturer}} <br />{{item.registkey}} <br />{{item.goodscate}} <br /> </span>
					
			<!-- 		<span class="ct-col w120 t-left pr10">原到院: {{item.arriveprice | numDigit 2 | numFmt}}<br>到 &nbsp; 院: {{item.goodsprice | numDigit 2 | numFmt}}<br>折 &nbsp; 扣: {{item.discountprice | numDigit 2 | numFmt}}</span> -->
					<span class="ct-col w120 t-right pr20 ">{{item.goodsprice |numDigit 2}}元</span>
					<span class="ct-col w180 t-left pr5">
					<span>计划单号: </span> {{item.jhbillno}}<br>
					<span>采购单号: </span> {{item.pobillno}}<br>
					<span>出库单号: </span> {{item.dobillno}}<br>
					<span>入库单号: </span> {{item.wvbillno}}<br>
					</span>
					<span class="ct-col w130 t-left">
					<span>计划时间:</span> {{item.jhdate | getYMD}}<br>
					<span>采购时间:</span> {{item.podate | getYMD}}<br>
					<span>出库时间:</span> {{item.dodate | getYMD}}<br>
					<span>入库时间:</span> {{item.wvdate | getYMD}}<br>
					</span>

					<span class="ct-col w80 t-center">
          <div><a  class="btn-d btn-d-activate" @click="slidedown($index)">数量明细</a></div>

          </span>
					<span class="ct-col w70">{{item.billstate}} </span>

				</div>
				<div class="row-launch" style="display: none;">
					<table class="itable mb-30">
						<thead>
							<tr>
								<th class="w200">计划数量</th>
								<th class="w200">出库数量</th>
								<th class="w200">缺货数量</th>
								<th class="w200">入库数量</th>
								<th class="w200">拒收数量</th>
								<th class="w200">退货数量</th>
								<th class="w200">供应商确认退货数量</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td class="t-center">{{item.jhqty| numDigit 2 | numFmt}} </td>
								<td class="t-center">{{item.doqty| numDigit 2 | numFmt}} </td>
								<td class="t-center">{{!item.osqty?'无':item.osqty| numDigit 2 | numFmt}} </td>
								<td class="t-center">{{item.wvqty| numDigit 2 | numFmt}} </td>
								<td class="t-center">{{item.rejectqty| numDigit 2 | numFmt}} </td>
								<td class="t-center">{{item.rpiqty| numDigit 2 | numFmt}}</td>
								<td class="t-center">{{item.suprpiqty| numDigit 2 | numFmt}}</td>
							</tr>
						</tbody>
					</table>
					<div class="zip" @click="slideup($index)"></div>
				</div>

			</div>
			<div class="mt-20" style="text-align: center" v-if="list.length==0">
				未查询到相关数据！
			</div>
			<div class="pagination" style="margin: 20px 0">
				<pagination @page-change="getData" :class="['m-20-0']" :page-no.sync="search.page" :total-pages.sync="search.totalPages"></pagination>
			</div>
		</div>

	</div>
</template>
<script>
	module.exports = {
		data: function() {
			return {
				list: {},
				getDistributions: '',
				search: {
					page: 1,
					total: 0,
					totalPages: 1,
					pageSize: 50,
					search_LIKE_goodsinfo: '',
					search_LIKE_suppliername: '',
					search_EQ_medguid: '',
					search_LIKE_pobillno: '',
					search_LIKE_startdate: '',
					search_LIKE_enddate: '',
					search_LIKE_billstate: '',
				},

			};
		},
		methods: {
			//加载医院下拉框      
			getManagemeds: function() {
				var self = this;

				Ajax.post('/dictionary/getManagemeds', {})
					.then(function(response) {
						var data = response.data.data;
						self.$set("getDistributions", data);
					})
			},
			getData: function(val) {
				var self = this;
				if(val){
                    self.search.page = 1;
                }
				Ajax.post('/dictionary/findReconciliationflow', self.search).
				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.total = data.total;

					} else {
                        layer.msg(response.data.message);
					}
				})
			},
			// getDataLsit: function() {
			// 	var self = this;
			// 	self.search.page = 1;
			// 	self.getData();
			// },
			//导出
			exportMedWvSerialView: function() {
				var self = this;
				if(self.list.length == 0) {
                    layer.msg('暂无数据！');
                    return;
				}
				Ajax.post('/dictionary/exportReconciliationflow', {
						search_LIKE_goodsinfo: self.search.search_LIKE_goodsinfo,
						search_LIKE_suppliername:  self.search.search_LIKE_suppliername,
						search_EQ_medguid:  self.search.search_EQ_medguid,
						search_LIKE_pobillno: self.search.search_LIKE_pobillno,
						search_LIKE_startdate:  self.search.search_LIKE_startdate,
						search_LIKE_enddate:  self.search.search_LIKE_enddate,
						search_LIKE_billstate:  self.search.search_LIKE_billstate,

					})
					.then(function(response) {
						var data = response.data;
						window.open(data);
					})
			},

			slideup: function(index) {
				$('#warp' + index).find(".row-launch").slideUp(400, function() {
					$('#warp' + index).removeClass('active');
					$('#warp' + index).find(".isFocus").removeClass("focus");
				})
			},
			slidedown: function(index, wvBillno) {
				$('#warp' + index).addClass("active");
				$('#warp' + index).find(".row-launch").slideDown(400, function() {
					$('#warp' + index).find(".isFocus").addClass("focus active");
				})
			},
		},
		route: {
			activate: function() {
				this.search.search_LIKE_enddate = this.GetDate().enddate;
				this.search.search_LIKE_startdate = this.GetDate().begindate;
				this.getData(true);
				this.getManagemeds();
			}
		},
		watch: {
			'search.search_LIKE_billstate': function() {
				this.getData(true);

			}
		}
	};
</script>