<template>
	<view
	    class="uv-loadmore"
	    :style="[{
				backgroundColor: bgColor,
				marginBottom: $uv.addUnit(marginBottom),
				marginTop: $uv.addUnit(marginTop),
				height: $uv.addUnit(height),
			},
			$uv.addStyle(customStyle)]"
	>
		<uv-line
		    length="140rpx"
		    :color="lineColor"
		    :hairline="false"
			:dashed="dashed"
			v-if="line"
		></uv-line>
		<!-- 加載中和沒有更多的狀態才顯示兩邊的橫線 -->
		<view
		    :class="status == 'loadmore' || status == 'nomore' ? 'uv-more' : ''"
		    class="uv-loadmore__content"
		>
			<view
			    class="uv-loadmore__content__icon-wrap"
			    v-if="status === 'loading' && icon"
			>
				<uv-loading-icon
				    :color="iconColor"
				    :size="iconSize"
				    :mode="loadingIcon"
				></uv-loading-icon>
			</view>
			<!-- 如果沒有更多的狀態下，顯示內容為dot（粗點），加載特定樣式 -->
			<text
			    class="uv-line-1"
			    :style="[loadTextStyle]"
			    :class="[(status == 'nomore' && isDot == true) ? 'uv-loadmore__content__dot-text' : 'uv-loadmore__content__text']"
			    @tap="loadMore"
			>{{ showText }}</text>
		</view>
		<uv-line
		    length="140rpx"
		    :color="lineColor"
			:hairline="false"
			:dashed="dashed"
			v-if="line"
		></uv-line>
	</view>
</template>

<script>
	import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
	import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
	import props from './props.js';

	/**
	 * loadmore 加載更多
	 * @description 此組件壹般用於標識頁面底部加載數據時的狀態。
	 * @tutorial https://www.uvui.cn/components/loadMore.html
	 * @property {String}			status			組件狀態（默認 'loadmore' ）
	 * @property {String}			bgColor			組件背景顏色，在頁面是非白色時會用到（默認 'transparent' ）
	 * @property {Boolean}			icon			加載中時是否顯示圖標（默認 true ）
	 * @property {String | Number}	fontSize		字體大小（默認 14 ）
	 * @property {String | Number}	iconSize		圖標大小（默認 17 ）
	 * @property {String}			color			字體顏色（默認 '#606266' ）
	 * @property {String}			loadingIcon		加載圖標（默認 'circle' ）
	 * @property {String}			loadmoreText	加載前的提示語（默認 '加載更多' ）
	 * @property {String}			loadingText		加載中提示語（默認 '正在加載...' ）
	 * @property {String}			nomoreText		沒有更多的提示語（默認 '沒有更多了' ）
	 * @property {Boolean}			isDot			到上壹個相鄰元素的距離 （默認 false ）
	 * @property {String}			iconColor		加載中圖標的顏色 （默認 '#b7b7b7' ）
	 * @property {String}			lineColor		線條顏色（默認 #E6E8EB ）
	 * @property {String | Number}	marginTop		上邊距 （默認 10 ）
	 * @property {String | Number}	marginBottom	下邊距 （默認 10 ）
	 * @property {String | Number}	height			高度，單位px （默認 'auto' ）
	 * @property {Boolean}			line			是否顯示左邊分割線  （默認 false ）
	 * @property {Boolean}			dashed		// 是否虛線，true-虛線，false-實線  （默認 false ）
	 * @event {Function} loadmore status為loadmore時，點擊組件會發出此事件
	 * @example <uv-loadmore :status="status" icon-type="iconType" load-text="loadText" />
	 */
	export default {
		name: "uv-loadmore",
		mixins: [mpMixin, mixin,props],
		data() {
			return {
				// 粗點
				dotText: "●"
			}
		},
		computed: {
			// 加載的文字顯示的樣式
			loadTextStyle() {
				return {
					color: this.color,
					fontSize: this.$uv.addUnit(this.fontSize),
					lineHeight: this.$uv.addUnit(this.fontSize),
					backgroundColor: this.bgColor,
				}
			},
			// 顯示的提示文字
			showText() {
				let text = '';
				if (this.status == 'loadmore') text = this.loadmoreText
				else if (this.status == 'loading') text = this.loadingText
				else if (this.status == 'nomore' && this.isDot) text = this.dotText;
				else text = this.nomoreText;
				return text;
			}
		},
		methods: {
			loadMore() {
				// 只有在“加載更多”的狀態下才發送點擊事件，內容不滿壹屏時無法觸發底部上拉事件，所以需要點擊來觸發
				if (this.status == 'loadmore') this.$emit('loadmore');
			}
		}
	}
</script>

<style lang="scss" scoped>
	$show-lines: 1;
	@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
	@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
	@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
	.uv-loadmore {
		@include flex(row);
		align-items: center;
		justify-content: center;
		flex: 1;

		&__content {
			margin: 0 15px;
			@include flex(row);
			align-items: center;
			justify-content: center;

			&__icon-wrap {
				margin-right: 8px;
			}

			&__text {
				font-size: 14px;
				color: $uv-content-color;
			}

			&__dot-text {
				font-size: 15px;
				color: $uv-tips-color;
			}
		}
	}
</style>
