<!--
 * @Author: micky
 * @Date: 2024-08-10 15:24:06
 * @LastEditors: micky
 * @LastEditTime: 2024-10-28 18:00:13
 * @FilePath: \chargingpile-uniapp\src\components\design-input-field.vue
-->
<template>
    <view class="design-field" :style="fieldStyle">
        <text class="field" :class="{ 'field-required': required }" :style="labelStyle">
            {{ label }}
        </text>
        <u-input
            class="input"
            v-model="innerValue"
            :placeholder="placeholder"
            border="none"
            :clearable="clearable"
            @change="onInput"
            @blur="onBlur"
            :inputAlign="inputAlign"
            :readonly="readonly"
            :maxlength="maxlength"
            placeholderStyle="color: '#7c7e82'"
        ></u-input>
    </view>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'

const props = defineProps({
    modelValue: {
        type: String,
        default: ''
    },
    label: {
        type: String,
        default: ''
    },
    placeholder: {
        type: String,
        default: '请输入'
    },
    inputAlign: {
        type: String,
        default: 'right'
    },
    required: {
        type: Boolean,
        default: true
    },
    fieldStyle: {
        type: Object
    },
    readonly: {
        type: Boolean,
        default: false
    },
    maxlength: {
        type: Number,
        default: -1
    },
    clearable: {
        type: Boolean,
        default: true
    },
    labelWidth: {
        type: Number,
        default: 120
    }
})
const emit = defineEmits(['update:modelValue', 'change', 'blur'])
const innerValue = ref('')
const labelStyle = computed(() => {
    const { labelWidth } = props
    return {
        width: `${labelWidth * 2}rpx`
    }
})

const onInput = (value: string) => {
    emit('update:modelValue', value)
    emit('change', value)
}
const onBlur = (value: string) => {
    emit('blur', value)
}

watch(
    () => props.modelValue,
    val => {
        innerValue.value = val
    },
    {
        deep: true,
        immediate: true
    }
)
</script>

<style lang="scss" scoped>
.design-field {
    @include flex-align;
    border-bottom: 1px solid $gray-3;
    padding: 24rpx 32rpx 24rpx 32rpx;
    .field {
        // width: 240rpx;
    }
    .wrapper,
    .input {
        flex: 1;
    }
}
</style>
