<template>
    <view class="info-editItem-wrapper" name="info-editItem">
        <view class="info-editItem-star">{{ important ? '*' : '' }}</view>
        <view :class="active ? 'active info-editItem-title' : 'info-editItem-title'">{{ title }}</view>
        <input v-if="!isTextarea && !isNumber" class="info-editItem-input" focus :value="value" type="text" :placeholder="'请输入' + title" onBlur="onBlurInput" />
        <input v-if="isNumber" class="info-editItem-input" :value="value" focus type="text" :placeholder="'请输入' + title" onBlur="onBlurInput" />
        <textarea v-if="isTextarea" class="info-editItem-textarea" :maxlength="500" auto-height :value="value" :placeholder="'请输入' + title" onBlur="onBlurInput" />
    </view>
</template>

<script>
export default {
    data() {
        return {
            active: false
        };
    },
    mixins: [],
    props: {
        important: false,
        value: '',
        title: '',
        infoKey: '',
        // 表单提交时名称字段
        isTextarea: false,
        isNumber: false,
        onMonitoringInput: () => {},
        onBindSelect: () => {}
    },
    didMount() {},
    didUpdate() {},
    didUnmount() {},
    methods: {
        onBlurInput(e) {
            console.log('失去焦点');
            let value = e.detail.value;
            if (this.props.important && !value) {
                console.log(this.props.title + '不得为空');
                this.setData({
                    active: true
                });
            } else {
                this.setData({
                    active: false
                });
            }
            this.props.onMonitoringInput({
                important: this.props.important,
                key: this.props.infoKey,
                value: value
            });
        }
    },
    created: function () {}
};
</script>
<style>
.info-editItem-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20rpx 30rpx;
    background-color: white;
    border-bottom: 1rpx solid #eee;
}
.info-editItem-star {
    color: red;
    font-size: 30rpx;
    font-weight: bold;
    width: 30rpx;
}
.info-editItem-title {
    flex: 1;
    color: gray;
    /* white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; */
    padding: 10rpx 0;
}
.info-editItem-input {
    flex: 3;
    padding: 10rpx 0;
    font-size: 30rpx;
    height: 40rpx;
}
.info-editItem-textarea {
    flex: 3;
    padding: 5px 0 15px 0;
    font-size: 30rpx;
}
.active {
    color: red;
}
</style>
