<!--手机输入组件-->

<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>
            <input
                v-model.trim="item.value"
                :id="'key_value_' + key_value"
                ref="inputItem"
                :name="item.field_name"
                class="form-input t2"
                type="tel"
                :placeholder="item.placeholder"
                @focus="focusEvent"
                @input="inputEvent"
            />
            <!-- <div class="vtf-tip t2" @click="clearTip">{{ tipTxt }}</div> -->
        </div>
        <idf_code
            v-show="item.type == 1 && item.need_confirm == 'noType'"
            :item="item"
            :get_phone="getPhone"
            :class="{ hideBox: isHideBox }"
        ></idf_code>
    </div>
</template>

<script>
import EventBus from '~publicAsset/libs/eventbus';
import { validateForBlur } from '~publicAsset/libs/validation'; // 表单验证
import idf_code from './idfCode.vue'; // 手机验证码
import * as Utils from '../utils.js';

export default {
    props: {
        item: {
            type: Object,
            required: true
        },
        key_value: {
            type: Number,
            required: true
        }
    },
    data () {
        return {
            isHideBox: false
        };
    },
    components: {
        idf_code
    },
    mounted () {
    },
    methods: {
        // 发送验证码时获取当前手机号
        getPhone () {
            return this.item.value;
        },
        // 聚焦事件
        focusEvent () {
            Utils.fixedIOS12.onfocus();
        },
        // input实时输入事件
        inputEvent () {
            
        }
    }
};
</script>

<style scoped>
.form-input {
    width: 100%;
    height: 0.88rem;
    padding: 0.24rem;
    box-sizing: border-box;
    border-radius: 0.08rem;
    border: 1px solid #dcdcdc;
    outline: none;
}
.hideBox {
    display: none;
    /* position: absolute;
      top: -100%;
      z-index: -111111111;
      opacity: 0; */
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder
{
    color: #c8c8c8;
}
</style>
