<!--
 * @Author: micky
 * @Date: 2024-08-10 15:24:06
 * @LastEditors: micky
 * @LastEditTime: 2024-08-16 16:49:45
 * @FilePath: \chargingpile-uniapp\src\components\design-select-field.vue
-->
<template>
    <view class="design-field">
        <text class="field" :class="required ? 'field-required' : ''" :style="labelStyle">
            {{ label }}
        </text>
        <view class="wrapper" @click="onClick">
            <u-input
                class="input"
                v-model="innerValue"
                :placeholder="placeholder"
                border="none"
                clearable
                readonly
                :inputAlign="inputAlign"
            >
                <template #suffix>
                    <TIcon name="icon-right" :size="24" color="#7C7E82" />
                </template>
            </u-input>
        </view>
    </view>
</template>

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

const props = defineProps({
    label: {
        type: String,
        default: ''
    },
    placeholder: {
        type: String,
        default: '请选择'
    },
    required: {
        type: Boolean,
        default: true
    },
    inputAlign: {
        type: String,
        default: 'left'
    },
    modelValue: {
        type: String,
        default: ''
    },
    labelWidth: {
        type: Number,
        default: 120
    }
})
const emit = defineEmits(['onClick'])
const innerValue = ref('')
const labelStyle = computed(() => {
    const { labelWidth } = props
    return {
        width: `${labelWidth * 2}rpx`
    }
})

const onClick = () => {
    emit('onClick')
}
watch(
    () => props.modelValue,
    (newVal: string) => {
        innerValue.value = newVal
    }
)
</script>

<style lang="scss" scoped>
.design-field {
    @include flex-align;
    padding: 24rpx 20rpx 24rpx 32rpx;
    border-bottom: 1px solid $gray-3;

    .field {
        // width: 240rpx;
    }
    .wrapper,
    .input {
        flex: 1;
    }
}
</style>
