<template>
	<label :class="{'dx-input-max': max}" class="dx-input">
		<span 
			:class="[labelTextClass]" 
			class="dx-input-label-text"
			v-if="$slots.default"
		>
			<slot></slot>
		</span>
		<input 
			v-model="model" 
			class="dx-input-origin-input" 
			:style="size"  
			:disabled="disabled"   
			:type="originType" 
			:placeholder="inputPlaceholder"   
			@focus="handleFoucs" 
			@blur="handleBlur"
		/>
	</label>
</template>
<script>
	// 用于简单的非父子组件之间的通信
    import emitter from './mixins/emitter.js'
	export default{
		componentName: 'DxInput',
		name: 'DxInput',
		mixins: [emitter],
		props: {
			value: {},
			placeholder: {
				type: String,
				default: ''
			},
			max: Boolean,
			originType: String,
			disabled: {
				type: Boolean,
				default: false
			},
			labelTextClass: String,
			size: Object
		},
		data() {
			return {
				inputPlaceholder: this.placeholder
			}
		},
		computed: {
			model: {
				get() {
					return this.value
				},
				set(val) {
					this.$emit('input', val)
				}

			}
		},
		methods: {
			handleBlur(event) {
				this.inputPlaceholder = this.placeholder
				this.$emit('blur', event)
				this.dispatch('DxFormItem', 'dx-form-blur', [this.value])
			},
			handleFoucs(event) {
				this.inputPlaceholder = ''
				this.$emit('foucs', event)
				this.dispatch('DxFormItem', 'dx-form-focus', [])
			}
		}
	}
</script>
<style>
	/*整体样式*/
	.dx-input{
		color:#1f2d3d;
		font-size:1.2rem;
	}
	/*input框基本样式*/
	.dx-input-label-text{
		margin-right:0.5rem;
		line-height:2.5rem;
	}
	.dx-input-origin-input{
		border:0.1rem solid #b3b3b3;
		background:#fff;
		width:18rem;
		line-height:2.5rem;
	}
	/* 以下设置为输入框最大长度即与父元素宽度一样 */
	.dx-input-max{
		font-size:1.4rem;
	}
	.dx-input-max .dx-input-origin-input{
		width:100%;
		position:relative;
		padding-left:10rem;
		line-height:4rem;
	}
	.dx-input-max .dx-input-label-text{
		position: absolute;
	    width: 9rem;
	    height: 4rem;
	    line-height: 4rem;
	    padding-left: 2rem;
	    z-index:1;
	    border-right:1px solid #b3b3b3;
	}
</style>
