<template>
	<view class="pt20">
		<u-navbar placeholder :title="$t('MY_CK_38')" :bgColor="'#fff'" titleStyle="color:#666" leftIconColor="#666" leftIcon="arrow-left" @leftClick="goBack">
			<button class="nav-right-btn" slot="right" @click="openPop()">{{ $t('MY_ORD_50') }}</button>
		</u-navbar>
		<view class="item-box" v-for="(item, index) in listData" :key="index">
			<view class=" d-b-c mb16">
				<view class="label-name">{{ $t('MY_CK_37') }}</view>
				<view class="item-content f26 gray3">{{ item.month }}</view>
			</view>
			<view class=" d-b-c mb16">
				<view class="label-name">{{ $t('w_0463') }}(PV)</view>
				<view class="item-content f26 gray3 click-text" @click="searchFunc(item.month, 1)">{{ formatNum(item.asumPv) }}</view>
			</view>
			<view class=" d-b-c mb16">
				<view class="label-name">{{ $t('w_0464') }}(PV)</view>
				<view class="item-content f26 gray3  click-text" @click="searchFunc(item.month, 2)">{{ formatNum(item.bsumPv) }}</view>
			</view>
			<view class=" d-b-c mb16">
				<view class="label-name">{{ $t('w_0465') }}(PV)</view>
				<view class="item-content f26 gray3  click-text" @click="searchFunc(item.month, 1)">{{ formatNum(item.repASumPv) }}</view>
			</view>
			<view class=" d-b-c mb16">
				<view class="label-name">{{ $t('w_0466') }}(PV)</view>
				<view class="item-content f26 gray3  click-text" @click="searchFunc(item.month, 2)">{{ formatNum(item.repBSumPv) }}</view>
			</view>
			<view class=" d-b-c mb16">
				<view class="label-name">{{ $t('MN_F_T_1003') }}(PV)</view>
				<view class="item-content f26 gray3  click-text" @click="searchFunc(item.month, 0)">{{ formatNum(item.firstAchieve) }}</view>
			</view>
			<view class=" d-b-c mb16">
				<view class="label-name">{{ $t('MN_F_T_1004') }}(PV)</view>
				<view class="item-content f26 gray3  click-text" @click="searchFunc(item.month, 0)">{{ formatNum(item.repurchaseAchieve) }}</view>
			</view>
		</view>
		<view class="d-c-c p30" v-if="listData.length == 0 && !loading">
			<text class="iconfont icon-wushuju"></text>
			<text class="cont">{{ $t('w_0405') }}</text>
		</view>
		<!-- 筛选 -->
		<u-popup :show="showPop" mode="right" @close="closePop" @open="openPop">
			<view class="pop-content rightpop">
				<view class="pop-title d-b-c">
					<view class="f28 gray3">{{ $t('MY_ORD_50') }}</view>
					<view class="f28 domation" @click="closePop">{{ $t('N_I_241') }}</view>
				</view>
				<view class="right-item-title">{{ $t('w_0352') }}</view>
				<view class="d-c-c">
					<picker fields="month" mode="date" :value="date1" :start="creationTimeStart" :end="creationTimeEnd" @change="bindDateChange1">
						<view class="data-input">{{ form.month || $t('CK_KS_3') }}</view>
					</picker>
				</view>
				<view class="pop-btns">
					<view class="pop-left-btn" @click="resetSubmit()">{{ $t('w_0257') }}</view>
					<view class="pop-right-btn" @click="searchSubmit()">{{ $t('w_0035') }}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more.vue';
export default {
	components: {
		uniLoadMore
	},
	data() {
		return {
			date1: '',
			type: 0,
			/*手机高度*/
			phoneHeight: 0,
			/*可滚动视图区域高度*/
			scrollviewHigh: 0,
			/*最后一页码数*/
			last_page: 0,
			/*当前页面*/
			page: 1,
			/*每页条数*/
			list_rows: 10,
			/*有没有等多*/
			no_more: false,
			total: 0,
			/*是否正在加载*/
			loading: true,
			/*数据*/
			listData: [],
			detail: { memberCode: '', memberName: '', phone: '', changeNum: 1 },
			detail2: {
				remark: '', //备注
				memberCode: '', //会员编号
				phone: '', //联系方式
				changePhone: '', //变更联系方式
				changeMemberName: '', //变更会员名称
				idBack: '', //原证件背面图片
				changeIdFront: '', //变更证件正面
				changeIdBack: '', //变更证件反面
				amount: '', //业务扣费
				approveStatus: 0, //审核状态
				approveTime: '', //审核时间
				creationTime: '' //创建时间
			},
			showPop: false,
			form: {
				month: null,
				pageNum: 1,
				pageSize: 50,
				placeDept: ''
			}
		};
	},
	computed: {
		/*加载中状态*/
		loadingType() {
			if (this.loading) {
				return 1;
			} else {
				if (this.listData.length != 0 && this.no_more) {
					return 2;
				} else {
					return 0;
				}
			}
		},
		creationTimeStart() {
			return this.getDate('start');
		},
		creationTimeEnd() {
			return this.getDate('end');
		}
	},
	onLoad(e) {
		this.form.month = e.month;
		this.form.placeDept = e.placeDept;
	},
	onShow() {
		/*获取订单列表*/
		this.page = 1;
		this.type = 0;
		this.listData = [];
		this.getData();
	},
	onReachBottom() {
		let self = this;
		if (self.no_more) {
			return;
		}
		self.form.pageNum++;
		if (self.total >= self.form.pageNum * self.form.pageSize) {
			self.getData();
		} else {
			self.no_more = true;
		}
	},
	methods: {
		searchSubmit: function() {
			this.showPop = false;
			/*获取数据*/
			this.listData = [];
			this.form.pageNum = 1;
			self.no_more = false;
			this.getData();
		},
		/* 重置 */
		resetSubmit: function() {
			this.form.month = null;
			this.form.pageNum = 1;
			this.form.pageSize = 50;
			this.form.placeDept = '';
			this.searchSubmit();
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		bindDateChange1: function(e) {
			this.form.month = e.detail.value;
		},
		closePop() {
			this.showPop = false;
		},
		openPop() {
			this.showPop = true;
		},
		goBack() {
			uni.navigateBack();
		},
		searchFunc(m, p) {
			let self = this;
			self.gotoPage('/pages/self-service/monthly-history/detail?month=' + m + '&placeDept=' + p);
		},
		getData() {
			let self = this;
			self.loading = false;
			self._post(
				'member/api/achieve/month-achieve',
				{
					pageNum: self.form.pageNum,
					pageSize: self.form.pageSize,
					month: self.form.month
				},
				res => {
					self.loading = false;
					self.listData = self.listData.concat(res.rows);

					self.total = res.total;
					if (self.total < self.form.pageNum * self.form.pageSize) {
						self.no_more = true;
					}
				}
			);
		}
	}
};
</script>

<style lang="scss">
.top-tabbar {
	border-bottom: 1rpx solid #eee;
	.tab-item {
		color: #666;
	}
	.tab-item.active {
		font-weight: 400;
		color: #333;
	}
}
.order-item {
	width: 750rpx;
	background: #ffffff;
	padding: 0 18rpx 50rpx 25rpx;
	box-sizing: border-box;
	margin-bottom: 20rpx;
}
.orer-item-top {
	height: 93rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #eee;
}
.listdata-item {
	// height: 370rpx;
	padding: 27rpx 23rpx 22rpx 25rpx;
	background: #ffffff;
	margin-bottom: 22rpx;
}
.type-btn {
	line-height: 30rpx;
	height: 30rpx;
	background: #3d3d3d;
	border-radius: 15rpx;
	padding: 0 23rpx;
	font-size: 20rpx;
	color: #ffffff;
	margin-right: 6rpx;
}
.status-btn {
	font-size: 24rpx;
	color: #333333;
	margin-left: 20rpx;
}
.product-img {
	width: 124rpx;
	height: 124rpx;
	margin-right: 20rpx;
	flex-shrink: 0;
	display: block;
	border: 15rpx;
	margin-bottom: 24rpx;
}
.product-list {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: nowrap;
	overflow-x: auto;
	margin-right: 20rpx;
}
.order-border-btn {
	box-sizing: border-box;
	padding: 0 26rpx;
	min-width: 146rpx;
	height: 52rpx;
	line-height: 52rpx;
	text-align: center;
	border-radius: 26rpx;
	font-size: 24rpx;
	color: #999;
	border: 1rpx solid #eee;
	margin-left: 18rpx;
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.order-btn {
	box-sizing: border-box;
	padding: 0 26rpx;
	min-width: 146rpx;
	height: 52rpx;
	line-height: 52rpx;
	text-align: center;
	border-radius: 26rpx;
	font-size: 24rpx;
	color: #fff;
	border: 1rpx solid #eee;
	margin-left: 18rpx;
	background: #fb3024;
	border: 1rpx solid #fb3024;
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.label-name {
	font-size: 26rpx;
	color: #999;
	word-break: break-all;
	width: 60%;
	flex-shrink: 0;
	line-height: 1.5;
}
.item-content {
	flex-shrink: 0;
	width: 40%;
	word-break: break-all;
	line-height: 1.5;
	text-align: right;
}
.item-box {
	width: 750rpx;
	box-sizing: border-box;
	margin-bottom: 20rpx;
	padding: 32rpx 26rpx;
	background: #ffffff;
}
.data-input {
	width: 600rpx;
	color: #333;
	height: 64rpx;
	display: flex;
	    justify-content: center;
	    align-items: center;
}
.nav-right-btn {
	background: none;
}
.click-text {
	color: #48b2fd;
	text-decoration: underline;
}
</style>
