<template>
	<view class="page-news">
		<view class="status_bar" :style="navHeight"></view>
		<view class="conditon-block" :style="conditionTop" :class="{'conditon-block-auto':ishowDetail}">
			<view class="filter-title">
				<button type="default" class="filter-btn" :class="{'filter-btn-active':0 === filterActiveIndex}"
					@click="handleFilter('week')"><text class="filter-btn__text"
						:class="{'filter-btn-active__text':0 === filterActiveIndex}">一周内</text></button>
				<button type="default" @click="handleFilter(item)" class="filter-btn"
					:class="{'filter-btn-active':item === filterActiveIndex}" v-for="item in 3" :key='item'><text
						class="filter-btn__text"
						:class="{'filter-btn-active__text':item === filterActiveIndex}">{{item}}月内</text></button>
				<image @click="handleShowDetail" class="icon-arrow" :class="{'icon-arrow-rotate':ishowDetail}"
					src="@/static/image/arrow_up@3x.png" mode="aspectFit"></image>
			</view>
			<view class="filter-content">
				<button type="default" @click="handleFilter(item+3)" class="filter-btn"
					:class="{'filter-btn-active':item+3 === filterActiveIndex}" v-for="item in 9" :key='item'>
					<text class="filter-btn__text"
						:class="{'filter-btn-active__text':item+3 === filterActiveIndex}">{{item+3}}月内</text></button>
			</view>
		</view>
		<uni-list :style="listTop" ref="list" class="listview" :enableBackToTop="true" :scroll-y="true"
			@scrolltolower="loadMore()">
			<uni-refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
				:display="refreshing ? 'show' : 'hide'">
				<div class="refresh-view">
					<image class="refresh-icon" :src="refreshIcon" :style="{width: (refreshing || pulling) ? 0: '32px'}"
						:class="{'refresh-icon-active': refreshFlag}"></image>
					<uni-load-more v-if="refreshing" class="loading-icon" status="loading"
						:contentText="loadingMoreText"></uni-load-more>
					<text class="loading-text">{{refreshText}}</text>
				</div>
			</uni-refresh>
			<uni-cell v-for="(item, index) in dataList" :key="item.id">
				<order-list :newsItem="item" @click="goDetail(item)"></order-list>
			</uni-cell>
			<uni-cell v-if="isLoading || dataList.length > 4">
				<view class="loading-more">
					<text class="loading-more-text">{{loadingText}}</text>
				</view>
			</uni-cell>
		</uni-list>
		<no-data v-if="isNoData" @retry="loadMore"></no-data>
	</view>
</template>

<script>
	import uniList from '@/components/uni-list.vue';
	import uniCell from '@/components/uni-cell.vue';
	import uniRefresh from '@/components/uni-refresh.vue';
	import uniLoadMore from '@/components/uni-load-more.vue';
	import noData from '@/components/nodata.nvue';
	import orderList from './order-list.nvue';

	import {
		mapState
	} from 'vuex'

	import {
		apiGetProduceOrder
	} from '@/servers/produceOrder.js'
	import {
		timeRangeFormat
	} from '@/utils/date.js'

	export default {
		components: {
			uniList,
			uniCell,
			uniRefresh,
			uniLoadMore,
			noData,
			orderList
		},
		props: {
			nid: {
				type: [Number, String],
				default: '0'
			}
		},
		data() {
			return {
				dataList: [],
				navigateFlag: false,
				pulling: false,
				refreshing: false,
				refreshFlag: false,
				refreshText: "",
				isLoading: false,
				loadingText: '加载中...',
				isNoData: false,
				pulling: false,
				angle: 0,
				loadingMoreText: {
					contentdown: '',
					contentrefresh: '',
					contentnomore: ''
				},
				ishowDetail: false,
				filterActiveIndex: 0,
				refreshIcon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAB5QTFRFcHBw3Nzct7e39vb2ycnJioqK7e3tpqam29vb////D8oK7wAAAAp0Uk5T////////////ALLMLM8AAABxSURBVHja7JVBDoAgDASrjqj//7CJBi90iyYeOHTPMwmFZrHjYyyFYYUy1bwUZqtJIYVxhf1a6u0R7iUvWsCcrEtwJHp8MwMdvh2amHduiZD3rpWId9+BgPd7Cc2LIkPyqvlQvKxKBJ//Qwq/CacAAwDUv0a0YuKhzgAAAABJRU5ErkJggg==",
				condition: {
					PARTNER: '0050000215',
					DATUM: [{
						"SIGN": "I",
						"OPTION": "BT",
						LOW: '',
						HIGH: ''
					}]
				},
				page: {
					"page": "1",
					"PAGESIZE": "10",
				},
				loadParams: {
					total: 0,
					totalPage: 1,
					isDone: false,
					isRefresh: false
				},
			}
		},
		computed: {
			navHeight() {
				return {
					'height': `${this.sysinfo.safeArea.top + 44}px`
				}
			},
			conditionTop() {
				return {
					'top': `${this.sysinfo.safeArea.top + 44 }px`
				}
			},
			listTop() {
				return {
					'top': `${this.sysinfo.safeArea.top + 120}px`
				}
			},
			...mapState(['sysinfo', 'userInfo', 'userBpData'])
		},
		onNavigationBarButtonTap(e) {
			console.log('onNavigationBarButtonTap：', e);
			uni.navigateTo({
				url: `/pages/produce-order/produce-plan`
			});
		},
		created() {
			this.pullTimer = null;
			this.condition.PARTNER = this.userInfo.code
			this._isWidescreen = false;
			this.handleFilter('week')
			this.loadData(true)
			// console.log('2222', timeRangeFormat('now'))
		},
		onReady() {
			// const webView = this.$mp.page.$getAppWebview
			if(this.userBpData.HIGH_ROLE === "FALSE"){
				const webView = this.$scope.$getAppWebview();  
				webView.setTitleNViewButtonStyle(0, {
					"width": 0,
					'fontSize': 0
				});
			}
		},
		methods: {
			loadData(refresh) {
				if (this.isLoading) {
					return;
				}

				this.isLoading = true;
				this.isNoData = false;

				const params = {
					...this.condition,
					...this.page
				}
				apiGetProduceOrder(params).then((res) => {
					console.log('loadData', res)
					const {
						data,
						page,
						total
					} = res
					const data_list = data;
					this.page.page = page
					this.loadParams.total = total
					this.loadParams.totalPage = Math.ceil(total * 1 / this.page.PAGESIZE * 1)


					this.isNoData = (data_list.length <= 0);

					if (refresh) {
						this.dataList = data_list;
					} else {
						this.dataList = this.dataList.concat(data_list);
					}

					if (this.dataList.length > 0 && this._isWidescreen && this.dataList.length <= 10) {
						this.goDetail(this.dataList[0]);
					}
				}).catch(() => {
					if (this.dataList.length == 0) {
						this.isNoData = true;
					}
				}).finally(() => {
					this.isLoading = false;
					if (refresh) {
						this.refreshing = false;
						this.refreshFlag = false;
						this.refreshText = "已刷新";
						if (this.pullTimer) {
							clearTimeout(this.pullTimer);
						}
						this.pullTimer = setTimeout(() => {
							this.pulling = false;
						}, 1000);
					}
				})
			},
			loadMore(e) {
				console.log('loadMore')
				if (this.page.page < this.loadParams.totalPage) {
					this.page.page++
					this.loadData();
				} else {
					this.loadingText = '--已到底--'
				}
			},
			clear() {
				this.dataList.length = 0;
			},
			goDetail(detail) {

			},
			refreshData() {
				if (this.isLoading) {
					return;
				}
				this.pulling = true;
				this.refreshing = true;
				this.refreshText = "正在刷新...";
				this.loadingText = '加载中...'
				this.loadParams = {
					total: 0,
					totalPage: 1,
					isDone: false,
					isRefresh: false
				}
				this.page.page = 1
				this.loadData(true);
			},
			onrefresh(e) {
				this.refreshData();
				// #ifdef APP-NVUE
				try {
					this.$refs.list.resetLoadmore();
				} catch (e) {
					console.log('onrefresh', e)
				}
				// #endif
			},
			onpullingdown(e) {
				if (this.refreshing) {
					return;
				}

				// var angle = (e.pullingDistance) / e.viewHeight * 180;
				// if (angle > 180) {
				// 	angle = 180;
				// }
				// tab.angle = angle;

				this.pulling = false;
				if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
					this.refreshFlag = true;
					this.refreshText = "释放立即刷新";
				} else {
					this.refreshFlag = false;
					this.refreshText = "下拉可以刷新";
				}
			},
			handleShowDetail() {
				this.ishowDetail = !this.ishowDetail
			},
			handleFilter(item) {
				if (item === 'week') {
					this.filterActiveIndex = 0
					this.condition.DATUM[0].LOW = timeRangeFormat('week')
				} else {
					this.filterActiveIndex = item
					this.condition.DATUM[0].LOW = timeRangeFormat(item)

				}
				this.condition.DATUM[0].HIGH = timeRangeFormat('now')
				this.onrefresh()
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* #ifndef APP-PLUS */
	page {
		width: 100%;
		min-height: 100%;
		display: flex;
		background: #fff;
	}

	.status_bar {
		height: var(--status-bar-height);
	}

	/* #endif */

	.no-data {
		flex: 1;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
	}

	.page-news {
		flex: 1;
		flex-direction: column;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
	}

	.listview {
		position: absolute;
		left: 0;
		top: 216rpx;
		right: 0;
		bottom: 0;
		background: #f0f4f5;
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		/* #ifndef MP-ALIPAY */
		flex-direction: column;
		/* #endif */
	}

	.conditon-block {
		position: fixed;
		left: 0;
		top: 88rpx;
		right: 0;
		bottom: 0;
		z-index: 10;
		height: 124rpx;
		overflow: hidden;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		padding: 40rpx 32rpx 0 16rpx;
	}

	.conditon-block-auto {
		height: 460rpx;
		overflow: auto;
		max-height: 230px;
	}

	.icon-arrow {
		width: 32rpx;
		height: 20rpx;
		margin-top: 24rpx;
		transition-property: transform;
		transition-duration: 0.15s;
		transform: rotate(0deg);
	}

	.icon-arrow-rotate {
		transform: rotate(180deg);
	}

	.filter-title {
		display: flex;

	}

	.filter-btn {
		width: 148rpx;
		height: 68rpx;
		line-height: 64rpx;
		background-color: #f8f8f8;
		border-radius: 8px;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 0;
		border: 2rpx solid transparent;
		overflow: hidden;
		padding: 0;
	}

	.filter-btn__text {
		display: inline-block;
		width: 148rpx;
		height: 68rpx;
		border-radius: 8px;
		line-height: 68rpx;
		color: #8e8e8e;
		text-align: center;
		font-size: 24rpx;
	}

	.filter-btn-active {
		background-color: #f61d30;
	}

	.filter-btn-active__text {
		color: #fff;
		background-color: #f61d30;
	}

	.filter-content {
		display: flex;
		flex-wrap: wrap;
	}

	uni-button:after {
		border: 0
	}

	.refresh {
		justify-content: center;
	}

	.refresh-view {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		width: 750rpx;
		height: 64px;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
	}

	.refresh-icon {
		width: 32px;
		height: 32px;
		transition-duration: .5s;
		transition-property: transform;
		transform: rotate(0deg);
		transform-origin: 15px 15px;
	}

	.refresh-icon-active {
		transform: rotate(180deg);
	}

	.loading-icon {
		width: 28px;
		height: 28px;
		margin-right: 5px;
		color: gray;
	}

	.loading-text {
		margin-left: 2px;
		font-size: 16px;
		color: #999999;
	}

	.loading-more {
		flex: 1;
		align-items: center;
		justify-content: center;
		padding-top: 14px;
		padding-bottom: 14px;
		text-align: center;
	}

	.loading-more-text {
		font-size: 12px;
		color: #999;
	}
</style>
