<template>
  <view class="flex items-center pt-[14rpx] pb-[20rpx] justify-center">
    <view
      class="w-[84rpx] h-[36rpx] rounded-full border-[#187CFF] border-solid border-[2rpx] flex items-center px-[18rpx] py-[10rpx] text-[#1580FF] text-[26rpx] bg-[rgba(21,128,255,0.1)]"
    >
      <input
        v-model="currentLeftValue"
        class="leading-[1] h-auto! min-h-auto! text-right!"
        type="number"
        @blur="handleNumberChange"
      />
      分
    </view>
    <view class="mx-[20rpx] flex-1 h-[20rpx]">
      <image
        src="https://api-static-zhiy.oss-cn-shanghai.aliyuncs.com/images/qujian.png"
        mode="scaleToFill"
        class="h-[20rpx]"
      />
    </view>
    <view
      class="w-[84rpx] h-[36rpx] rounded-full border-[#187CFF] border-solid border-[2rpx] flex items-center px-[18rpx] py-[10rpx] text-[#1580FF] text-[26rpx] bg-[rgba(21,128,255,0.1)]"
    >
      <input
        v-model="currentRightValue"
        class="leading-[1] h-auto! min-h-auto! text-right"
        type="number"
        @blur="handleNumberChange"
      />
      分
    </view>

    <view
      class="w-[120rpx] h-[56rpx] bg-[#1580FF] rounded-full text-[#fff] flex items-center justify-center text-[26rpx] font-500 ml-[20rpx]"
      @click.stop="handleRightThumbTouchEnd"
    >
      查询
    </view>
  </view>
</template>

<script lang="ts" setup>
const props = defineProps({
  modelValue: {
    type: Array<number>,
    default: () => [0, 0],
  },
  min: {
    type: Number,
    default: 0,
  },
  max: {
    type: Number,
    default: 200,
  },
})

// 当前值
const currentLeftValue = ref(0)
const currentRightValue = ref(0)

watch(
  () => props.modelValue,
  () => {
    currentLeftValue.value = props.modelValue.length > 0 ? props.modelValue[0] : props.min
    currentRightValue.value =
      props.modelValue.length > 0 ? props.modelValue[1] : props.modelValue[0]
  },
  { deep: true },
)

const emits = defineEmits(['update:modelValue', 'change'])

const handleNumberChange = () => {
  let changeValue = [currentLeftValue.value, currentRightValue.value].map((item) => Number(item))
  if (currentLeftValue.value > currentRightValue.value) {
    changeValue = changeValue.reverse()
    currentLeftValue.value = changeValue[0]
    currentRightValue.value = changeValue[1]
  }

  // 添加最小值和最大值的判断
  const leftValue = Number(currentLeftValue.value)
  const rightValue = Number(currentRightValue.value)

  if (leftValue < props.min) {
    currentLeftValue.value = props.min
  }
  if (rightValue > props.max) {
    currentRightValue.value = props.max
  }

  emitValueChange()
}

const handleRightThumbTouchEnd = () => {
  const changeValue = [currentLeftValue.value, currentRightValue.value]
  emits('change', changeValue)
}

// 发送值变化事件
const emitValueChange = () => {
  emits(
    'update:modelValue',
    [currentLeftValue.value, currentRightValue.value].map((item) => Number(item)),
  )
}
</script>

<style lang="scss" scoped></style>
