<template>
	<view>
		<view class="list-item" v-for="(item, index) in dataList" :key="index">
			<view class="topper">
				<view class="header">
					<image v-if="item.flag==='new'" src="../static/minestar/new.png"></image>
					<image v-if="item.flag==='hot'" src="../static/minestar/hot.png"></image>
					<i class='iconfont icon-star' v-if="item.collect"></i>
					<i class='iconfont icon-star1' v-if="!item.collect"></i>
				<!-- 	<u-icon name="star-fill" v-if="item.collect" size="18px"></u-icon>
					<u-icon name="star" v-if="!item.collect" size="18px"></u-icon> -->
				</view>
				<view class="body">
					<u-avatar
						slot="icon"
						shape="square"
						size="50"
						:src="item.src"
						customStyle="margin-right:30px"
					></u-avatar>
					<view>
						<p>{{item.name}}</p>
						<u--text type="info" :text="item.desc" size="12"></u--text>
					</view>
				</view>
				<view class="tag">
					<template v-for="(label, index1) in item.labels">
						<div style="" >{{label.name}}</div>
					</template>
					
				</view>
			</view>
			
			<view class="footer">
				<text class="text">HOT:5151</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"list-item",
		props: {
			dataList: {
				type: Array,
				default: function() {
				   return [{
					   src: '/static/minestar/厚度计算.png',
					   name: '体积计算',
					   desc: '计算器',
					   collect: true,
					   flag: 'hot',
					   labels: [{
						   name: '计算器',
						   bgcolor: 'pink'
					   }]
				   },{
					   src: '/static/minestar/体积计算.png',
					   name: '体积计算',
					   desc: '计算器',
					   collect: false,
					   flag: 'new',
					   labels: [{
						   name: '计算器',
						   bgcolor: 'pink'
					   }]
				   },{
					  src: '/static/minestar/平均品位计算.png',
					   name: '体积计算',
					   desc: '计算器',
					   collect: true,
					   labels: [{
						   name: '计算器',	
						   bgcolor: 'pink'
					   }]
				   },{
					   src: '/static/minestar/岩层厚度.png',
					   name: '体积计算',
					   desc: '计算器',
					   collect: true,
					   labels: [{
						   name: '计算器计算器',
						   bgcolor: 'pink'
					   },{
						   name: '断面计算',
						   bgcolor: 'pink'
					   }]
				   },{
					   src: '/static/minestar/巷道横截面计算.png',
					   name: '体积计算',
					   desc: '计算器',
					   collect: false,
					   labels: [{
						   name: '计算器',
						   bgcolor: 'pink'
					   }]
				   },]
				}
			},
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style scoped lang="scss">
	@mixin rounded-corners{
		border-radius: 20rpx;
	}
	@mixin tag($width:32px, $height:16px, $bgcolor:#fff, $fontsize:12px){
		padding: 0px 2px;
		margin-right: 2px;
		min-width: 64rpx;
		height: $height;
		line-height: $height;
		background-color: $bgcolor;
		font-size: $fontsize;
		text-align: center;
		border-radius: 4px;
	}
		.list-item{
			position: relative;
			margin-top: 10upx;
			background-color: #fff;
			.topper{
				padding: 0 40upx;
			}
		}
		
		.header, .body, .tag, .footer{
			display: flex;
		}
		.header{
			justify-content: space-between;
			image{
				width: 50rpx;
				height: 50rpx;
				position: absolute;
				left: 0;
			}
			.iconfont{
				color: #FFD64B;
				position: absolute;
				right: 20rpx;
				top: 8rpx;
			}
		}
		.body{
			justify-content: flex-start;
			height: 120upx;
			align-items: center;
			p{
				font-size: 30upx;
				font-weight: bold;
			}
		}
		.tag{
			justify-content: flex-end;
			padding-bottom: 8upx;
			div{
				//color: #fff;background-color: orangered;width: 42upx;height: 22upx;line-height: 22upx;font-size: 20upx;
				@include tag($bgcolor: pink);
			}
		}
		.footer{
			justify-content: flex-end;
			border-top: 1upx solid lightgray;
			padding-right: 20px;
			.text{
				font-size: 22upx;
				color: darkgray;
				
			}
		}
</style>