<template>
	<view class="listBox" @click="onClick">
		<view class="list">
			<view class="flex listItem">
				<view class="flex titleBox">
					<text class="title">当前选中：</text>
					<text v-for="(item,index) in specSelected" class="margin-l-10">
						<text v-if="index>0">,</text>
						<text>
							{{item}}
						</text>
					</text>
				</view>
				<view class="right flex">
					<text></text>
					<image class="img" src="../../../static/icon/next1.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			specSelected: {
				type: Array,
				default: function() {
					return []
				}
			},
		},
		data() {
			return {

			};
		},
		methods: {
			onClick() {
				this.$emit('click')
			}
		},
	};
</script>

<style lang="scss">
	.listBox {
		background-color: #FFFFFF;
		overflow: hidden;
	}

	.list {
		.listItem {
			padding: 30rpx 40rpx;
			padding-top: 0;
			border-bottom: 1px solid $page-color-light;
		}

		.listIconImg {
			width: 36rpx;
		}

		.right {
			color: $font-color-light;
			font-size: $font-base;
			flex-grow: 1;

			.img {
				width: 26rpx;
			}
		}

		.titleBox {
			color: $font-color-light;
			font-size: $font-base;
		}
	}
</style>
