<template>
	<div class="list">
		<h-list :dataSource="data">
			<h-list-item slot="renderItem" slot-scope="item, index" @click="handlerItemClick(item, index)">
				<div class="h-list-item-content">
					<div class="name">{{item.name}}</div>
				</div>
			</h-list-item>
		</h-list>

		<h-list :dataSource="data">
			<h-list-item slot="renderItem" slot-scope="item, index">
				<div class="h-list-item-content">
					<div class="name">{{item.name}}</div>
				</div>
				<div class="h-list-item-action"><i class="iconfont icon-right"></i></div>
			</h-list-item>
		</h-list>

		<h-list :dataSource="data">
			<h-list-item slot="renderItem" slot-scope="item, index">
				<div class="h-list-item-avatar">
					<img :src="item.headImg" >
				</div>
				<div class="h-list-item-content">
					<h4 class="h-list-item-content-name">{{item.name}}</h4>
					<div class="h-list-item-content-description">{{item.description}}</div>
					<ul class="h-list-item-content-actions">
						<li v-for="tag in item.tag">{{tag}}</li>
					</ul>
				</div>
			</h-list-item>
		</h-list>
	</div>
</template>

<script>
	export default {
		name: 'list',
		data() {
			return {
				data: []
			}
		},
		mounted() {
			for (var i = 0; i < 2; i++) {
				let item = {
					name: 'haloxylon_' + (i+1),
					headImg: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1824397163,2524498493&fm=26&gp=0.jpg',
					description: 'Haloxylon ammodendron, also known as saltwood, trivial, is a Chenopodiaceae, Haloxylon ammodendron genus plants, the trunk shape of Haloxylon ammodendron twisted, bark light gray or gray brown. They are distributed in the arid desert zone between 36 48 in the north latitude and 60 111 in the East longitude.',
					tag: ['Google', 'Alibaba']
				}

				this.data.push(item);
			}
		},
		methods: {
			handlerItemClick(item, index) {
				console.log(item, index);
			}
		}
	}
</script>

<style scoped>

</style>
