<!-- *******************  输入框  *******************  -->
<template>
	<view :style="{'width': fieldsWidth}">
		<u-input :type="type" class="input-item" v-model="dataValue" @input="valueChange" :placeholder="placeholder" :placeholder-style="placeholderStyle"
		:custom-style="customStyle" :clearable="false" :border="border" border-color="#ECECEC" :maxlength="maxlength" :cursor-spacing="10" :disabled="isDisabled" hold-keyboard/>
		<view class="content" v-if="slotContent">
			<text class="txt">{{ slotContent }}</text>
		</view>
	</view>
</template>

<script>
	import stringMixin from './stringMixin'
	export default {
		name: 'XhInput', // 新建 input
		components: {},
		mixins: [stringMixin],
		props: {
			placeholder: {
				type: String,
				default: '请输入'
			},
			item: {
				type: Object,
				default() {
					return {}
				}
			},
			type: {
				type: String,
				default: 'text'
			},
			slotContent: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				inputType: 'text'
			}
		},
		computed: {
			maxlength() {
				return this.type == 'digit' ? 9 : 140
			},
			fieldsWidth() {
				return this.item.fieldsWidth ?  (this.item.fieldsWidth + 'rpx') : '100%'
			},
			placeholderStyle() {
				return 'color:#999999;font-size:26rpx'
			},
			customStyle() {
				return {
					'background-color': this.backgroundColor,
					'border-radius': '12rpx',
					'color': '#333333',
					'padding-left': this.textarea ? '0rpx' : '20rpx',
					'font-size':'26rpx',
					'height': '76rpx'
				}
			},
			border() {
				return this.textarea
			},
			textarea() {
				return this.inputType == 'textarea'
			},
			backgroundColor() {
				return this.textarea ? 'transparent' : '#F4F5F7'
			},
			isDisabled() {
				return this.item.fieldsName === 'pipeAmount' || this.disabled ? true : false
			}
		},
		watch: {},
		mounted() {},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	.input-item{
		background: #F4F5F7;
	}
	.content {
		padding-top: 20rpx;
		line-height: 45rpx;
		.txt {
			font-size: 24rpx;
    	color: #999;
		}
	}
</style>
