<route lang="json">
{ "style": { "navigationBarTitleText": "扫码结果", "navigationBarBackgroundColor": "#fff" } }
</route>
<script setup lang="ts">
import { pointsPay, storeAndPunchIn } from '../../../../core/libs/requests'
import {} from '../../../../core/libs/models'
import { qrCodeString2Object, requestToast } from '../../../../core/utils/common'
import { useUserStore } from '../../../../store'
import { storeToRefs } from 'pinia'
import { useRouter } from '../../../../core/utils/router'
import { QrCodeBusinessType } from '../../../../core/libs/enums'
import { success } from '../../../../core/libs/svgs'
import SectionHeading from '@/components/section-heading.vue'
import BottomAppBar from '@/components/bottom-app-bar.vue'
import { NetImages } from '@/core/libs/net-images'

const router = useRouter()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const msg = ref()
const scanType = ref()
const data = ref<{
  id?: string
  amount?: string
  points?: string
  avatar?: string
  name?: string
  desc?: string
}>()
const isPointsCheckout = computed(() => scanType.value === QrCodeBusinessType.PointsCheckout)
const isInStoreClockIn = computed(() => scanType.value === QrCodeBusinessType.InStoreClockIn)
const handleSubmit = async () => {
  if (isPointsCheckout.value) {
    const { code } = await requestToast(() =>
      pointsPay({
        vendorId: Number(data.value?.id),
        userId: userInfo.value.userId,
        points: Number(data.value?.points),
      }),
    )
    if (code === 0) {
      router.replace(`/pages/common/status/success/index?title=支付成功`)
    }
  }
}
onLoad(async (query: { result: string }) => {
  try {
    const { type, options } = qrCodeString2Object(query.result)
    scanType.value = type
    data.value = options
    console.log(scanType.value)
    console.log(data.value)

    console.log(isInStoreClockIn.value)

    if (isPointsCheckout.value) uni.setNavigationBarTitle({ title: '付款' })
    // if (isInStoreClockIn.value) {
    //   console.log(11111)
    //   nextTick(async () => {
    //     const { code, data } = await requestToast(() =>
    //       storeAndPunchIn({ id: Number(data.value?.id) }),
    //     )
    //     console.log(data, code)
    //   })

    //   // if (code === 0) {
    //   //   data.value
    //   // }
    // }
  } catch (error) {
    msg.value = error.message
  }
})
</script>
<template>
  <div class="flex-grow flex flex-col items-center justify-center bg-white">
    <template v-if="isPointsCheckout">
      <div class="w-full flex items-center box-border py-5.5 px-3.5 gap-2.5">
        <wd-img
          class="rounded-full"
          width="45"
          height="45"
          custom-class="border border-[#f2f2f2] border-solid"
          :src="data?.avatar ? 'https://' + data?.avatar : NetImages.DefaultAvatar"
        />
        <div class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-[10.18px]">
          {{ data?.name }}
        </div>
      </div>
      <div class="flex items-end">
        <div class="text-black/90 text-3xl font-normal font-['PingFang_SC'] leading-none">￥</div>
        <div class="text-black/90 text-[50px] font-medium font-['DIN'] leading-none">
          {{ data?.amount }}
        </div>
      </div>
      <div class="mt-8">
        <div class="text-black/40 text-base font-normal font-['PingFang_SC'] leading-none">
          积分：{{ data?.points }}
        </div>
      </div>
      <div class="flex-1"></div>
      <BottomAppBar fixed safe-area-inset-bottom>
        <div class="w-full">
          <wd-button :round="false" block @click="handleSubmit">确认付款</wd-button>
        </div>
      </BottomAppBar>
    </template>
    <template v-else-if="isInStoreClockIn">
      <div class="w-full box-border px-8.25 flex flex-col items-center gap-7">
        <wd-img width="60" height="60" :src="success" custom-class="mb--4"></wd-img>
        <div class="text-black/90 text-xl font-normal font-['PingFang SC'] leading-none">
          扫描成功
        </div>
        <div
          class="w-[162px] h-[18px] text-center text-black/40 text-base font-normal font-['PingFang SC'] leading-relaxed"
        >
          {{ data?.desc ? data.desc : '恭喜您！到店打卡成功' }}
        </div>
        <div class="w-full mt-19.75" v-if="data?.name">
          <SectionHeading
            size="base"
            title="到店材料商"
            dark
            :end-text="data?.name"
          ></SectionHeading>
        </div>
        <div class="w-full" v-if="data?.points">
          <SectionHeading size="base" title="获得积分" :end-text="data?.points"></SectionHeading>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="text-black/60 text-base font-normal font-['PingFang_SC'] leading-none">
        不支持此二维码/条码
      </div>
      <div class="text-black/60 text-base font-normal font-['PingFang_SC'] leading-none">
        {{ msg }}
      </div>
    </template>
  </div>
</template>
