<template>
	<view style="width: 100%; height: 100%;">
		<view v-if="axiosStatus!=''">
			<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">
					<view :class="['titleItem', '']" :style="`width:${isNoIcon ? '100%' : 'calc(100% - 50rpx)'}`">
						<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>
			<text class="null_text" v-else-if="!isOrderList">暂无数据</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		props: [
			"indexKey",
			"dataList",
			"label",
			"isCondition",
			"isNoIcon",
			"pagination",
			"noDataIcon",
			"isLoadingHide",
			"axiosStatus",
			"isOrderList"
		],
		data() {
			return {
				status: '',

			};
		},
		onLoad() {},
		onShow() {
			this.status = '';
		},
		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 20rpx;
		font-size: 30rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #e0e0e0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

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

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

	.rightArrow {
		width: 40rpx;
		height: 40rpx;
		flex-shrink: 0;
	}

	.scroll-Y {
		height: 100%;
	}

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

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
	}

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

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

	.list_item:last-child {
		border-bottom: none !important;
	}
	.null_text{
		display: block;
		text-align: center;
		font-size: 30rpx;
		color: #999;
		padding-top: 150rpx;
		padding-bottom: 50rpx;
	}
</style>