<!--单行输入组件-->

<template>
    <div class="t2">
        <!--表单提示-->
        <div v-if="item.tip" class="form-tip t3 c3 ">{{ item.tip }}</div>
        <div class="form-item clearfix">
            <label class="form-label">
                <span>{{ item.field_name }}</span>
                <span v-if="item.required" class="required-color">*</span>
            </label>
            <div class="form-input-warp">
                <input
                    v-model.trim="item.value"
                    :id="'key_value_' + key_value"
                    ref="inputItem"
                    :name="item.field_name"
                    class="form-input t2"
                    :class="{'has-limit': maxLength > 0}"
                    type="text"
                    :placeholder="item.placeholder"
                    @focus="focusEvent"
                    @input="onInput"
                />
                <span class="tip-limit" v-if="maxLength > 0">
                    {{`${item.value.length || 0}/${maxLength}`}}
                </span>
            </div>
            <!-- <div class="vtf-tip t2" @click="clearTip">{{ tipTxt }}</div> -->
        </div>
    </div>
</template>

<script>
import { validateForBlur } from '~publicAsset/libs/validation'; // 表单验证
import * as Utils from '../utils.js';

export default {
    props: {
        item: {
            type: Object,
            required: true
        },
        key_value: {
            type: Number,
            required: true
        },
        maxLength: {
            type: Number,
            default: 0
        }
    },
    data: function() {
        return {};
    },
    created: function() {},
    mounted: function() {},
    methods: {
        // 聚焦事件
        focusEvent () {
            if (wx.CLIENT_SYSTEM === 'IOS') {
                Utils.fixedIOS12.onfocus();
            }
        },
        onInput () {
            if (this.item.value) {
                this.item.value = this.item.value.substring(0, 30);
            }
        }
    }
};
</script>

<style scoped>
.form-input-warp {
    position: relative;
}

.form-input {
    width: 100%;
    height: 0.88rem;
    padding: 0.24rem;
    box-sizing: border-box;
    border-radius: 0.08rem;
    border: 1px solid #dcdcdc;
    outline: none;
}
.has-limit {
    padding-right: 50px;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder
{
    color: #c8c8c8;
}

input:-moz-placeholder,
textarea:-moz-placeholder
{
    color: #c8c8c8;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #c8c8c8;
}

.tip-limit {
    position: absolute;
    color: #dcdcdc;
    top: 50%;
    transform: translateY(-50%);
    right: 8px;
}
</style>
