<template>
	<scroll-view class="writeRecord" :style="{ height: phoneHight }" scroll-y :scroll-x="false" :lower-threshold="0" @scrolltolower="load">
		<far-bottom></far-bottom>
		<!-- 顶部导航栏 -->
		<view class="topNav">
			<!-- <view class="record">
				<view class="record-search">
					<view class="search-main">
						<view class="search-box dis-flex flex-y-center">
							<view class="search-input">
								<view class="i icon iconfont icon-sousuo"></view>
								<input
									type="text"
									v-model="keyword"
									placeholder="请输入订单号或者店员姓名"
									placeholder-style="color:#999999;margin-left:10upx;"
									class="f-24"
									@blur="getSearch"
								/>
							</view> -->
							<!-- <picker mode="selector" :range="Verif.adminlist" @change="changeAdmin" range-key="name">
								<view class="dis-flex search-select f-28" @click="popShow = true">
									{{ adminlist[admin]}}
									<view class="i icon iconfont icon-unfold"></view>
								</view>
							</picker> -->
				<!-- 		</view>
					</view>
				</view>
			</view> -->
			<view class="b-f dis-flex diy-nav-list border-line border-bottom">
				<view class="topNav_view" @click="openType(1)" :class="currentType === 1 && show == true ? 'color_FF4444' : 'color_333333'">
					<view class="topNav_text topNav_text_width ver_mid">{{typeText}}</view>
					<view class="topNav_text iconfont ver_mid" :class="currentType === 1 && show == true ? 'icon-fold' : 'icon-unfold'"></view>
				</view>
				<view class="topNav_view" @click="openType(2)" :class="currentType === 2 && show == true ? 'color_FF4444' : 'color_333333'">
					<view class="topNav_text topNav_text_width ver_mid">{{storeText}}</view>
					<view class="topNav_text iconfont ver_mid" :class="currentType === 2 && show == true ? 'icon-fold' : 'icon-unfold'"></view>
				</view>
				<view class="topNav_view" @click="openType(3)" :class="currentType === 3 && filterDialog == true ? 'color_FF4444' : 'color_333333'">
					<view class="topNav_text ver_mid">筛选</view>
					<view class="topNav_text iconfont icon-filter ver_mid"></view>
				</view>
			</view>
			
		</view>
		
		
		
		<!-- 顶部导航栏 -->
		<!-- 顶部填充层 -->
		<view class="topFull"></view>
		<!-- 顶部填充层 -->

		<view class="tips">
			核销总数
			<text class="tips_text">{{ memberVerifInfo.allnum }}</text>
			次，共
			<text class="tips_text">{{ memberVerifInfo.allfen }}</text>
			件商品!
		</view>

		<!-- 记录循环模板 -->
		<block v-for="(item, index) in memberVerifInfoList" :key="index">
			<view class="mb">
				<view class="mb_package">
					<view class="mb_title diy-nav-list border-line border-bottom dis-flex">
						<view class="mb_title_left">
							<view class="mb_title_img ver_top dis-inlneB"><image :src="item.avatar"></image></view>
							<text class="mb_title_text ver_top dis-inlneB">{{ item.nickname }}</text>
						</view>
						<view class="mb_title_right">
							<!-- <text class="mb_right_text">{{ item.pluginname }}</text> -->
							<text class="mb_right_text">{{ item.classname }}</text>
						</view>
					</view>
					<view class="mb_body diy-nav-list border-line border-bottom">
						<view class="mb_body_img mar_T30 dis-inlneB ver_top"><image :src="item.goodimg"></image></view>
						<view class="mb_body_view mar_T30 dis-inlneB ver_top">
							<view class="mb_body_package dis-flex flex_direction_row">
								<view class="mb_body_view_title">
									<text>{{ item.remark }}</text>
								</view>
								<view class="dis-flex">
									<view>
										<text class="font_24 color_999999" v-if="item.optionname != ''">{{ item.optionname }}套餐</text>
										<text class="font_24 color_FF4444">x {{ item.num }}</text>
									</view>
									<view>
										<text class="font_24 color_FF4444">¥</text>
										<text class="font_24 color_FF4444">{{ item.orderprice }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="mb_foot font_24">
						<view class="dis-flex mar_T30">
							<text class="color_999999">核销员：</text>
							<text class="color_333333">{{ item.verifnickname }}</text>
						</view>
						<view class="dis-flex mar_T30">
							<text class="color_999999">核销时间：</text>
							<text class="color_333333">{{ item.createtime }}</text>
						</view>
						<view class="dis-flex mar_T30">
							<text class="color_999999">核销方式：</text>
							<text class="color_333333">{{ item.type == 1 ? '输码' : item.type == 2 ? '扫码' : item.type == 3 ? '后台' : '密码' }}核销</text>
						</view>
						<!-- 	<view class="dis-flex mar_T30">
						<text class="color_999999">核销员：</text>
						<text class="color_333333">某某某</text>
					</view> -->
						<view class="dis-flex mar_T30">
							<text class="color_999999">商家：</text>
							<text class="color_333333">{{ item.storename }}</text>
						</view>
					</view>
				</view>
			</view>
		</block>
		<nonemores v-if="memberVerifInfoList.length == 0"></nonemores>
		<loadmore v-else :isMore="isMore"></loadmore>
		<PopManager :show="show" :type="top" @clickmask="closePop" class="pop_view">
			<view class="popfull"></view>
			<scroll-view class="pop_main" :scroll-x="false" scroll-y>
				<view class="pop_main_package">
					<block v-for="(item, index) in memberVerifInfo.typelist" v-if="currentType === 1" :key="index">
						<view class="popMb dis-flex" @click="checkType(index)">
							<view class="font_28" :class="index==typeIndex?'color_FF4444':'color_333333'">{{item.name}}</view>
							<view class="iconfont icon-check font_28 color_FF4444" v-if="index==typeIndex"></view>
						</view>
					</block>
					<block v-for="(item, index) in memberVerifInfo.storelist" v-if="currentType === 2" :key="index">
						<view class="popMb dis-flex" @click="checkStore(index)">
							<view class="font_28" :class="index==storeIndex?'color_FF4444':'color_333333'">{{item.storename}}</view>
							<view class="iconfont icon-check font_28 color_FF4444" v-if="index==storeIndex"></view>
						</view>
					</block>
				</view>
			</scroll-view>
		</PopManager>
		<view class="record-dialog dis-flex flex-x-center flex-y-center" v-if="filterDialog">
			<view class="record-dialog-main">
				<view class="m-top40 f-30 color-33 m-btm40 t-c">筛选时间</view>
				<view class="color-33 f-24 m-left30">起始时间</view>
				<picker-view class="record-picker-view" v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="starChange">
					<picker-view-column>
						<view class="item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item, index) in days" :key="index">{{ item }}日</view>
					</picker-view-column>
				</picker-view>
				<view class="color-33 f-24 m-left30">结束时间</view>
				<picker-view class="record-picker-view" v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="endChange">
					<picker-view-column>
						<view class="item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item, index) in days" :key="index">{{ item }}日</view>
					</picker-view-column>
				</picker-view>
				<view class="record-dialog-btns dis-flex flex-y-center">
					<view class="btn cancel" @click="filterDialog = false">取消</view>
					<view class="line"></view>
					<view class="btn confirm" @click="checkBind">确认</view>
				</view>
			</view>
		</view>
		<!-- 记录循环模板 -->
	</scroll-view>
</template>

<script>
import App from '@/common/js/app.js';

// #ifdef H5
import wxApi from '@/common/js/wxApi.js';
// #endif

import nonemores from '@/components/template/nonemores';
import loadmore from '@/components/template/loadmore';
import PopManager from '@/components/template/PopManager';
export default {
	components: {
		nonemores,
		loadmore,
		PopManager
	},
	data() {
		const date = new Date();
		const years = [];
		const year = date.getFullYear();
		const months = [];
		const month = date.getMonth() + 1;
		const days = [];
		const day = date.getDate();
		for (let i = 1990; i <= date.getFullYear(); i++) {
			years.push(i);
		}
		for (let i = 1; i <= 12; i++) {
			months.push(i);
		}
		for (let i = 1; i <= 31; i++) {
			days.push(i);
		}
		return {
			years,
			year,
			months,
			month,
			days,
			day,
			value: [9999, month - 1, day - 1],
			visible: true,
			time:'',
			indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth / (750 / 100))}px;`,
			filterDialog:false,
			storeText:'所有店铺',
			typeText:'所有类型',
			storeIndex:null,
			typeIndex:null,
			currentType: null,
			top: 'top',
			show: false,
			isMore: true,
			phoneHight: null,
			currentType: 1,
			page: 1,
			type: 'rush',
			storeid: '',
			keyword:'',
			time: '',
			getlistflag: 1,
			memberVerifInfoList: [],
			memberVerifInfo: {},
			totalpage: null,
			starYear:'',
			starMonth:'',
			starDay:'',
			endYear:'',
			endMonth:'',
			endDay:'',
			// memberVerifInfo: {newTypeList: []},
			cc_id: '',
		};
	},
	onLoad(e) {
		let _this = this;
		uni.getSystemInfo({
			success(res) {
				_this.phoneHight = res.windowHeight + 'px';
			}
		});
	},
	onShow() {
		let _this = this;
		_this.init();
	},
	methods: {
		init() {
			let _this = this;
			_this.getMemberVerifList();
		},
		starChange: function(e) {
			// debugger
			const val = e.detail.value;
			this.starYear = this.years[val[0]];
			this.starMonth = this.months[val[1]];
			this.starDay = this.days[val[2]];
			
		},
		endChange:function(e){
			const val = e.detail.value;
			this.endYear = this.years[val[0]];
			this.endMonth = this.months[val[1]];
			this.endDay = this.days[val[2]];
			// debugger
		},
		checkBind(){
			let _this=this
			// debugger
			_this.starTime=_this.starYear+'-'+_this.starMonth+'-'+_this.starDay
			_this.endTime=_this.endYear+'-'+_this.endMonth+'-'+_this.endDay
			let starData=new Date(_this.starTime)
			let endData=new Date(_this.endTime)
			_this.starTime=(starData.getTime()/1000)|| Date.parse(new Date())/1000
			_this.endTime=(endData.getTime()/1000)|| Date.parse(new Date())/1000
			_this.time=_this.starTime  +','+_this.endTime
			_this.getMemberVerifList();
			_this.filterDialog=false
		},
		openType(currentType) {
			let _this = this;
			_this.currentType = currentType;
			if(currentType===3){
				_this.show = false;
				_this.filterDialog=true
			}else{
				_this.show = true;
				_this.filterDialog=false
			}
		},
		checkType(index){
			let _this = this;
			_this.typeIndex = index;
			_this.typeText=_this.memberVerifInfo.typelist[index].name
			_this.type=_this.memberVerifInfo.typelist[index].type
			_this.cc_id = _this.memberVerifInfo.typelist[index].cc_id;
			_this.getMemberVerifList();
			_this.show=false
		},
		// checkNewType(index){
		// 	let _this = this;
		// 	_this.typeIndex = index;
		// 	_this.typeText=_this.memberVerifInfo.newTypelist[index].name
		// 	_this.type=_this.memberVerifInfo.newTypelist[index].type
		// 	_this.cc_id = _this.memberVerifInfo.newTypelist[index].cc_id;
		// 	_this.getMemberVerifList();
		// 	_this.show=false
		// },
		checkStore(index){
			let _this = this;
			_this.storeIndex = index;
			_this.storeText = _this.memberVerifInfo.storelist[index].storename;
			_this.storeid=_this.memberVerifInfo.storelist[index].storeid
			_this.getMemberVerifList();
			_this.show=false
		},
		closePop() {
			let _this = this;
			_this.show = false;
		},
		load() {
			let _this = this;
			if (_this.totalpage == _this.page) {
			} else {
				_this.page++;
				_this.isMore = false;
				let data = {
					page: _this.page,
					type: 'rush',
					storeid: _this.storeid,
					time: _this.time,
					getlistflag: 0,
					cc_id: _this.cc_id
				};
				App._post_form('&p=member&do=memberVerifList', data, res => {
					_this.memberVerifInfoList = [..._this.memberVerifInfoList, ...res.data.list];
					// _this.memberVerifInfo.newTypeList = [
					// 	{name:'技能培训',cc_id: '1'},
					// 	{name:'资格考试',cc_id: '2'},
					// 	{name:'学历提升',cc_id: '3'},
					// 	{name:'岗前培训',cc_id: '4'}
					// ]
					// _this.memberVerifInfo.newTypeList = res.data.typelist;
					_this.isMore = true;
				});
			}
		},
		getMemberVerifList() {
			let _this = this;
			_this.page=1
			let data = {
				page: _this.page,
				type: 'rush',
				storeid: _this.storeid,
				time: _this.time,
				getlistflag: _this.getlistflag,
				cc_id: _this.cc_id
			};
			App._post_form('&p=member&do=memberVerifList', data, res => {
				_this.memberVerifInfo = res.data;
				_this.memberVerifInfoList = res.data.list;
				// _this.memberVerifInfo.newTypeList = [
				// 	{name:'技能培训',cc_id: '1'},
				// 	{name:'资格考试',cc_id: '2'},
				// 	{name:'学历提升',cc_id: '3'},
				// 	{name:'岗前培训',cc_id: '4'}
				// ]
				// _this.memberVerifInfo.newTypeList = res.data.typelist;
				_this.totalpage = res.data.totalpage;
				_this.starYear = ''
				_this.starMonth = ''
				_this.starDay = ''
				_this.endYear = ''
				_this.endMonth = ''
				_this.endDay = ''
			});
		}
	}
};
</script>

<style lang="scss">
.popMb{
	margin-bottom: 59upx;
}	
.pop_main_package {
	padding: 33upx 31upx 0 31upx;
}
.pop_view {
	font-size: 0 !important;
}
.pop_main {
	width: 750upx;
	height: 462upx;
	background: rgba(255, 255, 255, 1);
	border-radius: 0px 0px 20upx 20upx;
}
.flex_direction_row {
	flex-direction: column;
}
.font_24 {
	font-size: 24upx;
}
.font_28 {
	font-size: 28upx;
}
.color_FF4444 {
	color: #ff4444;
}

.color_999999 {
	color: #999999;
}
.color_333333 {
	color: #333333;
}
.mb_body_view_title {
	font-size: 28upx;
	color: rgba(51, 51, 51, 1);
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	white-space: normal !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.mb_body_package {
	height: 114upx;
	width: 490upx;
	overflow: hidden;
}
.mb_body_view {
	margin-left: 20upx;
	height: 114upx;
	width: 490upx;
	overflow: hidden;
}
.mar_T30 {
	margin-top: 30upx;
}
.mb_body_img {
	width: 114upx;
	height: 114upx;
	border-radius: 10upx;
	overflow: hidden;
	border: 1upx solid rgba(153, 153, 153, 0.1);
	> image {
		width: 114upx;
		height: 114upx;
	}
}
.mb_body {
	height: 174upx;
}
.ver_top {
	vertical-align: top;
}
.mb_right_text {
	vertical-align: top;
	line-height: 34upx;
	font-size: 24upx;
	color: rgba(255, 255, 255, 1);
}
.mb_title_right {
	margin: 6upx 0 0 0;
	text-align: center;
	padding: 0 10upx;
	height: 34upx;
	background: rgba(255, 68, 68, 1);
	border-radius: 4upx;
}
.dis-inlneB {
	display: inline-block;
}
.mb_title_text {
	margin-left: 19upx;
	line-height: 46upx;
	font-size: 30upx;
	color: rgba(51, 51, 51, 1);
}
.mb_title_img {
	border: 1upx solid rgba(153, 153, 153, 0.1);
	width: 46upx;
	height: 46upx;
	border-radius: 23upx;
	overflow: hidden;
	image {
		width: 46upx;
		height: 46upx;
	}
}
.mb_title {
	height: 76upx;
}
.mb_package {
	padding: 30upx 0;
	margin: 0 30upx;
}
.mb {
	margin: 0 auto 20upx auto;
	width: 690upx;
	background: rgba(255, 255, 255, 1);
	border-radius: 10upx;
}
.tips_text {
	color: #ff4444;
}
.tips {
	line-height: 84upx;
	height: 84upx;
	width: 690upx;
	margin: auto;
	font-size: 24upx;
	color: rgba(51, 51, 51, 1);
}
.dis-flex {
	display: flex !important;
	justify-content: space-between !important;
}
.ver_mid {
	vertical-align: middle;
}
.writeRecord {
	font-size: 0;
	width: 750upx;
	background: #f8f8f8;
}
.popfull {
	width: 750upx;
	height: 105upx;
}
.topNav {
	z-index: 99999;
	position: fixed;
	top: 0;
	left: 0;
	width: 750upx;
	height: 105upx;
	background: rgba(255, 255, 255, 1);
}
.topFull {
	width: 750upx;
	height: 105upx;
	background: rgba(255, 255, 255, 1);
}
.topNav_view {
	width: 33%;
	display: inline-block;
	text-align: center;
}
.topNav_text {
	line-height: 105upx;
	display: inline-block;
	font-size: 28upx;
}
.topNav_text_width {
	text-align: center;
	display: inline-block;
	width: 120upx;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

// 时间选择
.record-dialog {
		z-index: 10;
		position: fixed;
		background: rgba(0, 0, 0, 0.7);
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		.record-dialog-main {
			margin: auto;
			width: 600upx;
			border-radius: 10upx;
			z-index: 11;
			background: #ffffff;
			position: relative;
		}
		.record-dialog-btns {
			border-top: 1upx solid rgba(238, 238, 238, 1);
			color: rgba(51, 51, 51, 1);
			position: relative;
			bottom: 0;
			left: 0;
			right: 0;
			.btn {
				width: 50%;
				height: 86upx;
				font-size: 28upx;
				line-height: 86upx;
				text-align: center;
			}
			.btn.confirm {
				color: rgba(51, 136, 255, 1);
			}
			.line {
				width: 1px;
				height: 36upx;
				background: rgba(238, 238, 238, 1);
			}
		}
		.record-picker-view {
			margin: 0upx 30upx;
			box-sizing: border-box;
			width: 540upx;
			height: 240upx;
		}
	}
	.item{
		font-size: 20upx;
		
	}
	.checkCity {
		vertical-align: middle;
		height: 300upx;
		margin-left: 60upx;
		display: inline-block;
		width: 300upx;
		background: #ffffff;
	}
	.tips {
		height: 80upx;
		text-align: center;
	
		span {
			line-height: 80upx;
			font-size: 28upx;
			
			
			color: black;
		}
	}
	page {
		background-color: #f7f7f7;
	}
	
	.color-33 {
		color: #333333;
	}
	.item{
		font-size: 20upx;
	}
	/deep/.uni-picker-view-indicator{
			height: 70upx !important;
		}
		.record-dialog {
			z-index: 10;
			position: fixed;
			background: rgba(0, 0, 0, 0.7);
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			.record-dialog-main {
				width: 600upx;
				border-radius: 10upx;
				z-index: 11;
				background: #ffffff;
				position: relative;
			}
			.record-dialog-btns {
				border-top: 1upx solid rgba(238, 238, 238, 1);
				color: rgba(51, 51, 51, 1);
				position: relative;
				bottom: 0;
				left: 0;
				right: 0;
				.btn {
					width: 50%;
					height: 86upx;
					font-size: 28upx;
					line-height: 86upx;
					text-align: center;
				}
				.btn.confirm {
					color: rgba(51, 136, 255, 1);
				}
				.line {
					width: 1px;
					height: 36upx;
					background: rgba(238, 238, 238, 1);
				}
			}
			.record-picker-view {
				margin: 40upx 30upx;
				box-sizing: border-box;
				width: 540upx;
				height: 240upx;
			}
		}
	
		// 搜索栏内容
		.search-main {
			.search-box {
				.search-input {
					position: relative;
					padding: 0 60upx 0 80upx;
					margin-right: 40upx;
					background: rgba(246, 246, 246, 1);
					height: 76upx;
					border-radius: 38upx;
					flex: 1;
	
					input {
						width: 100%;
						height: 100%;
					}
	
					.icon.icon-sousuo {
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						left: 30upx;
					}
				}
	
				.search-select {
					width: 100upx;
					white-space: nowrap;
					color: #333333;
	
					.icon {
						margin-left: 10upx;
					}
				}
			}
		}
	
		//权限名字
		.permission-name {
			font-size: 28upx;
			
			color: rgba(153, 153, 153, 1);
		}
	
		// 头部内容
		.pages-header {
			width: 100%;
			height: 400upx;
			background-repeat: no-repeat;
			background-size: 100% 400upx;
		}
	
		// 详情内容
		.record {
			background-color: #ffffff;
			.record-search {
				padding: 30upx;
			}
	
			.record-body {
				padding: 30upx;
				background-color: #f6f6f6;
	
				.color-red {
					color: #ff4444;
				}
	
				.record-list-item {
					padding: 30upx;
					border-radius: 10upx;
					background: #ffffff;
	
					.record-list-item-header {
						border-bottom: 1px solid rgb(238, 238, 238);
						padding-bottom: 28upx;
	
						.tag {
							padding: 6upx 10upx;
							background: rgba(51, 136, 255, 1);
							border-radius: 4upx;
							text-align: center;
							color: #ffffff;
						}
					}
	
					.record-list-item-content {
						padding: 30upx 0;
						border-bottom: 1px solid rgb(238, 238, 238);
	
						.record-img {
							width: 114upx;
							height: 114upx;
							border-radius: 4upx;
							margin-right: 20upx;
							flex-shrink: 0;
						}
	
						.goods-name {
							color: #000000;
							line-height: 36upx;
						}
	
						.goods-sku {
							color: #999999;
						}
					}
	
					.record-list-item-footer {
						.footer-item {
							padding-top: 30upx;
	
							.footer-item-left {
								color: #999999;
							}
	
							.footer-item-right {
								color: #333333;
							}
						}
					}
				}
			}
		}
	
</style>
