<!--
 * @Author: micky
 * @Date: 2024-08-11 15:49:27
 * @LastEditors: micky
 * @LastEditTime: 2024-10-08 10:13:13
 * @FilePath: \chargingpile-uniapp\src\components\design-textarea-field.vue
-->
<template>
    <view class="design-field">
        <text
            class="field"
            v-if="label !== ''"
            :class="{ 'field-required': required }"
            :style="labelStyle"
        >
            {{ label }}
        </text>
        <u-textarea
            class="textarea"
            v-model="innerValue"
            :placeholder="placeholder"
            :border="border"
            :autoHeight="autoHeight"
            placeholderStyle="color: '#7c7e82'"
        ></u-textarea>
        <!-- <u-textarea
            v-model="innerValue"
            :placeholder="placeholder"
            :maxlength="maxlength"
            :count="count"
            :disabled="disabled"
            :autoHeight="autoHeight"
            border="none"
            placeholderStyle="color: '#7c7e82'"
        ></u-textarea> -->
    </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: '请输入'
    },
    maxlength: {
        type: Number,
        default: 255
    },
    count: {
        type: Boolean,
        default: true
    },
    required: {
        type: Boolean,
        default: true
    },
    disabled: {
        type: Boolean,
        default: false
    },
    remarkStyle: {
        type: Object,
        default: () => {}
    },
    autoHeight: {
        type: Boolean,
        default: false
    },
    labelWidth: {
        type: Number,
        default: 120
    },
    border: {
        type: String,
        default: 'none'
    }
})
const emit = defineEmits(['update:modelValue'])

const innerValue = ref('')
const labelStyle = computed(() => {
    const { labelWidth } = props
    return {
        width: `${labelWidth * 2}rpx`
    }
})

watch(
    () => innerValue.value,
    (newVal: string) => {
        emit('update:modelValue', newVal)
    }
)
watch(
    () => props.modelValue,
    val => {
        innerValue.value = val
    },
    { 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,
    .textarea {
        flex: 1;
    }
}
</style>
