<template>
	<view class="yn-select-list">
		<view class="u-select-input-list" @click="clickFn">
			<view class="select_wrapper">
				<view class="placeholder u-line-2" v-if="value==''">{{placeholder}}</view>
				<view class="input_value" v-else>{{value}}</view>
			</view>
			<view class="right-icon u-flex">
				<u-icon :name="rightIcon" size="28"></u-icon>
			</view>
		</view>
	 </view>
</template>

<script>
	export default {
		name:"yn-select-input-list",
		props: {
			value: {
			   type: String|Number,
			   default: ''
			},
			rightIcon:{
				type: String,
				default: 'arrow-down-fill'
			},
			placeholder:{
				type: String,
				default: '请选择内容'
			}
		},
		data() {
			return {
				
			};
		},
		created() {
			
		},
		methods:{
			selectShowFn(){
				this.show = true;
			},
			clickFn(e){
				this.$emit('click',e)
			}
		}
	}
</script>

<style lang="scss" scoped>
.yn-select-list{
	display: flex;
	flex-direction: column;
	flex: 1;
}
.u-select-input-list{
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: row;
	border-radius: 8rpx;
	min-height: 72rpx;
	border: 1px solid #dcdfe6;
	padding: 0 20rpx;
	.select_wrapper{
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		font-size: 28rpx;
		color: #000;
	}
	.right-icon{
		.u-icon__icon{
			margin-left: 10rpx;
			color: rgb(192, 196, 204);
		}
	}
	
}
</style>