<route lang="json">
{ "style": { "navigationBarTitleText": "订单详情", "navigationBarBackgroundColor": "#fff" } }
</route>
<script setup lang="ts">
import SectionHeading from '@/components/section-heading.vue'
import { cancelOrder, getPointsOrder } from '../../../../core/libs/requests'
import BottomAppBar from '@/components/bottom-app-bar.vue'
import dayjs from 'dayjs'
import { requestToast } from '../../../../core/utils/common'
import { useMessage } from 'wot-design-uni'
import { right } from '@/core/libs/svgs'
import CouponRecord from '@/pages/common/components/coupon-record.vue'

const { confirm } = useMessage()
const id = ref()
const status = ref({ '0': '已报名', '1': '已完成', '2': '未核销', '3': '已取消', '4': '待交付' })
const payTypes = ref({ '0': '积分支付', '1': '现金支付' })
const { data, run: setData } = useRequest(() => getPointsOrder(id.value), {})
const handleSubmit = async () => {
  await confirm({
    title: '是否确认取消订单？',
    beforeConfirm: async ({ resolve }) => {
      const { code } = await requestToast(() => cancelOrder(id.value), {
        success: true,
        successTitle: '取消成功',
      })
      if (code === 0) {
        await setData()
        resolve(true)
      }
    },
  })
}
onLoad((query: { id: string }) => {
  id.value = query.id
  setData()
})
</script>
<template>
  <div class="flex-grow flex flex-col gap-4 px-3.5 bg-white">
    <div class="h-8.5 flex items-center justify-center mx--3.5 box-border bg-[#ffecec]">
      <div
        class="text-right text-[#ef4343] text-sm font-normal font-['PingFang_SC'] leading-normal"
      >
        {{ status[data?.orderStatus] }}
      </div>
    </div>
    <div class="flex gap-4 border-b border-b-solid border-b-[#f2f2f2] pb-5">
      <wd-img
        width="94"
        height="94"
        custom-class="rounded-2xl overflow-hidden"
        :src="data?.orderImgUrl"
      />
      <div class="flex flex-col flex-1">
        <div class="text-black text-base font-normal font-['PingFang_SC'] leading-normal">
          {{ data?.projectName }}
        </div>
        <div
          class="text-start text-black/40 text-sm font-normal font-['PingFang_SC'] leading-normal"
        >
          x{{ data?.orderQuantity }}
        </div>
        <div class="flex-1"></div>
        <div
          class="text-start text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal"
        >
          {{ data?.points }}积分
        </div>
      </div>
      <div>
        <div class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-normal">
          <!-- 已完成 -->
          {{ status[data?.orderStatus] }}
        </div>
      </div>
    </div>
    <SectionHeading
      v-if="data?.orderMoney"
      title="订单金额"
      size="sm"
      :end-text="`¥ ${data?.orderMoney}`"
    ></SectionHeading>
    <SectionHeading title="总积分" size="sm" :end-text="`${data?.points ?? 0}`"></SectionHeading>
    <SectionHeading
      title="优惠券"
      :end-text="`已选${data.couponList?.length || 0}张`"
      end-arrow
      size="sm"
    >
      <template #start>
        <div
          v-if="data.couponList?.length"
          class="px-1 py-.75 rounded border border-solid border-[#ef4343] justify-center items-center gap-2.5 inline-flex"
        >
          <div class="text-[#ef4343] text-[9px] font-normal font-['PingFang_SC'] leading-[10.18px]">
            已选{{ data.couponList?.length }}张
          </div>
        </div>
      </template>
      <template #append>
        <div class="flex items-center gap-1">
          <div class="text-[#ef4343] text-sm font-normal font-['PingFang_SC'] leading-[10.18px]">
            -{{ Number(data.points) - Number(data.orderMoney) }}
          </div>
          <wd-img :src="right" width="12" height="12"></wd-img>
        </div>
      </template>
    </SectionHeading>
    <div v-for="(it, i) in data.couponList" :key="i">
      <CouponRecord :option="{ ...it }"></CouponRecord>
    </div>
    <SectionHeading
      title="实际支付积分"
      size="sm"
      :end-text="`${data?.payPoints ?? 0}`"
    ></SectionHeading>
    <SectionHeading title="订单号" size="sm" :end-text="data?.orderNo"></SectionHeading>
    <SectionHeading
      title="支付时间"
      size="sm"
      :end-text="dayjs(data?.createTime).format('YYYY-MM-DD HH:mm')"
    ></SectionHeading>
    <SectionHeading
      title="支付方式"
      size="sm"
      :end-text="payTypes[String(data?.payType)]"
    ></SectionHeading>
    <template v-if="data?.orderStatus === '3'">
      <SectionHeading
        title="取消时间"
        size="sm"
        :end-text="dayjs(data?.cancelTime).format('YYYY-MM-DD HH:mm')"
      ></SectionHeading>
      <SectionHeading title="返还积分" size="sm" :end-text="`${data?.payPoints}`"></SectionHeading>
      <SectionHeading title="取消人" size="sm" :end-text="data?.cancelUser"></SectionHeading>
    </template>
    <div class="flex-1"></div>
    <BottomAppBar fixed>
      <div>
        <wd-button
          :round="false"
          block
          v-if="['2', '4'].includes(data?.orderStatus)"
          @click="handleSubmit"
        >
          取消订单
        </wd-button>
      </div>
    </BottomAppBar>
  </div>
</template>
