<template>
	<view class="w-click-input" hover-class="w-click-hover" hover-stay-time="200" @tap="$emit('click')">
		<uni-icons :type="props.preIcon" :size="22" color="#C3C6CD" v-if="props.preIcon && !disabled" style="margin-right: 5px;"></uni-icons>
		<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-icons v-show="!disabled" v-if="!props.readonly" type="right" :size="20" color="#999"></uni-icons>
	</view>
</template>

<script setup>
	import {ref, computed} from 'vue'
	
	const props = defineProps({
		//前缀图标
		preIcon: {
			type: String,
			default: null
		},
		split: {
			type: String,
			default: '、'
		},
		//取对象key值
		index: String,
		//值
		value: Number | String | Object | Array | Function,
		//自定义取名函数
		valueFunc: Function,
		placeholder: String,
		disabled: Boolean
	})
	
	const showVal = computed(() => {
		if(typeof(props.value) === 'string'){
			return props.value !== ''
		}else if(Array.isArray(props.value)){
			return props.value.length > 0
		}
		return props.value || false
	})
	
	const _value = computed(() => {
		if (Array.isArray(props.value)){
			return props.index ? props.value.map(v => v[props.index]).join(props.split) : props.value.join(props.split)
		}else if('object' === typeof(props.value)){
			return props.index ? props.value[props.index] : JSON.stringify(props.value)
		}else if('function' === typeof(props.value)){
			return props.value()
		}else {
			return (props.value || '') == '' ? props.placeholder : props.value
		}
	})
	
	const emits = defineEmits(['update:modelValue'])

	
</script>

<style lang="less" scoped>
.w-click-input {
	font-size: 32rpx;
	padding: 5px;
	display: flex;
	align-items: center;
	border-radius: 2px;
	.w-click-input-value {
		flex: 1;
	}
}
</style>