<template>
    <view class="text-base mt-[30rpx]">
        <text class="mr-2">二维码明显程度</text>
        <text class="text-sm text-[#999]">
            (数值越大二维码越容易扫描)
        </text>
    </view>
    <view class="flex items-center w-full mt-[20rpx] pl-[16rpx]">
        <view class="w-[500rpx]">
            <u-slider
                :active-color="$theme.primaryColor"
                height="14"
                blockWidth="32"
                v-model="newValue"
            />
        </view>
        <input
            class="ml-4 input"
            type="number"
            :min="0"
            :max="1"
            style="width: 100rpx"
            step="0.01"
            v-model="value"
            @blur="limitValue"
        />
    </view>
</template>
<script setup lang="ts">
import {computed, onUnmounted, ref, watch, watchEffect} from 'vue'

const emit = defineEmits<{
    (event: 'update:modelValue', value: string): void
}>()
const props = withDefaults(
    defineProps<{
        modelValue?: any
    }>(),
    {
        modelValue: ''
    }
)
const newValue = ref(45)
const value = computed({
    get: () => {
        return props.modelValue
    },
    set: (val) => {
        emit('update:modelValue', val)
    }
})

watch(
    () => newValue.value,
    (val) => {
        value.value = val / 100
    }
)

const stop = watchEffect(() => {
    const val = props.modelValue
    newValue.value = val * 100
})

onUnmounted(() => { stop() })

const limitValue = (e: any) => {
    if (e.detail.value >= 1) {
        value.value = 1
        newValue.value = 1
    } else if (e.detail.value < 0) {
        value.value = 0
        newValue.value = 0
    } else {
        newValue.value = e.detail.value * 100
    }
}
</script>

<style scoped>
.input {
    padding: 4rpx 20rpx;
    border-radius: 8rpx;
    border: 1px solid #e5e5e5;
}
</style>