<template>
	<u-index-list @scrolltolower="scrolltolower" class="user_list" :style="{ height: height }" :index-list="indexList">
		<view v-for="(item, index) in itemArr" :key="index">
			<u-index-item :key="index">
				<u-index-anchor class="user_anchor" :text="indexList[index]"></u-index-anchor>
				<user-item
					@itemClick="itemClick"
					@updateCheck="updateCheck"
					:checked="checkedIDList.includes(cell.userID)"
					:disabled="disabledIDList.includes(cell.userID)"
					:checkVisible="showCheck"
					v-for="cell in item"
					:item="cell"
					:key="cell.userID"
				/>
			</u-index-item>
		</view>
	</u-index-list>
</template>

<script>
import UserItem from '../UserItem/index.vue';
export default {
	name: 'ChooseIndexList',
	components: {
		UserItem
	},
	props: {
		height: {
			type: String,
			default: '0px'
		},
		indexList: {
			type: Array,
			default: () => []
		},
		itemArr: {
			type: Array,
			default: () => []
		},
		checkedIDList: {
			type: Array,
			default: () => []
		},
		disabledIDList: {
			type: Array,
			default: () => []
		},
		showCheck: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {};
	},
	methods: {
		itemClick(item) {
			this.$emit('itemClick', item);
		},
		updateCheck(item) {
			this.$emit('updateCheck', item);
		},
		scrolltolower() {
			this.$emit('scrolltolower');
		}
	}
};
</script>

<style scoped lang="scss">
.user_list {
	flex: 1;
	::v-deep uni-scroll-view {
		max-height: 100% !important;
	}
}

.user_anchor {
	background-color: #f8f8f8 !important;
	border: none !important;
}
</style>
