<template>
    <view 
        class="invoice-input-box"
        :style="{
            marginLeft,
        }"
    >
        <view class="invoice-input__title c-font-normal c-gap-right">
            <text v-if="input.required" class="invoice-input__require">*</text>
            <text>{{ input.text }}</text>
        </view>
        <input
            :type="input.inputType || 'text'"
            :value="value"
            :name="input.name"
            :maxlength="input.maxLength || 50"
            :placeholder="input.placeholder"
            :cursor-spacing="isIphoneX ? 44 : 10"
            placeholder-class="invoice-input__placeholder c-color-gray c-line-clamp1"
            autocomplete="off"
            class="invoice-input__input c-font-normal c-color-normal c-gap-inner-top c-gap-inner-bottom"
            @input="onFormInput($event, input)"
            @focus="onFormFocus($event, input, true)"
            @blur="onFormFocus($event, input, false)"
        >
    </view>
</template>

<script>
/**
 * @author mayifan02
 * @file 核酸发票输入框
 * @categories 组件
 * @tags [component]
 */
import {getSystemInfo} from '@baidu/med-utils/lib/Mars/system';
export default {
    config: {
        component: true
    },
    components: {
    },
    props: {
        /**
         * 输入框对象
         */
        input: {
            type: Object,
            default: () => {
                return {};
            }
        },
        /**
         * 默认值
         */
        value: {
            type: String,
            default: ''
        },
        /**
         * marginLeft
         */
        marginLeft: {
            type: String,
            default: '13px'
        },
    },
    data() {
        return {
            isIphoneX: false
        };
    },
    created(){
        const systemInfo = getSystemInfo();
        if (systemInfo.model.search('iPhone X') !== -1 || systemInfo.model.search('iPhone 11') !== -1) {
            this.isIphoneX = true;
        }
    },
    methods: {
        onFormInput(e, inputItem) {
            const value = e.detail.value;
            /** onFormInput */
            this.$emit('onFormInput', inputItem.name, value);
        },
        onFormFocus(e, inputItem, flag) {
            const value = e.detail.value;
            // 获得焦点
            if (flag) {
                /** onFormInput */
                this.$emit('onFormInputFocus', inputItem.name, value);
            }
        }
    }
};
</script>
<style lang="less" scoped>
.invoice-input {
    &-box {
        position: relative;
        height: 43px;
        display: flex;
        align-items: center;
        margin-left: 13px;
        &::after{
            content: '';
            position: absolute;
            background-color: #e0e0e0;
            display: block;
            width: 100%;
            height: 1px; /*no*/
            transform: scale(1, 0.5);
            bottom: 0;
            left: 0;
        }
    }
    &__title {
        flex-shrink: 0;
    }
    &__require {
        color: #FC6D5F;
    }
    &__input {
        text-align: right;
        outline-offset: none;
        outline: none;
        color: #555;
        &::placeholder {
            color: #999;
        }
    }
}
</style>
