<script setup lang="ts">
const { t } = useI18n();
import {useConfigStore} from "@/store";
const configStore = useConfigStore();
const show = ref(false);
const emit = defineEmits(['apply']);

const sortOptions = [
  {
    label: t('components.searchSort.time'),
    value: 1
  },
  {
    label: t('components.searchSort.comment'),
    value: 2
  },
  {
    label: t('components.searchSort.thumbsUp'),
    value: 3
  },
  {
    label: t('components.searchSort.view'),
    value: 4
  }
];
const currentSort = ref(sortOptions[0].value);
function handleClick(item: typeof sortOptions[0]) {
  // show.value = false;
  currentSort.value = item.value;
}

function handleClickApply() {
  emit('apply', currentSort.value);
  show.value = false;
}

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

<template>
  <wd-popup
      v-model="show"
      position="bottom"
      @close="handleClose"
  >
    <view class="pl-30rpx pt-50rpx">
      <view class="text-40rpx lh-40rpx text-#333 font-bold text-center mb-20rpx">{{ t('components.searchSort.title') }}</view>
      <template v-for="(item, index) in sortOptions">
         <view @click="handleClick(item)" class="flex items-center h-114rpx">
           <view class="w-48rpx h-48rpx shrink-0 mr-28rpx">
             <image
                 :src="
                  item.value === currentSort
                  ? '/static/images/chef/133.png'
                   : '/static/images/chef/134.png'
                  "
                 class="w-48rpx h-48rpx"
                 mode="aspectFit"
             />
           </view>
           <view :class="[index === sortOptions.length - 1 ? '' : '']" class="flex-1 text-36rpx lh-36rpx text-#333 font-500 h-114rpx flex items-center">{{ item.label }}</view>
         </view>
      </template>
    </view>
    <view class="mt-38rpx px-30rpx pb-60rpx">
      <wd-button @click="handleClickApply" custom-class="!h-108rpx !bg-14181B !text-36rpx !lh-108rpx !text-#fff !rounded-16rpx" block>
        {{ t('common.apply') }}
      </wd-button>
      <view @click="handleClose" class="text-center  mt-52rpx text-36rpx lh-36rpx text-#333 font-500">{{ t('common.close') }}</view>
      <view :style="[configStore.iosSafeBottomPlaceholder]"></view>
    </view>
  </wd-popup>
</template>

<style scoped lang="scss">

</style>