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

const show = ref(false);

const sortOptions = [
  {
    label: t('pages-store.store.cancelOrder.informationError'),
    value: 'time'
  },
  {
    label: t('pages-store.store.cancelOrder.forgotCoupon'),
    value: 'browse'
  },
  {
    label: t('pages-store.store.cancelOrder.wrongLess'),
    value: 'thumbsUp'
  },
  {
    label: t('pages-store.store.cancelOrder.dontWant'),
    value: 'comment'
  }
];
const currentSort = ref(0);
function handleClick(index: number) {
  // show.value = false;
  currentSort.value = index;
}

function confirmCancel() {
  console.log('取消订单', sortOptions[currentSort.value].label)
  emit('confirm', sortOptions[currentSort.value].label);
}

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-48rpx relative">
      <image
          @click="handleClose"
          src="@img/chef/100404.png"
          class="w-28rpx h-28rpx absolute top-30rpx right-30rpx"
          mode="aspectFit"
      />
      <view class="text-36rpx lh-36rpx text-#333 font-bold text-center mb-68rpx">{{ t('common.cancel') }}</view>
      <template v-for="(item, index) in sortOptions">
        <view @click="handleClick(index)" class="flex items-center mb-42rpx last:mb-0">
          <view class="w-48rpx h-48rpx shrink-0 mr-20rpx">
            <image
                :src="
                  index === currentSort
                  ? '/static/images/chef/152.png'
                   : '/static/images/chef/134.png'
                  "
                class="w-40rpx h-40rpx"
                mode="aspectFit"
            />
          </view>
          <view class="flex-1 text-30rpx lh-30rpx text-#333 flex items-center">{{ item.label }}</view>
        </view>
      </template>
    </view>
    <view class="mt-72rpx px-30rpx pb-64rpx">
      <wd-button @click="confirmCancel" custom-class="!h-108rpx !text-36rpx !lh-108rpx !text-#fff !rounded-16rpx" block>
        {{ t('common.submit') }}
      </wd-button>
      <view :style="[configStore.iosSafeBottomPlaceholder]"></view>
    </view>
  </wd-popup>
</template>

<style scoped lang="scss">

</style>