<route lang="json">
{
  "layout": "tabbar",
  "style": {
    "navigationBarTitleText": "消息",
    "navigationBarBackgroundColor": "#fff"
  }
}
</route>

<script setup lang="ts">
import PageHelper from '@/components/page-helper.vue'
import {
  deleteMessage,
  getMessages,
  getPointsCoupons,
  orderPointsCancel,
  orderPointsSubmit,
  updateMessage,
} from '../../core/libs/requests'
import dayjs from 'dayjs'
import { MessageType } from '../../core/libs/enums'
import { ComponentExposed } from 'vue-component-type-helpers'
import { Coupon, Message } from '../../core/libs/models'
import { requestToast } from '../../core/utils/common'
import { useUserStore } from '../../store'
import { storeToRefs } from 'pinia'
import MessageCard from './components/message-card.vue'
import CouponCard from '../common/components/coupon-card.vue'
import { select } from 'radash'

const pageHelperRef = ref<ComponentExposed<typeof PageHelper>>()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const show = ref(false)
const tab = ref(0)
const tabs = ref([
  { label: '积分消息', value: MessageType.Integral },
  { label: '系统消息', value: MessageType.System },
  { label: '互动消息', value: MessageType.Interact },
])
const selectedCoupon = ref()
const coupons = ref<Coupon[]>([])
const query = computed(() => ({ messageType: tabs.value[tab.value]?.value }))

const handleCancel = async (message: Message) => {
  await requestToast(
    () => orderPointsCancel({ id: message.businessId.toString(), cancelReason: '用户取消' }),
    { success: true, successTitle: '积分确认已驳回' },
  )
  // await deleteMessage(message.id.toString())
  await updateMessage({ id: message.id, isRead: '1' })
  await pageHelperRef.value?.refresh()
}
const handleSubmit = async (message: Message) => {
  await requestToast(
    () =>
      orderPointsSubmit({
        id: message.businessId,
        userId: message.designerId,
        couponUserId: selectedCoupon.value?.id,
      }),
    {
      success: true,
      successTitle: '积分已确认',
    },
  )
  // await deleteMessage(message.id.toString())
  await updateMessage({ id: message.id, isRead: '1' })
  await pageHelperRef.value?.refresh()
  selectedCoupon.value = undefined
}
const handleQ = async (res) => {
  // const { data } = await getPointsCoupons({
  //   userId: message.designerId,
  //   businessId: message.businessId,
  // })
  // console.log(data)
  coupons.value = res
  show.value = true
}
const handleSelect = (coupon: Coupon) => {
  selectedCoupon.value = coupon
  show.value = false
}
onShow(async () => {
  nextTick(() => {
    pageHelperRef.value?.refresh()
  })
})
</script>

<template>
  <view class="flex-grow flex flex-col">
    <wd-tabs v-model="tab">
      <block v-for="({ label }, i) in tabs" :key="i">
        <wd-tab :title="`${label}`"></wd-tab>
      </block>
    </wd-tabs>
    <PageHelper
      ref="pageHelperRef"
      :automatic="false"
      :request="getMessages"
      :query="query"
      class="flex-grow flex flex-col"
    >
      <template #default="{ source }">
        <div class="p-3.5 gap-3.5 flex flex-col">
          <template v-for="(it, i) in source.list" :key="i">
            <MessageCard
              :options="it"
              @submit="handleSubmit"
              @cancel="handleCancel"
              @select-coupon="handleQ"
            ></MessageCard>
          </template>
        </div>
      </template>
    </PageHelper>
    <wd-action-sheet title="优惠券" v-model="show">
      <view class="">
        <wd-tabs>
          <wd-tab title="可用优惠券"></wd-tab>
          <wd-tab title="不可用优惠券"></wd-tab>
        </wd-tabs>
        <div class="bg-[#f6f6f6] py-3.5 flex flex-col gap-4">
          <template v-for="(it, i) in coupons" :key="i">
            <CouponCard
              :options="it"
              can-select
              :selected="selectedCoupon?.id === it.id"
              @select="handleSelect"
            ></CouponCard>
          </template>
        </div>
        <!-- <wd-button block :round="false">确认</wd-button> -->
      </view>
    </wd-action-sheet>
  </view>
</template>

<style scoped lang="scss"></style>
