<template>
    <el-input
            :value="inputVal"
            :placeholder="pieceObj.key"
            :maxlength="Number(pieceObj.maxlength)"
            :style="{width: pieceObj.maxlength*14+80+'px', paddingBottom: 10+'px'}"
            @change="handleInput"
            @focus="handleFocus"
            v-if="pieceObj.type == 'dyn'">
        <template slot="append">{{inputVal.length}} / {{pieceObj.maxlength}}</template>
    </el-input>
    <span v-else>&nbsp;{{pieceObj.text}}&nbsp;</span>
</template>

<script type="text/javascript">
	import Vue from 'vue'
	import {Input} from 'element-ui'
	Vue.use(Input)
	export default {
		props: {
			pieceObj: {
				type: Object,
				required: true
			},
			index: {
				type: [String, Number],
				required: true
			}
		},
		data() {
			return {inputVal: ''}
		},
		methods: {
			handleInput(val) {
				this.inputVal = val
				this.$emit('handlePieceInput', val, this.index)
			},
			handleFocus(e) {
				this.$emit('handlePieceFocus', this.index)
			}
		},
		watch: {
			pieceObj: {
				handler(obj) {
					if (obj.text.length <= obj.maxlength) {//不超过总长度
						this.inputVal = obj.text
					}
				},
				deep:true//深度watch
			}

		}
	}
</script>

<style type="text/css" scoped>

</style>