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

const { t } = useI18n();
import { throttle } from "throttle-debounce";
import Config from "@/config";
import {dayjs} from "@/plugin";

function getList(pageNum: number, pageSize: number) {
  return new Promise(resolve => {
    appCouponUserCouponListPost({
      params: {
        pageNum,
        pageSize,
      }
    }).then(res => {
      resolve(res)
    })
  })
}

const {paging, loading, firstLoaded, dataList, queryList} = usePage(getList)


const keyword = ref<string>("");
// 输入框是否聚焦
const isSearch = ref<boolean>(false);
// 是否禁用兑换按钮
const isDisabled = computed(() => {
  return !keyword.value;
});

function handleClearSearch() {
  isSearch.value = false;
}
function search(event: any) {
  if (!event.value) {
    isSearch.value = false;
  } else {
  }
}
const handleSearch = throttle(Config.throttleShortTime, search, {
  noLeading: true,
  noTrailing: false,
});

// 兑换
function handleSubmit() {
  console.log("兑换");
  appCouponExchangeCouponPost({
    body: {
      couponCode: keyword.value,
    }
  }).then(res=> {
    paging.value?.refresh()
    uni.showToast({
      title: t('toast.redemptionSuccessful'),
      icon: 'none'
    })
  })
}
</script>
<template>
  <z-paging
    ref="paging"
    :default-page-size="10"
    v-model="dataList"
    @query="queryList"
    bg-color="#fff"
  >
    <template #top>
      <navbar />
      <view class="px-30rpx pb-42rpx">
        <view class="text-46rpx text-#333 font-bold lh-46rpx mb-36rpx mt-10rpx">
          {{ t("pages-user.coupon.title") }}</view
        >
        <view
          class="flex items-center h-88rpx px-30rpx bg-#F2F3F6 rounded-88rpx box-border"
        >
          <image
            class="w-28rpx h-28rpx shrink-0"
            src="@img/chef/105.png"
          ></image>
          <wd-input
            no-border
            focus-when-clear
            type="text"
            v-model="keyword"
            :maxlength="120"
            :placeholder="t('pages-user.coupon.search-placeholder')"
            placeholderStyle="font-size: 30rpx;line-height: 42rpx;color: #4A4A4A;"
            custom-class="flex-1 ml-16rpx !bg-transparent"
            @clear="handleClearSearch"
            @input="handleSearch"
            @focus="isSearch = true"
            @blur="isSearch = false"
          />
        </view>
      </view>
    </template>

    <view class="px-30rpx my-38rpx" v-if="isSearch">
      <wd-button
        block
        custom-class="!h-108rpx !text-36rpx !rounded-16rpx"
        :disabled="isDisabled"
        @click="handleSubmit"
      >
        {{ t("pages-user.coupon.redeem-now") }}
      </wd-button>
    </view>

    <template v-for="item in dataList" :key="item.id">
      <view class="coupon-item h-328rpx mx-36rpx flex flex-col mb-30rpx last:mb-0">
        <view class="flex-1 pt-40rpx px-58rpx">
            <view class="line-clamp-1 text-34rpx lh-34rpx text-#333 font-bold">
              {{ item.snapshotNameZh }}
            </view>
            <view class="text-24rpx lh-32rpx text-#999 my-18rpx">
              {{ item.snapshotMerchantId ? t('pages-user.coupon.merchant-specific') : t('pages-user.coupon.all-merchants') }}
            </view>
            <view class="text-24rpx lh-32rpx text-#999 my-18rpx">
              {{ t('pages-user.coupon.expiry-date') }}{{ dayjs(Number(item.snapshotValidEnd))
                .format('MM:DD HH:mm:ss') }}
            </view>
            <view class="text-28rpx lh-28rpx text-#333 flex items-center">
                <image
                  class="w-36rpx h-36rpx shrink-0 mr-10rpx"
                  src="@img/chef/106.png"
                ></image>
              <template v-if="item.snapshotType === 2">
<!--                满减-->
                {{ item.snapshotDiscount }}
              </template>
              <template v-else>
                {{ Number(item.snapshotDiscount * 100).toFixed(0) }}%
              </template>

              {{ t('pages-store.store.discount') }}
            </view>
        </view>
        <view class="h-84rpx lh-84rpx text-center text-28rpx text-#fff">
            {{ t('common.confirm') }}
        </view>
      </view>
    </template>

<!--    <view-->
<!--      v-if="dataList.length === 0 && !isSearch"-->
<!--      class="flex flex-col items-center mt-88rpx"-->
<!--    >-->
<!--      <image class="w-552rpx h-552rpx" src="@img/chef/104.png"></image>-->
<!--      <text class="text-28rpx text-#9E9E9E mt&#45;&#45;100rpx"-->
<!--        >{{ t('pages-user.coupon.no-coupons') }}</text-->
<!--      >-->
<!--    </view>-->
  </z-paging>
</template>
<style scoped lang="scss">
.coupon-item {
    background-image: url('@img/chef/103.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}
</style>
