<template>
	<view :class="['u-theme-' + cTheme]">
		<!-- #ifdef APP-NVUE -->
		<cell>
			<!-- #endif -->
			<view
				class="u-list-item"
				:ref="`u-list-item-${anchor}`"
				:anchor="`u-list-item-${anchor}`"
				:class="[`u-list-item-${anchor}`]"
				:style="{
					backgroundColor: bgColor
				}"
			>
				<view v-for="(item, index) in data" :key="index">
					<view
						v-if="item[titleName] && showTitle"
						class="u-list-item-title"
						:style="[titleStyle]"
						>{{ item[titleName] || "--" }}</view
					>
					<view :class="[item[titleName] && showTitle ? 'u-list-item-box-title': 'u-list-item-box']">
						<view
							:class="[item[titleName] && showTitle ? 'u-list-item-box-item-title': 'u-list-item-box-item']"
							:hover-class="hoverClass"
							v-for="(el, idx) in item[childName]"
							:key="idx"
							@tap="click(el)"
						>
							<view class="u-list-item-box-item-padding">
								<view
									class="u-list-item-box-item-label"
									:style="[labelStyle]"
									>{{ el[labelName] }}</view
								>
								<u-icon
									class="u-list-item-box-item-icon"
									v-if="arrow"
									name="arrow-right"
								></u-icon>
							</view>
						</view>
					</view>
				</view>
				<!-- <slot /> -->
			</view>
			<!-- #ifdef APP-NVUE -->
		</cell>
		<!-- #endif -->
	</view>
</template>

<script>
// #ifdef APP-NVUE
const dom = uni.requireNativePlugin("dom");
// #endif
/**
 * List 列表
 * @description 该组件为高性能列表组件
 * @tutorial https://www.uviewui.com/components/list.html
 * @property {String | Number}	anchor	用于滚动到指定item
 * @property {Array} data 列表数据
 * @property {Boolean} arrow 是否显示右侧箭头,开启的话，将会默认带上点击反馈，可通过hover-class配置
 * @property {String} hover-class 是否开启点击反馈，none为无效果，见上方说明
 * @property {Object} title-style 标题样式，对象形式
 * @property {Object} label-style 信息标题的样式，对象形式
 * @property {String} bg-color 背景颜色，默认透明背景
 * @property {String} title-name 自定义list数据的title属性名
 * @property {String} label-name 自定义list数据的label属性名
 * @property {String} child-name 自定义list数据的children属性名
 * @example <u-list-item :data="list" titleName="title" :show-title="showTitle" @click="clickItem"></u-list-item>
 */
export default {
	name: "u-list-item",
	// mixins: [uni.$u.mpMixin, uni.$u.mixin],
	data() {
		return {
			// 节点信息
			rect: {},
			index: 0,
			show: true,
			sys: uni.$u.sys()
		};
	},
	props: {
		// 用于滚动到指定item
		anchor: {
			type: [String, Number],
			default: ""
		},
		showTitle: {
			type: Boolean,
			default: true
		},
		data: {
			type: Array,
			default: () => []
		},
		arrow: {
			type: Boolean,
			default: true
		},
		hoverClass: {
			type: String,
			default: "u-cell-hover"
		},
		titleStyle: {
			type: Object,
			default: () => {}
		},
		labelStyle: {
			type: Object,
			default: () => {}
		},
		bgColor: {
			type: String,
			default: "transparent"
		},
		// 自定义value属性名
		titleName: {
			type: String,
			default: "title"
		},
		// 自定义label属性名
		labelName: {
			type: String,
			default: "label"
		},
		// 自定义多列联动模式的children属性名
		childName: {
			type: String,
			default: "children"
		},
		// 关怀模式: normal, care(fpi新增)
		theme: {
			type: String,
			default: ""
		}
	},
	computed: {
		cTheme() {
			return this.theme || (uni.$u || {}).theme;
		}
	},
	inject: ["uList"],
	watch: {
		// #ifndef APP-NVUE
		"uList.innerScrollTop"(n) {
			const preLoadScreen = this.uList.preLoadScreen;
			const windowHeight = this.sys.windowHeight;
			if (n <= windowHeight * preLoadScreen) {
				this.parent.updateOffsetFromChild(0);
			} else if (this.rect.top <= n - windowHeight * preLoadScreen) {
				this.parent.updateOffsetFromChild(this.rect.top);
			}
		}
		// #endif
	},
	created() {
		this.parent = {};
	},
	mounted() {
		this.init();
	},
	methods: {
		init() {
			// 初始化数据
			this.updateParentData();
			this.index = this.parent.children.indexOf(this);
			this.resize();
		},
		updateParentData() {
			// 此方法在mixin中
			this.getParentData("u-list");
		},
		resize() {
			this.queryRect(`u-list-item-${this.anchor}`).then(size => {
				const lastChild = this.parent.children[this.index - 1];
				this.rect = size;
				const preLoadScreen = this.uList.preLoadScreen;
				const windowHeight = this.sys.windowHeight;
				// #ifndef APP-NVUE
				if (lastChild) {
					this.rect.top = lastChild.rect.top + lastChild.rect.height;
				}
				if (
					size.top >=
					this.uList.innerScrollTop +
						(1 + preLoadScreen) * windowHeight
				)
					this.show = false;
				// #endif
			});
		},
		// 查询元素尺寸
		queryRect(el) {
			return new Promise(resolve => {
				// #ifndef APP-NVUE
				this.$uGetRect(`.${el}`).then(size => {
					resolve(size);
				});
				// #endif

				// #ifdef APP-NVUE
				const ref = this.$refs[el];
				dom.getComponentRect(ref, res => {
					resolve(res.size);
				});
				// #endif
			});
		},
		click(item) {
			this.$emit("click", item);
		}
	}
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";
@include themify($themes) {
	.u-list-item {
		&-title {
			color: #000;
			font-size: themed("font-size-12");
			font-weight: 500;
			padding: 24rpx 40rpx;
		}
		&-box {
			&-title {
				border-top: 1rpx solid rgba($color: themed('u-border-color'), $alpha: 0.5);
				border-bottom: 1rpx solid rgba($color: themed('u-border-color'), $alpha: 0.5);
			}
		}
		&-box-item-title,&-box-item {
			font-size: themed("font-size-14");
			color: themed("u-main-color");
			padding-left: 40rpx;
			&-padding {
				padding: 28rpx 40rpx 28rpx 0;
				@include vue-flex;
				align-items: center;
				justify-content: space-between;
			}
			&-icon {
				color: themed('u-border-color');
				font-size: themed("font-size-12");
			}
		}
		&-box-item-title {
			&:not(:last-child) > view {
				border-bottom: 1rpx solid rgba($color: themed('u-border-color'), $alpha: 0.5);
			}
		}
		&-box-item {
			> view {
				border-bottom: 1rpx solid rgba($color: themed('u-border-color'), $alpha: 0.5);
			}
		}
	}
}
</style>
