<template>
	<view class="setting_item" @click="$emit('click')">
		<view class="item_left">
			<slot name="icon">
				<image :src="icon" mode=""></image>
			</slot>
			<view class="">
				<view>{{ title }}</view>
				<slot name="left"></slot>
				<!-- <view>纪洁、杰西</view> -->
			</view>
		</view>
		<view v-if="showRight" class="item_right">
			<slot name="right"></slot>
			<u-icon name="arrow-right"></u-icon>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	props: {
		icon: String,
		showRight: Boolean,
		title: String
	},
	data() {
		return {};
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.setting_item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 36rpx 32rpx;
	background-color: #fff;
	border-bottom: 1px solid rgba(126, 134, 142, 0.16);

	.item_left {
		display: flex;
		// align-items: center;

		image {
			width: 20px;
			height: 20px;
			margin-right: 24rpx;
		}
	}

	.item_right {
		display: flex;
		color: #999;

		.u-icon {
			margin-left: 24rpx;
		}
	}

	&:last-of-type {
		border-width: 0;
	}
}
</style>
