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

<script setup lang="ts">
import Card from '@/components/card.vue'
import PageHelper from '@/components/page-helper.vue'
import {
  deleteMessage,
  getMessages,
  orderPointsCancel,
  orderPointsSubmit,
  updateMessage,
} from '../../core/libs/requests'
import { integral, interact, system } from '../../core/libs/svgs'
import { beforeNow } from '../../utils/date-util'
import dayjs from 'dayjs'
import { MessageType } from '../../core/libs/enums'
import { group } from 'radash'
import { ComponentExposed } from 'vue-component-type-helpers'
import { Message } from '../../core/libs/models'
import { requestToast } from '../../core/utils/common'

const pageHelperRef = ref<ComponentExposed<typeof PageHelper>>()
const tab = ref(0)
const tabs = ref([
  { label: '积分消息', value: MessageType.Integral },
  { label: '系统消息', value: MessageType.System },
  { label: '互动消息', value: MessageType.Interact },
])
onShow(async () => {
  nextTick(() => {
    pageHelperRef.value?.refresh()
  })
})
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.toString() }), {
    success: true,
    successTitle: '积分已确认',
  })
  // await deleteMessage(message.id.toString())
  await updateMessage({ id: message.id, isRead: '1' })
  await 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="{ messageType: tabs[tab]?.value.toString() }"
      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">
            <Card>
              <div class="grid items-center grid-cols-[38px_auto_100px]">
                <div class="row-start-1 col-start-1">
                  <div
                    class="w-[30px] h-[30px] bg-neutral-100 rounded-full mr-2 flex items-center justify-center"
                  >
                    <wd-img
                      width="18"
                      height="18"
                      :src="[integral, system, interact][tab]"
                    ></wd-img>
                  </div>
                </div>
                <div class="row-start-1 col-start-2 text-start">
                  <div
                    class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-[30px]"
                  >
                    {{ it.title }}
                  </div>
                </div>
                <div class="row-start-1 col-start-3 text-end">
                  <div
                    class="text-black/30 text-sm font-normal font-['PingFang_SC'] leading-[10.18px]"
                  >
                    {{ beforeNow(dayjs(it.createTime).toDate()) }}
                  </div>
                </div>
                <div class="row-start-2 col-start-2 col-end-4">
                  <div
                    class="my-3 text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[25px]"
                  >
                    <div
                      v-if="it.messageType === MessageType.Integral.toString()"
                      v-html="it.detailBody"
                    ></div>
                    <!-- {{ it.detailBody }} -->
                  </div>
                </div>
                <div v-if="it.img" class="row-start-3 col-start-2 col-end-4">
                  <img class="w-[279px] h-[164px] rounded-md" :src="it.img" />
                </div>
                <div class="row-start-4 col-start-1 col-end-4 my-2">
                  <div v-if="!it.img" class="bg-[#dadada] w-full h-[1px]"></div>
                </div>
                <div class="row-start-5 col-start-2 col-end-4">
                  <div
                    class="text-black/90 text-xs font-normal font-['PingFang_SC'] leading-[25px] my-2.5"
                  >
                    <template
                      v-if="
                        [MessageType.Integral].includes(Number(it.messageType)) && it.isRead !== '1'
                      "
                    >
                      <span class="text-black/40">
                        确认积分后，即刻到账，如有问题请驳回，联系材料商修改积分后再次确认
                      </span>
                    </template>
                    <template
                      v-else-if="
                        [MessageType.Integral].includes(Number(it.messageType)) && it.isRead === '1'
                      "
                    >
                      <span class="text-black/40">
                        <!-- 确认积分后，即刻到账，如有问题请驳回，联系材料商修改积分后再次确认 -->
                      </span>
                    </template>
                    <template v-else>查看详情</template>
                  </div>
                </div>
                <div
                  class="row-start-6 col-start-1 col-end-4 my-1"
                  v-if="
                    [MessageType.Integral].includes(Number(it.messageType)) &&
                    it.messageSubType === '31' &&
                    it.isRead !== '1'
                  "
                >
                  <div class="flex gap-4">
                    <div class="flex-1">
                      <wd-button block :round="false" plain @click="handleCancel(it)">
                        驳回
                      </wd-button>
                    </div>
                    <div class="flex-1">
                      <wd-button block :round="false" @click="handleSubmit(it)">确认</wd-button>
                    </div>
                  </div>
                </div>
              </div>
            </Card>
          </template>
        </div>
      </template>
    </PageHelper>
  </view>
</template>

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