<template>
	<view class="industry--list">
		<block v-if="list.length > 0">
			<view class="industry--box" v-for="(item, index) in list" :key="index" @click="industry(item)">
				<image class="industry--cover" :src="item.cover" mode="aspectFill"></image>
				<view class="industry--content">
					<view class="industry--title">{{item.name}}</view>
					<view class="industry--credibility">
						<uni-rate
							:readonly="true"
							color="#ddd"
							active-color="#e93340"
							:value="item.star"
							:size="14"
						/>
					</view>
					<view class="industry--business">{{item.industry.title}}</view>
					<uni-icons class="industry--arrow" type="arrowright" color="#ddd" size="14" />
				</view>
			</view>
		</block>
		<block v-else>
			<view class="industry--null">
				<view>{{toast}}</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		name:"industry-list",
		props: {
			// 数据列表
			list: {
				type	: Array,
				default	: () => {
					return new Array
				}
			},
			// 列表空提示
			toast	: {
				type	: String,
				default	: '暂无商品数据 -_-!'
			}
		},
		methods:{
			industry(e){
				this.$emit('on-industry', e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 列表信息
	.industry--list{
		padding-bottom: $padding;
	}
	.industry--box{
		position: relative;
		margin: $margin - 10 $margin;
		background: white;
		border-radius: $radius/2;
		padding: $padding ($padding*3) $padding ($padding * 2 + 128);
		min-height: 128rpx;
		.industry--cover{
			position: absolute;
			left: $padding;
			top: $padding;
			width: 128rpx;
			height: 128rpx;
		}
		.industry--title{
			font-weight: bold;
			font-size: $title-size-lg;
			line-height: 40rpx;
		}
		.industry--credibility{
			padding-top: 8rpx;
			height: 48rpx;
			box-sizing: border-box;
		}
		.industry--business{
			line-height: 40rpx;
			font-size: $title-size-sm;
			color: $text-gray;
		}
		.industry--arrow{
			position: absolute;
			right: $margin;
			top: 50%;
			margin-top: -7px;
		}
	}
	// 数据空
	.industry--null{
		width: 100%;
		padding: 20vh 0;
		text-align: center;
		font-size: $title-size-m;
		color: $text-gray;
	}
</style>
