<template>
	<view style="width: 100%; height: 100%;">
		<scroll-view @scrolltolower="lower" scroll-y="true" class="scroll-Y" v-if="dataList&&dataList.length > 0"
			style="height: 100%">
			<view @click="gotoDetail(item, index)" class="scroll-view-item list_item" v-for="(item, index) in dataList"
				:key="indexKey ? item[indexKey] : item.id" :index="indexKey ? item[indexKey] : index"
				style="align-items: flex-start">
				<view :class="['titleItem', '']" :style="`width:${isNoIcon ? '100%' : 'calc(100% - 30rpx)'}`">
					<slot name="leftSlot" :row="item" :item="item" :index="index"> </slot>

					<template v-if="isCondition">

						<slot name="labelSlot" :row="item" :rowIndex="index"></slot>
					</template>
					<template v-else>
						{{ item[label] }}
					</template>

					<slot name="rightSlot" :row="item" :rowIndex="index"></slot>
				</view>
				<image v-if="!isNoIcon" src="@/static/icon/icon_right.png" class="rightArrow" style=""></image>
			</view>
		</scroll-view>
		<u-empty v-else-if="noDataIcon && isLoadingHide" :mode="noDataIcon"
			:icon="`http://cdn.uviewui.com/uview/empty/${noDataIcon}.png`">
		</u-empty>
		<u-divider style="width: 100%;" v-else text="暂无数据哦~"></u-divider>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		props: [
			"indexKey",
			"dataList",
			"label",
			"isCondition",
			"isNoIcon",
			"pagination",
			"noDataIcon",
			"isLoadingHide",
		],
		data() {
			return {};
		},
		onLoad() {},
		onHide() {
			// this.showSearchList = false
			// this.searchList = []
		},
		computed: {
			...mapState(["userInfo"]),
		},
		methods: {
			lower() {
				this.$emit("lower");
			},
			gotoDetail(data, index) {
				this.$emit("hancleClick", data, index);
			},
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		},
		components: {},
	};
</script>

<style lang="scss" scoped>
	.list_item {
		width: 100%;
		padding: 20rpx 30rpx;
		font-size: 30rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #e0e0e0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		//   position: relative;
	}

	.list_item :last-child(1) {
		border-bottom: none;
	}

	.scroll-view-item:nth-child(2n-1) {
		background-color: #f5f5f5 !important;
	}

	.rightArrow {
		width: 40rpx;
		height: 40rpx;
		//   position: absolute;
		//   right: 30rpx;
		//   top: 20rpx;
	}

	.scroll-Y {
		height: 100%;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		// height: 300rpx;
		// line-height: 300rpx;
		// text-align: center;
		// font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		// height: 300rpx;
		// line-height: 300rpx;
		// text-align: center;
		// font-size: 36rpx;
	}

	.titleItem {
		width: calc(100% - 30rpx);
	}

	/deep/.scroll-view-item:nth-child(2n-1) {
		background-color: transparent !important;
	}

	.list_item:last-child {
		border-bottom: none !important;
	}
</style>