<template>
	<view class="w-click-input" hover-class="w-click-hover" hover-stay-time="200" @tap="$emit('click')">
		<uni-icons2 :type="$props.preIcon" :size="22" color="#C3C6CD" v-if="$props.preIcon && !$props.disabled"
			style="margin-right: 10rpx;"></uni-icons2>
		<slot v-if="showVal">
			<text class="w-click-input-value">{{_value}}</text>
		</slot>
		<text v-else style="color: #999;" class="w-click-input-value">{{$props.placeholder}}</text>
		<uni-icons2 v-show="!$props.disabled" v-if="!$props.readonly" type="right" :size="20" color="#999"></uni-icons2>
	</view>
</template>
<script>
	export default {
		props: {
			//前缀图标
			preIcon: {
				type: String,
				default: null
			},
			split: {
				type: String,
				default: '、'
			},
			//取对象key值
			index: String,
			//值
			value: Number | String | Object | Array | Function,
			//自定义取名函数
			valueFunc: Function,
			placeholder: String,
			disabled: Boolean
		},
		components: {},
		data() {
			return {

			}
		},
		computed: {
			showVal() {
				if (typeof(this.$props.value) === 'string') {
					return this.$props.value !== ''
				} else if (Array.isArray(this.$props.value)) {
					return this.$props.value.length > 0
				}
				return this.$props.value || false
			},
			_value() {
				console.log(22222, this.$props.value)
				if (Array.isArray(this.$props.value)) {
					return this.$props.index ? this.$props.value.map(v => v[this.$props.index]).join(this.$props.split) :
						this.$props.value.join(this.$props.split)
				} else if ('object' === typeof(this.$props.value)) {
					return this.$props.index ? this.$props.value[this.$props.index] : JSON.stringify(this.$props.value)
				} else if ('function' === typeof(this.$props.value)) {
					return this.$props.value()
				} else {
					return (this.$props.value || '') == '' ? this.$props.placeholder : this.$props.value
				}
			}
		},
		onLoad() {

		},
		mounted() {

		},
		onShow() {

		},
		methods: {

		},
	}
</script>

<style lang="less" scoped>
	.w-click-input {
		font-size: 32rpx;
		padding: 10rpx;
		display: flex;
		align-items: center;
		border-radius: 4rpx;

		.w-click-input-value {
			flex: 1;
		}
	}
</style>