<template>
	<view class="uni-load-more" @click="onClick">
		<!-- #ifdef APP-NVUE -->
		<loading-indicator v-if="status === 'loading' && showIcon" :style="{color: color}" :animating="true" class="uni-load-more__img uni-load-more__img--nvue"></loading-indicator>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<svg width="24" height="24" viewBox="25 25 50 50" v-if="(iconType==='circle' || iconType==='auto' && platform === 'android') && status === 'loading' && showIcon" class="uni-load-more__img uni-load-more__img--android-H5">
			<circle cx="50" cy="50" r="20" fill="none" :style="{color:color}" stroke-width="3"></circle>
		</svg>
		<view v-else-if="status === 'loading' && showIcon" class="uni-load-more__img uni-load-more__img--ios-H5">
			<view :style="{backgroundColor:color}"></view>
			<view :style="{backgroundColor:color}"></view>
			<view :style="{backgroundColor:color}"></view>
			<view :style="{backgroundColor:color}"></view>
			<view :style="{backgroundColor:color}"></view>
			<view :style="{backgroundColor:color}"></view>
			<view :style="{backgroundColor:color}"></view>
			<view :style="{backgroundColor:color}"></view>
			<view :style="{backgroundColor:color}"></view>
			<view :style="{backgroundColor:color}"></view>
			<view :style="{backgroundColor:color}"></view>
			<view :style="{backgroundColor:color}"></view>
		</view>
		<!-- #endif -->
		<!-- #ifndef APP-NVUE || H5 -->
		<view v-if="(iconType==='circle' || iconType==='auto' && platform === 'android') && status === 'loading' && showIcon" class="uni-load-more__img">
			<image class="uni-load-more__img--android" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAABsRJREFUWAnNmUtonFUUx/N9mZlk8p5pWvPWNM2rkfogutBiF25qQUQIXbhVsehSqCv3Ii5EBRGU6sZFRexOQW2CYFtFEKrNq9iYYh5NMm3iJJPXPPz9b+d+zkw6aWObGS/c3Pc5vzn33NcXp+QuwqVLl/qSyeSx0tLSbtJmRDURld6g7uXe3t4h8vck+HYqZXx8vHdjY+MFx3GOpVKpB0hdIF3kZMbqRCLxGXX330o+4xjmpG7Vlq/ujkHHxsaa4/H4yc3NzQGUlCLQlTKFtFKTt4rygag7ffyk6hqnX9KO2S69LSjTG3Bd93UgX0RQOVGKpMVGshRuKi5JA05R9app2PpH4xXda9euCThOfiPfD7PDtwUdGRnZw7R+iLDHJJjUWE+JBCA8xo8YIvsd8U/Ks7TN9PX1LVPOFzQbBpaxzvXr18vC4bCAVxmfyDcoL+jFixd7gPyIgS1EY730r06h4Dfq3g0Gg2fb29vX8gnPrU//QGtRxN0M9PMtLS3V0B6lRhbeEoxlcmvxxx4Ww+cMrKJNfcxCAXCaundYzWcQaJwsd+ydlJEhA5URSxcXFxHrujU1NU40GnWqq6uXkL2ZK0cAWQGfDAP5AcKCDJCja7qTyBrkVz9z8ODBr+4GUsoYL6vF8NFEXV0dRcdZXl7W4nRXVlbC6JZ7ZIUsi9LBj19+Qo9HiVrSGqz0UwDfJntHKzRLw20Ks7OzlYQK6SMYfbhcoqqqal6q7fAsizLlr9H4EI2eJRl0isXxFvX3HFIQDQ0NK6sEC6mUwyJAU63abfAsOjw83IjlztBQRmfVK/6IPwp+VyAthFJ0h+ENEt2Kigqjv7y8fBrdxl+9VU/HE1SqLCiyzizxJHHXIQVKWIShXJBra2vGBVgre6ifVaOZehbQAYCOpqEElmTQ+z09PVF1KkSQblb9ErpcLCmLuj6frxIO7Q43Qen0LHnqUkkNYIWPMOVfq0Mhg/wVSJ1SHiy7gfFVu5gOA2S2IcESP6azt+IKCbuwsBDl0mPuEuh1/X5/HTyOm572+6g0Uw5gDJOfLyRcpq76+vplwFJcfkplWVKtm6AOhSept36p9HxnZ+d65uBC5jWTnFIxdGq2TWT6K3XRaKPRWjPJHnaukGB5dJl91VpVi0rEYaIWkG4uAtYVrahhZmZmLRAIeBaFrVynQMhaFLrk+vp6pKiUKG9sbIxba8pPqfL7OCKNRS0cl4QFmy9iqkuLAE0ANuDTQkpb1Nb/H1KQzHPHsGDdpKZetxQDq5Qbt46tYocATx/XRvbVuF6QC7Jq2rK6XoWKTcllWsemt5hgi6sQkSVJDSwXgYZig2LJIBze6YQxN3VLuSpIuz1RqUtzUQPuWA+AK1ii3HPVZb/6SdNOg11Uh/RELhbp6dOnBVePAQVqpp/FFHH3798/CbGeuWbqAfRzEjxcLNAjR47UM7s63w0kXBv79u1bVqEE8p+tn6bT5+mgO2FBg3RyWzqAUpeDx1xKYDP7ugFl+s/im3bqZdk23k9PFJQSZVNTU82A1REtpPimxWFAOzo6rjLdPwBotyktroHp6Wm9DgsS0I0x/b1Amo9uSqmb2bt3r3llGFCRYNAvgNPt2m5VId7Yr9DZ67NbxOhwMMrjyK8kSp9WegrfHLc6PYju7m5t/N8I1EbKD+ICA7bzbqVzc3OHmNEGa030OOT1LWvV6vRAVdHV1fUlcPoVxgXIywWevnz58gD5rL5WwN2kyHTwy0fY4PWdS3u6LOmg8wbvp9FM2VtW9vz8fHUkEnmTQfb6p7eTrPw7D69Tra2t3q/MFLTTvPbq2traw0A1AGx0kJfbrQD5PfqyXhlbrCTn5Ve9R0cBWUgJ6I3FYm+Mjo72yxI7BbP9NZZvTh3cKZ6jrkXTjS7J06ejJG/6c7mQGptXIdPdwoATCArpl5I37qA84S/K33J5GOvv79/y5U2Cc8Pg4KCvubm5jU+VOkxCgkpb0KYrtA2FQqHF3LEq5wVVI9arxrovIbRdQiVcwDSZPOk69WPUj9EvwvYS5Yuf2U54oFXRVskPrWVMG37YKv+zgDZNy5qjfah9m2+t24IipESWaGlpOUb2KSI6/30IShl1Bh6oREbZ5DPrgDRvskxAVjrH+ObwhQsXfj1+/Hjer83o2N6i6mDD5ORkiF99lLKmLsX064NFAhhrXc/aqrfQmYCMM9Ochh0vKyv7Ree41bFdeluL5g7WVz+muB+YHtr0ucUDFEAmWOaPUB43WKL9D+Ios7SjR+SOQTPBJyYmdMnWP8N0Lau0UfCEvynrm7x2kQXilaampv/8cPwHyUDNAActdacAAAAASUVORK5CYII=" mode="widthFix"></image>
		</view>
		<view v-else-if="status === 'loading' && showIcon" class="uni-load-more__img">
			<image class="uni-load-more__img--ios" src="data:image/png;base64,[encoded data, 6164 characters]" mode="widthFix"></image>
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-NVUE || H5 -->
		<text class="uni-load-more__text" :style="{color: color}">{{ status === 'more' ? contentText.contentdown : status === 'loading' ? contentText.contentrefresh : contentText.contentnomore }}</text>
		<!-- #endif -->
		<!-- #ifndef APP-NVUE || H5 -->
		<text class="uni-load-more__text">{{ status === 'more' ? contentText.contentdown : status === 'loading' ? contentText.contentrefresh : contentText.contentnomore }}</text>
		<!-- #endif -->
	</view>
</template>

<script>
	const platform = uni.getSystemInfoSync().platform
	export default {
		name: 'UniLoadMore',
		props: {
			status: {
				// 上拉的状态：more-loading前；loading-loading中；noMore-没有更多了
				type: String,
				default: 'more'
			},
			showIcon: {
				type: Boolean,
				default: true
			},
			iconType: {
				type: String,
				default: 'auto'
			},
			color: {
				type: String,
				default: '#777777'
			},
			contentText: {
				type: Object,
				default () {
					return {
						contentdown: '上拉显示更多',
						contentrefresh: '正在加载...',
						contentnomore: '没有更多数据了'
					}
				}
			}
		},
		data() {
			return {
				platform: platform
			}
		},
		methods: {
			onClick() {
				this.$emit('clickLoadMore', {
					detail: {
						status: this.status,
					}
				})
			}
		}
	}
</script>

<style scoped>
	.uni-load-more {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		height: 40px;
		align-items: center;
		justify-content: center;
	}

	.uni-load-more__text {
		font-size: 15px;
	}

	.uni-load-more__img {
		width: 24px;
		height: 24px;
		margin-right: 8px;
	}

	.uni-load-more__img--nvue {
		color: #666666;
	}

	.uni-load-more__img--android,
	.uni-load-more__img--ios {
		width: 24px;
		height: 24px;
		transform: rotate(0deg);
	}

	/* #ifndef APP-NVUE */
	.uni-load-more__img--android {
		animation: loading-ios 1s 0s linear infinite;
	}

	.uni-load-more__img--ios {
		animation: loading-ios 1s 0s step-end infinite;
	}

	@keyframes loading-android {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes loading-ios {
		0% {
			transform: rotate(0deg);
		}

		8% {
			transform: rotate(30deg);
		}

		16% {
			transform: rotate(60deg);
		}

		24% {
			transform: rotate(90deg);
		}

		32% {
			transform: rotate(120deg);
		}

		40% {
			transform: rotate(150deg);
		}

		48% {
			transform: rotate(180deg);
		}

		56% {
			transform: rotate(210deg);
		}

		64% {
			transform: rotate(240deg);
		}

		73% {
			transform: rotate(270deg);
		}

		82% {
			transform: rotate(300deg);
		}

		91% {
			transform: rotate(330deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	/* #endif */

	/* #ifdef H5 */
	.uni-load-more__img--android-H5 {
		animation: loading-android-H5-rotate 2s linear infinite;
		transform-origin: center center;
	}

	.uni-load-more__img--android-H5>circle {
		display: inline-block;
		animation: loading-android-H5-dash 1.5s ease-in-out infinite;
		stroke: currentColor;
		stroke-linecap: round;
	}

	@keyframes loading-android-H5-rotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes loading-android-H5-dash {
		0% {
			stroke-dasharray: 1, 200;
			stroke-dashoffset: 0;
		}

		50% {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -40;
		}

		100% {
			stroke-dasharray: 90, 150;
			stroke-dashoffset: -120;
		}
	}

	.uni-load-more__img--ios-H5 {
		position: relative;
		animation: loading-ios-H5 1s 0s step-end infinite;
	}

	.uni-load-more__img--ios-H5>view {
		position: absolute;
		height: 6px;
		width: 2px;
		left: 11px;
		top: 0;
		transform-origin: 1px 12px;
	}

	/* @for $i from 1 through 12 {
 */
	/* 	.uni-load-more__img--ios-H5>view:nth-child(#{$i}) {
 */
	/* 		transform: rotate(360deg - ($i - 1) * 30deg);
 */
	/* 		opacity: 1 - $i * 0.08;
 */
	/* 	}
 */
	/* }
 */

	.uni-load-more__img--ios-H5>view:nth-child(1) {
		transform: rotate(360deg);
		opacity: 0.92;
	}

	.uni-load-more__img--ios-H5>view:nth-child(2) {
		transform: rotate(330deg);
		opacity: 0.84;
	}

	.uni-load-more__img--ios-H5>view:nth-child(3) {
		transform: rotate(300deg);
		opacity: 0.76;
	}

	.uni-load-more__img--ios-H5>view:nth-child(4) {
		transform: rotate(270deg);
		opacity: 0.68;
	}

	.uni-load-more__img--ios-H5>view:nth-child(5) {
		transform: rotate(240deg);
		opacity: 0.6;
	}

	.uni-load-more__img--ios-H5>view:nth-child(6) {
		transform: rotate(210deg);
		opacity: 0.52;
	}

	.uni-load-more__img--ios-H5>view:nth-child(7) {
		transform: rotate(180deg);
		opacity: 0.44;
	}

	.uni-load-more__img--ios-H5>view:nth-child(8) {
		transform: rotate(150deg);
		opacity: 0.36;
	}

	.uni-load-more__img--ios-H5>view:nth-child(9) {
		transform: rotate(120deg);
		opacity: 0.28;
	}

	.uni-load-more__img--ios-H5>view:nth-child(10) {
		transform: rotate(90deg);
		opacity: 0.2;
	}

	.uni-load-more__img--ios-H5>view:nth-child(11) {
		transform: rotate(60deg);
		opacity: 0.12;
	}

	.uni-load-more__img--ios-H5>view:nth-child(12) {
		transform: rotate(30deg);
		opacity: 0.04;
	}

	@keyframes loading-ios-H5 {
		0% {
			transform: rotate(0deg);
		}

		8% {
			transform: rotate(30deg);
		}

		16% {
			transform: rotate(60deg);
		}

		24% {
			transform: rotate(90deg);
		}

		32% {
			transform: rotate(120deg);
		}

		40% {
			transform: rotate(150deg);
		}

		48% {
			transform: rotate(180deg);
		}

		56% {
			transform: rotate(210deg);
		}

		64% {
			transform: rotate(240deg);
		}

		73% {
			transform: rotate(270deg);
		}

		82% {
			transform: rotate(300deg);
		}

		91% {
			transform: rotate(330deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	/* #endif */
</style>