<script setup lang="ts">
import { getPointsCoupons, getProductCoupons } from '../../../core/libs/requests'
import { Coupon } from '../../../core/libs/models'
import { useUserStore } from '../../../store'
import { storeToRefs } from 'pinia'
import CouponCard from './coupon-card.vue'
import { useMessage } from 'wot-design-uni'

const props = withDefaults(
  defineProps<{
    type: 'points' | 'product'
    products?: any[]
    businessId?: number
    show?: boolean
  }>(),
  { show: false },
)
const modelValue = defineModel({ default: () => [], type: Array as PropType<Coupon[]> })
const emits = defineEmits<{ close: []; clickInstruction: [coupon: Coupon] }>()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const { alert } = useMessage()
// const show = ref(false)
const tab = ref(0)
const query = ref<{ userId: number; available?: boolean }>({
  userId: userInfo.value.userId,
  available: true,
})
const request = computed(() =>
  props.type === 'points'
    ? () =>
        getPointsCoupons({
          userId: userInfo.value.userId,
          //   productIds: props.products.map((it) => it.productId).join(','),
          businessId: props.businessId,
          // isUse: 0,
          ...query.value,
        })
    : () =>
        getProductCoupons({
          userId: userInfo.value.userId,
          productIds: props.products.map((it) => it.productId).join(','),
          isUse: 0,
          ...query.value,
        }),
)
const { data: coupons, run: setCoupons } = useRequest(() => request.value(), { initialData: [] })
const handleSelect = (coupon: Coupon) => {
  // if (modelValue.value.map(({ id }) => id).includes(coupon.id)) {
  //   modelValue.value = modelValue.value.filter(({ id }) => id !== coupon.id)
  // } else {
  //   modelValue.value = [...modelValue.value, coupon]
  if (modelValue.value.length) {
    if (modelValue.value.map(({ id }) => id).includes(coupon.id)) {
      modelValue.value = modelValue.value.filter(({ id }) => id !== coupon.id)
    } else {
      modelValue.value.splice(0, 1, coupon)
    }
  } else {
    modelValue.value.push(coupon)
  }
  emits('close')
}
const handleTabsChange = async ({ index, name }) => {
  console.log(index)
  query.value = { ...query.value, available: index === 0 }
  await setCoupons()
}
watch(
  () => props.show,
  async (val) => {
    if (val) {
      await setCoupons()
    }
  },
)
onMounted(async () => {})
</script>
<template>
  <wd-action-sheet
    :title="{ points: '销售积分券', product: '商品优惠券' }[type]"
    :modelValue="show"
    @close="emits('close')"
  >
    <view class="">
      <wd-tabs v-model="tab" @change="handleTabsChange">
        <wd-tab :title="`可用${{ points: '积分券', product: '商品券' }[type]}`"></wd-tab>
        <wd-tab :title="`不可用${{ points: '积分券', product: '商品券' }[type]}`"></wd-tab>
      </wd-tabs>
      <div class="h-100 overflow-y-scroll">
        <div class="bg-[#f6f6f6] py-3.5 flex flex-col gap-4 min-h-full">
          <template v-for="(it, i) in coupons" :key="i">
            <CouponCard
              :options="{ couponType: 2, ...it }"
              :canSelect="tab === 0"
              :selected="modelValue?.map(({ id }) => id).includes(it.id)"
              @select="handleSelect"
              @click-instruction="(e) => emits('clickInstruction', e)"
            ></CouponCard>
          </template>
        </div>
      </div>
      <!-- <wd-button block :round="false">确认</wd-button> -->
    </view>
  </wd-action-sheet>
</template>
