<script setup lang="ts">
import {appFiltersConfigGetFiltersGet} from "@/service";

const { t } = useI18n();
const emit = defineEmits(['applyPrice'])

const priceValue = ref<number[]>([])
const priceList = ref([ '$', '$$', '$$$', '$$$$' ])
function handleClickApply() {
  if (priceValue.value.length === 0) {
    emit('applyPrice', [])
    handleClose()
    return
  } else {
    // 获取选中的价格条件数组
    const selectedConditions = priceValue.value.map(index => 
      priceData.value[index]?.filterCondition || ''
    ).filter(condition => condition !== '')
    emit('applyPrice', selectedConditions)
    handleClose()
  }
}

function changePrice(index: number) {
  const currentIndex = priceValue.value.indexOf(index)
  if (currentIndex > -1) {
    // 如果已选中，则取消选中
    priceValue.value.splice(currentIndex, 1)
  } else {
    // 如果未选中，则添加到选中列表
    priceValue.value.push(index)
  }
}
function handleClickReset() {
  priceValue.value = []
  emit('applyPrice', [])
  handleClose()
}

const show = ref(false)
function onOpen() {
  show.value = true
  // 获取筛选条件的值
  getPriceValue()
}

const priceData = ref([])
function getPriceValue() {
  appFiltersConfigGetFiltersGet({}).then((res: any) => {
    console.log('res', res)
    if(res.data && res.data.price.length > 0) {
      priceData.value = res.data.price
    }
    console.log('res', priceData.value)
  })
}

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.price') }}</view>
      <view class="flex-center-sb gap-18rpx mt-56rpx">
        <template v-for="(item, index) in priceList">
          <view @click="changePrice(index)" :class="[priceValue.includes(index) ? 'bg-#14181B text-#fff' : 'bg-#F2F2F2 text-#333']" class="flex-1 text-center text-30rpx h-76rpx rounded-38rpx lh-76rpx font-500 ">{{ item }}</view>
        </template>
      </view>
      <view class="mt-88rpx">
        <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>