<script setup lang="ts">
const { t } = useI18n();
const emit = defineEmits(['applyScore'])
const sliderValue = ref(1)
const sliderList = ref([ '3+', '3.5+', '4+', '4.5+', '5' ])
const scoreList = [
    '3-3.5',
    '3.5-4',
    '4-4.5',
    '4.5-5',
    '5-10',
]
function handleClickApply() {
  emit('applyScore', scoreList[sliderValue.value])
  show.value = false
}
function handleClickReset() {
  sliderValue.value = 1
  emit('applyScore', null)
  show.value = false
}

const show = ref(false)
function onOpen() {
  show.value = true
}
function handleClose() {
  show.value = false
}
defineExpose({
  onOpen
})
</script>

<template>
  <wd-popup v-model="show" position="bottom" @close="handleClose" safe-area-inset-bottom>
    <view class="bg-white px-30rpx pt-50rpx pb-60rpx">
      <view class="text-center text-40rpx lh-40rpx text-#333 font-bold">{{ t('components.filtrate-tool.score') }}</view>
      <view class="mt-56rpx text-36rpx lh-36rpx text-#333 font-500">{{ t('components.filtrate-tool.over') }} {{ sliderList[sliderValue] }}</view>
      <view class="flex-center-sb mt-52rpx mb-30rpx">
        <template v-for="item in sliderList">
          <text class="text-30rpx lh-30rpx text-#333 font-500">{{ item }}</text>
        </template>
      </view>
      <wd-slider v-model="sliderValue" :min="0" :max="4" :step="1" hide-min-max hide-label active-color="#F6F6F6" inactive-color="#333" />

      <view class="mt-62rpx">
        <wd-button custom-class="!h-108rpx !bg-14181B !text-36rpx !lh-108rpx !text-#fff !rounded-16rpx" block
                   @click="handleClickApply">
                   {{ t('common.apply') }}
        </wd-button>
        <view @click="handleClickReset" class="text-center  mt-52rpx text-36rpx lh-36rpx text-#333 font-500">{{ t('common.reset') }}</view>
      </view>
    </view>
  </wd-popup>
</template>

<style scoped lang="scss">

</style>