<template>
	<div class="container resource close-left-menu">
		<div class="pop-banner clearfix">
			<div class="operate-btns">
				<a @click="listInvorceExport()" class="fbtn fb-upload ml-10">导出</a>
				<!-- <a @click="listInvorceDetailExport()" class="fbtn fb-upload ml-20">导出汇总</a> -->
			</div>
			<h3 class="current-module">证照到期统计</h3>
		</div>
		<div class="pd-form fast-search-form"> 
			<div class="group-row">
				<div class="form-group">
			            <div class="control select-style">
			              <select v-model="search.dayFlag">
			                <option value=""  selected>临近失效天数</option>
			                <option :value="ite.value" v-for="ite in dayFlagList">{{ite.name}}</option>
			              </select>
			            </div>
			          </div>
				<div class="form-group">
					<div class="control"><input v-rule type="text" maxlength="20" v-model="search.supplierName" placeholder='供应商名称' title='供应商名称'></div>
				</div>
			</div> 
			<div class="group-row" >
		            <div class="form-group" style="width: 950px;">
		              <label class="label w80 fl">证照类型</label>
		              <div class="control control-filtering control-filtering-green fl" style="width: 840px;">
		                <!-- <a class="option"
		                :class="{'all active':search.type==''}"
		                href="javascript:void(0)" @click="search.type=''">全部</a> -->
		                <a class="option"
		                :class="{'all active':search.type=='yyzz'}"
		                href="javascript:void(0)" @click="search.type='yyzz'">营业执照</a>
		                <a class="option"
		                :class="{'all active':search.type=='jyxkz'}"
		                href="javascript:void(0)" @click="search.type='jyxkz'">经营许可证</a>
		                <a class="option"
		                :class="{'all active':search.type=='ylqxzcz'}"
		                href="javascript:void(0)" @click="search.type='ylqxzcz'">医疗器械注册证</a>
		                <a class="option"
		                :class="{'all active':search.type=='jxsqs'}"
		                href="javascript:void(0)" @click="search.type='jxsqs'">经销授权书</a>
		                <a class="option"
		                :class="{'all active':search.type=='xsdbsqs'}"
		                href="javascript:void(0)" @click="search.type='xsdbsqs'">销售代表授权书</a>
		                <a class="option"
		                :class="{'all active':search.type=='sccszz'}"
		                href="javascript:void(0)" @click="search.type='sccszz'">生产厂商证照</a>
		                <a class="option"
		                :class="{'all active':search.type=='yjdlszz'}"
		                href="javascript:void(0)" @click="search.type='yjdlszz'">一级代理商证照</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="getDate(true)">查 询</button>
			</div>
		</div>

		<div class="ctable ct-parent mt-20">
			<div class="ct-head">
				<span class="ct-col w50">序号</span> 
				<span class="ct-col w200">供应商</span>
				<span class="ct-col w150">证照类型</span>
				<span class="ct-col w150">内容</span>
				<span class="ct-col w150">失效天数</span> 
				<span class="ct-col w150">有效期</span> 
				<span class="ct-col w100">联系人信息</span>

			</div>
			<div class="ct-row mt-0" id="warp{{$index}}" v-for="cus in expireSupLicList">
				<div class="row-line">
					<span class="ct-col w50 v-top">{{$index+1}}</span> 
					<span class="ct-col w200 t-left  v-top">{{cus.chinesename}}</span> 
					<span class="ct-col w150 activate isFocus  v-top" v-if="cus.type == '医疗器械注册证' || cus.type == '生产厂商'"><a href="javascript:void(0);" @click="slidedown($index,cus.supplierguid,cus.type,cus.content)"  class="status-switch text-color-blue">{{cus.type}}</a> 
					</span>
					<span class="ct-col w150 v-top t-center" v-else> 
						{{cus.type}}
					</span>
					<span class="ct-col w150 v-top t-center">
						{{cus.content}}
					</span> 

					<span class="ct-col w150 t-center  v-top">{{cus.days}}</span>


					<span class="ct-col w150 v-top t-center" v-if="cus.isunlimited =='Y'">
						无限期
					</span> 
					<span class="ct-col w150 v-top " v-else>
						{{cus.enddate | getYMD}}
					</span> 
					<span class="ct-col w100 v-top"> {{cus.contacts}}<br>{{cus.contacttel}}</span>
				</div>
				<div class="row-launch" style="display: none;">
					<table class="itable mb-30">
						<thead>
							<tr>
								<th class="w40">序号</th>
								<th class="w100">商品编码</th>
								<th class="w150">商品名称</th>
								<th class="w150">生产厂商</th>
								<th class="w60">规格</th>
								<th class="w80">注册证号/批准文号</th>  
							</tr>
						</thead>
						<tbody>
							<tr v-if="expireSupLicList[$index].mxList==null || expireSupLicList[$index].mxList==0">
								<td colspan="12">暂无符合条件的记录</td>
							</tr>
							<tr v-for="variation in cus.mxList">
								<td class="">
									{{$index+1}}
								</td> 
								<td class="t-center">{{variation.goodscode}}</td>
								<td class="t-center">{{variation.goodsname}} </td>
								<td class="t-center">{{variation.producer}} </td>
								<td class="t-center">{{variation.goodsspec}} </td>
								<td class="t-center">{{variation.registkey}} </td> 
							</tr>
						</tbody>
					</table>
					<div class="pagination" style="margin: 20px 0">
						<pagination @page-change="listTRSettleMVByMed($index,cus.mvbillno,cus.invoiceno)" :class="['m-20-0']" :page-no.sync="cus.search.pageNo" :total-pages.sync="cus.search.totalPages"></pagination>
					</div>
					<div class="zip" @click="slideup($index)"></div>
				</div>

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

<script>
	module.exports = {
		data: function() {
			return {
				search: {
					type:'yyzz',
					dayFlag:'',
					supplierName:'',
					pageSize: 50,
					page: 1,
					totalPages: 0,
					total: 0,
					pageNo: 0
				},
				dayFlagList:[{
					value:'30',
					name:'30天'
				},{
					value:'60',
					name:'60天'
				},{
					value:'90',
					name:'90天'
				},{
					value:'0',
					name:'已过期'
				},{
					value:'N',
					name:'未填效期'
				}],
				search1: {
					mvbillno: '',
					pageSize: 5,
					page: 1,
					totalPages: 0,
					total: 0,
					pageNo: 0
				},
				expireSupLicList: '',
			};
		},
		watch:{
			'search.type':function(){
				var self = this;
				self.getDate(true);
			}
		},
		methods: {
			getDate: function(flg) {
				var self = this;
				if(flg){
					self.search.page = 1;
				}
				Ajax.post('/hospitalTrsettle/getExpireSupLicList', self.search)
				.then(function(response) {
					var data = response.data.data; 
					if(response.data.errorCode == 0) {
						self.$set('expireSupLicList', data.list);
						self.search.pageNo = data.pageNo;
						self.search.totalPages = data.totalPages;
						self.search.total = data.total;
					} else {
						self.MessageBox({
							title: '警告',
							message: response.data.message,
							type: 'alert'
						}, function(action) {});
					}

				})
			},
			// 品规格数目（手风琴效果）
			listTRSettleMVByMed: function(index,supplierguid,type,content) {
				var self = this;
				var dpoObj = self.expireSupLicList[index];
				if(dpoObj.search == null) {
					// 设置每组的查询条件
					dpoObj.search = {
						pageSize: 5,
						page: 1,
						pageNo: 1,
						totalPages: 0,
						supplierguid: supplierguid,
						type:self.search.type,
						content:content
					};
				}
				dpoObj.search.page = dpoObj.search.pageNo;
				// self.search1.mvbillno = billno;
				Ajax.post('/hospitalTrsettle/getExpireSupLicDetailList', dpoObj.search)
				.then(function(response) {
					var data = response.data.data;
					self.$set('expireSupLicList[' + index + '].mxList', data.list);
					dpoObj.search.pageNo = data.pageNo;
					dpoObj.search.totalPages = data.totalPages;
					dpoObj.search.total = data.total;
					self.$set('expireSupLicList[' + index + '].search', dpoObj.search);
				});
			},
			slideup: function(index) {
				$('#warp' + index).find(".row-launch").slideUp(400, function() {
					$('#warp' + index).removeClass('active');
					$('#warp' + index).find(".isFocus").removeClass("focus");
				})
			},
			slidedown: function(index,supplierguid,type,content) {
				this.listTRSettleMVByMed(index,supplierguid,type,content);
				$('#warp' + index).addClass("active");
				$('#warp' + index).find(".row-launch").slideDown(400, function() {
					$('#warp' + index).find(".isFocus").addClass("focus active");
				})
			},
			//导出 listInvorceExport
			listInvorceExport: function() {
				var self = this;
				Ajax.post('/hospitalTrsettle/exportExpireSupLicList',self.search)
				.then(function(response) {
					var data = response.data;
					window.open(data);
				})
			},
			//导出明细 listInvorceDetailExport
			// listInvorceDetailExport: function() {
			// 	var self = this;
			// 	Ajax.post('/hospitalTrsettle/listInvorceExport',self.search)
			// 	.then(function(response) {
			// 		var data = response.data;
			// 		window.open(data);
			// 	})
			// },

		},
		route: {
			activate: function() {
				this.getDate(false);
			}
		}
	};
</script>