<!--
 * @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-switch
            v-model="innerValue"
            :activeValue="1"
            :inactiveValue="0"
            @change="handleSwitchChange"
        ></u-switch>
    </view>
</template>

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

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

const handleSwitchChange = (value: number) => {
    emit('update:modelValue', 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>
