<!-- *******************  单个下拉选择  *******************  -->
<template>
	<view class="xh-select" :style="{ width: width }">
		<view class="u-flex u-row-between picker-common" :class="{ border: border }" :style="{ background: background }">
			<picker mode="selector" :value="index" :range-key="rangeKey" :range="list" @click="onOpen" @change="pickerChange" @cancel="close" class="u-flex-1" :disabled="disabled">
				<view class="txt">
					<view class="text-inner">
						{{ text || placeholder }}
					</view>
				</view>
			</picker>
			<u-icon class="input-icon" color="#2272FF" :name="show ? 'arrow-up' : 'arrow-down'"></u-icon>
		</view>
	</view>
</template>

<script>
export default {
	name: 'XhPickerSelect',
	components: {},
	props: {
		value: {
			type: [Number, String, null]
		},
		placeholder: {
			type: String,
			default: '请选择'
		},
		width: {
			// 例如：454rpx
			type: String,
			default: '100%'
		},
		border: {
			type: Boolean,
			default: false
		},
		background: {
			type: String
		},
		list: {
			type: Array
		},
		rangeKey: {
			type: String,
			default: 'label'
		},
		disabled: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			show: false,
			index: '',
			dataValue: ''
		};
	},
	computed: {
		text() {
			let option = this.list.find((a, i) => {
				return a.id === this.dataValue;
			});
			return option ? option[this.rangeKey] : '';
		},
		placeholderStyle() {
			return 'color:#999999;font-size:26rpx';
		},
		customStyle() {
			return {
				'background-color': '#F4F5F7',
				'border-radius': '12rpx',
				color: '#333333',
				'padding-left': '20rpx',
				'padding-right': '60rpx',
				width: this.width,
				'font-size': '26rpx',
				height: '76rpx'
			};
		}
	},
	watch: {
		value: function(val) {
			this.dataValue = val;
		}
	},
	mounted() {
		/** 如果有值以传入值为主 如果无值 已默认值为主 */
		this.dataValue = this.value;
	},
	methods: {
		onOpen() {
			if (this.disabled) return false;
			this.show = true;
		},
		close() {
			this.show = false;
		},
		pickerChange(event) {
			this.index = +event.detail.value;
			let params = this.list[this.index];
			this.dataValue = params.id;
			this.$emit('change', params);
			this.close();
		}
	}
};
</script>

<style lang="scss" scoped>
.xh-select {
	position: relative;
	.input-icon {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		color: #2272ff;
	}
}
.picker-common {
	min-height: 34px;
	background-color: #ffffff;
	border-radius: 6px;
	color: #333333;
	padding-left: 10px;
	width: 100%;
	height: 36px;
	.u-flex-1 {
		width: 100%;
		.txt {
			font-size: 14px;
			width: 100%;
			.text-inner{
				padding-right: 50rpx;
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
}
.border {
	border: 2upx solid #eeeeee;
}
</style>
