<route lang="json">
{
  "style": {
    "navigationBarTitleText": "订单详情",
    "navigationBarBackgroundColor": "#fff"
  }
}
</route>
<script lang="ts" setup>
import { getPointsOrder } from '../../../../../core/libs/requests'
import dayjs from 'dayjs'
import { ref } from 'vue'
import SectionHeading from '@designer-hub/app/src/components/section-heading.vue'

const collapseValue = ref<string[]>(['item1'])
const id = ref()
const { data, run: setData } = useRequest(() => getPointsOrder(id.value), { initialData: {} })
const status = ref<any>({
  '0': '已报名',
  '1': '已完成',
  '2': '未核销',
  '3': '已取消',
  '4': '待交付',
})
onLoad(async (query: { id: string }) => {
  id.value = query.id
  await setData()
})
</script>

<template>
  <view>
    <div class="bg-white p-[20px]">
      <div class="flex mt-[19px] items-center">
        <div class="w-[86px] h-[86px] bg-[#f6f6f6] rounded-[10px]">
          <wd-img width="100%" height="100%" :src="data?.orderImgUrl"></wd-img>
        </div>
        <div class="ml-[16px]">
          <div class="text-black text-base font-normal font-['PingFang_SC'] leading-normal">
            {{ data?.projectName }}
          </div>
          <div
            class="text-left text-black/30 text-sm font-normal font-['PingFang_SC'] leading-normal"
          >
            数量x{{ data?.orderQuantity }}
          </div>
          <div
            class="text-left text-black/30 text-sm font-normal font-['PingFang_SC'] leading-normal"
          >
            {{ data?.points }}积分
          </div>
        </div>
      </div>
      <div style="height: 1px; background-color: #f2f2f2" class="mt-[16px]"></div>
      <div class="flex mt-[24px] items-center justify-between">
        <div class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal">
          总积分
        </div>
        <div class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-normal">
          {{ data?.points }}积分
        </div>
      </div>
      <!-- <div class="flex mt-[20px] items-center justify-between">
        <div class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal">
          优惠券
        </div>
        <div class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-normal">
          -600积分
        </div>
      </div> -->
      <!-- <div class="bg-[#f8f8f8] rounded-lg flex items-center p-[16px] mt-[12px]">
        <img class="w-[43px] h-[34px]" src="https://via.placeholder.com/43x34" />

        <div class="ml-[20px]">
          <div class="text-black text-sm font-normal font-['PingFang_SC'] leading-normal">
            GELATO咖啡兑换券
          </div>
          <div
            class="text-center text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal mt-[5px]"
          >
            2024/04/01-2024/05/30
          </div>
        </div>
      </div> -->
      <div class="flex mt-[20px] items-center justify-between">
        <div class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal">
          实际支付积分
        </div>
        <div class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-normal">
          {{ data?.payPoints }}积分
        </div>
      </div>
      <div class="flex mt-[20px] items-center justify-between">
        <div class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal">
          订单号
        </div>
        <div class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-normal">
          {{ data?.orderNo }}
        </div>
      </div>
      <div class="flex mt-[20px] items-center justify-between">
        <div class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal">
          支付时间
        </div>
        <div class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-normal">
          {{ dayjs(data?.createTime).format('YYYY-MM-DD HH:mm') }}
        </div>
      </div>
      <div class="flex mt-[20px] items-center justify-between">
        <div class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal">
          支付方式
        </div>
        <div class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-normal">
          积分支付
        </div>
      </div>

      <template v-if="String(data?.orderStatus) === '3'">
        <div class="flex mt-[20px] items-center justify-between">
          <div class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal">
            取消时间
          </div>
          <div class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-normal">
            {{ dayjs(data?.cancelTime).format('YYYY-MM-DD HH:mm') }}
          </div>
        </div>
        <div class="flex mt-[20px] items-center justify-between">
          <div class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal">
            返还积分
          </div>
          <div class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-normal">
            {{ `${data?.payPoints}` }}
          </div>
        </div>
        <div class="flex mt-[20px] items-center justify-between">
          <div class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal">
            取消人
          </div>
          <div class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-normal">
            {{ data?.cancelUser }}
          </div>
        </div>
      </template>
      <div style="height: 1px; background-color: #f2f2f2" class="mt-[16px]"></div>
      <template v-if="['1'].includes(String(data?.orderStatus))">
        <div
          class="text-left text-black text-base font-normal font-['PingFang_SC'] leading-normal mt-[24px]"
        >
          完成记录
        </div>
        <div class="flex mt-[20px] items-center justify-between">
          <div class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal">
            核销时间
          </div>
          <div class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-normal">
            {{ dayjs(data?.verificationTime).format('YYYY-MM-DD HH:mm') }}
          </div>
        </div>
        <div class="flex mt-[20px] items-center justify-between">
          <div class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-normal">
            核销人
          </div>
          <div class="text-black/90 text-sm font-normal font-['PingFang_SC'] leading-normal">
            {{ data?.verificationUserName }}
          </div>
        </div>
      </template>
    </div>
  </view>
</template>

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