<!-- [z-paging]下拉刷新view -->
<template>
	<view style="height: 100%;">
		<view :class="showUpdateTime?'zp-r-container zp-r-container-padding':'zp-r-container'">
			<view class="zp-r-left">
				<!-- 非加载中(继续下拉刷新、松手立即刷新状态图片) -->
				<image v-if="status!==R.Loading" :class="leftImageClass" :style="[leftImageStyle,imgStyle]" :src="leftImageSrc" />
				<!-- 加载状态图片 -->
				<!-- #ifndef APP-NVUE -->
				<image v-else :class="{'zp-line-loading-image':refreshingAnimated,'zp-r-left-image':true,'zp-r-left-image-pre-size-rpx':unit==='rpx','zp-r-left-image-pre-size-px':unit==='px'}" :style="[leftImageStyle,imgStyle]" :src="leftImageSrc" />
				<!-- #endif -->
				<!-- 在nvue中，加载状态loading使用系统loading -->
				<!-- #ifdef APP-NVUE -->
				<view v-else :style="[{'margin-right':showUpdateTime?addUnit(18,unit):addUnit(12, unit)}]">
					<loading-indicator :class="isIos?{'zp-loading-image-ios-rpx':unit==='rpx','zp-loading-image-ios-px':unit==='px'}:{'zp-loading-image-android-rpx':unit==='rpx','zp-loading-image-android-px':unit==='px'}" 
					:style="[{color:zTheme.indicator[ts]},imgStyle]" :animating="true" />
				</view>
				<!-- #endif -->
			</view>
			<!-- 右侧文字内容 -->
			<view class="zp-r-right">
				<!-- 右侧下拉刷新状态文字 -->
				<text class="zp-r-right-text" :style="[rightTextStyle,titleStyle]">{{currentTitle}}</text>
				<!-- 右侧下拉刷新时间文字 -->
				<text v-if="showUpdateTime&&refresherTimeText.length" class="zp-r-right-text" :class="{'zp-r-right-time-text-rpx':unit==='rpx','zp-r-right-time-text-px':unit==='px'}" :style="[{color:zTheme.title[ts]},updateTimeStyle]">
					{{refresherTimeText}}
				</text>
			</view>
		</view>
	</view>
</template>
<script>
	import zStatic from '../js/z-paging-static'
	import u from '../js/z-paging-utils'
	import Enum from '../js/z-paging-enum'
	
	export default {
		name: 'z-paging-refresh',
		data() {
			return {
				R: Enum.Refresher,
				refresherTimeText: '',
				zTheme: {
					title: { white: '#efefef', black: '#555555' },
					arrow: { white: zStatic.base64ArrowWhite, black: zStatic.base64Arrow },
					flower: { white: zStatic.base64FlowerWhite, black: zStatic.base64Flower },
					success: { white: zStatic.base64SuccessWhite, black: zStatic.base64Success },
					indicator: { white: '#eeeeee', black: '#777777' }
				}
			};
		},
		props: ['status', 'defaultThemeStyle', 'defaultText', 'pullingText', 'refreshingText', 'completeText', 'goF2Text', 'defaultImg', 'pullingImg', 
			'refreshingImg', 'completeImg', 'refreshingAnimated', 'showUpdateTime', 'updateTimeKey', 'imgStyle', 'titleStyle', 'updateTimeStyle', 'updateTimeTextMap', 'unit', 'isIos'
		],
		computed: {
			ts() {
				return this.defaultThemeStyle;
			},
			// 当前状态Map
			statusTextMap() {
				this.updateTime();
				const { R, defaultText, pullingText, refreshingText, completeText, goF2Text } = this;
				return {
					[R.Default]: defaultText,
					[R.ReleaseToRefresh]: pullingText,
					[R.Loading]: refreshingText,
					[R.Complete]: completeText,
					[R.GoF2]: goF2Text,
				};
			},
			// 当前状态文字
			currentTitle() {
				return this.statusTextMap[this.status] || this.defaultText;
			},
			// 左侧图片class
			leftImageClass() {
				const preSizeClass = `zp-r-left-image-pre-size-${this.unit}`;
				if (this.status === this.R.Complete) return preSizeClass;
				return `zp-r-left-image ${preSizeClass} ${this.status === this.R.Default ? 'zp-r-arrow-down' : 'zp-r-arrow-top'}`;
			},
			// 左侧图片style
			leftImageStyle() {
				const showUpdateTime = this.showUpdateTime;
				const size = showUpdateTime ? u.addUnit(36, this.unit) : u.addUnit(34, this.unit);
				return {width: size,height: size,'margin-right': showUpdateTime ? u.addUnit(20, this.unit) : u.addUnit(9, this.unit)};
			},
			// 左侧图片src
			leftImageSrc() {
				const R = this.R;
				const status = this.status;
				if (status === R.Default) {
					if (!!this.defaultImg) return this.defaultImg;
					return this.zTheme.arrow[this.ts];
				} else if (status === R.ReleaseToRefresh) {
					if (!!this.pullingImg) return this.pullingImg;
					if (!!this.defaultImg) return this.defaultImg;
					return this.zTheme.arrow[this.ts];
				} else if (status === R.Loading) {
					if (!!this.refreshingImg) return this.refreshingImg;
					return this.zTheme.flower[this.ts];;
				} else if (status === R.Complete) {
					if (!!this.completeImg) return this.completeImg;
					return this.zTheme.success[this.ts];;
				} else if (status === R.GoF2) {
					return this.zTheme.arrow[this.ts];
				}
				return '';
			},
			// 右侧文字style
			rightTextStyle() {
				let stl = {};
				// #ifdef APP-NVUE
				const textHeight = this.showUpdateTime ? u.addUnit(40, this.unit) : u.addUnit(80, this.unit);
				stl = {'height': textHeight, 'line-height': textHeight}
				// #endif
				stl['color'] = this.zTheme.title[this.ts];
				stl['font-size'] = u.addUnit(30, this.unit);
				return stl;
			}
		},
		methods: {
			// 添加单位
			addUnit(value, unit) {
				return u.addUnit(value, unit);
			},
			// 更新下拉刷新时间
			updateTime() {
				if (this.showUpdateTime) {
					this.refresherTimeText = u.getRefesrherFormatTimeByKey(this.updateTimeKey, this.updateTimeTextMap);
				}
			}
		}
	}
</script>

<style scoped>
	@import "../css/z-paging-static.css";

	.zp-r-container {
		/* #ifndef APP-NVUE */
		display: flex;
		height: 100%;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.zp-r-container-padding {
		/* #ifdef APP-NVUE */
		padding: 7px 0rpx;
		/* #endif */
	}

	.zp-r-left {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		overflow: hidden;
		/* #ifdef MP-ALIPAY */
		margin-top: -4rpx;
		/* #endif */
	}

	.zp-r-left-image {
		transition-duration: .2s;
		transition-property: transform;
		color: #666666;
	}
	
	.zp-r-left-image-pre-size-rpx {
		/* #ifndef APP-NVUE */
		width: 34rpx;
		height: 34rpx;
		overflow: hidden;
		/* #endif */
	}
	
	.zp-r-left-image-pre-size-px {
		/* #ifndef APP-NVUE */
		width: 17px;
		height: 17px;
		overflow: hidden;
		/* #endif */
	}

	.zp-r-arrow-top {
		transform: rotate(0deg);
	}

	.zp-r-arrow-down {
		transform: rotate(180deg);
	}

	.zp-r-right {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.zp-r-right-time-text-rpx {
		margin-top: 10rpx;
		font-size: 26rpx;
	}
	.zp-r-right-time-text-px {
		margin-top: 5px;
		font-size: 13px;
	}
</style>
