<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '订单详情',
  },
}
</route>

<template>
  <view class="">
    <wd-cell-group>
      <wd-cell title="订单号" :value="orderDetail.ordersnumber" />
      <wd-cell title="产品名称" :value="orderDetail.ordersproductname" />
      <wd-cell title="产品SN" :value="orderDetail.ordersproductsn" />
      <wd-cell title="订单总金额" :value="`¥${orderDetail.orderstotalprice}`" />
      <wd-cell title="优惠金额" :value="`¥${orderDetail.ordersyhprice}`" />
      <wd-cell title="实付金额" :value="`¥${orderDetail.ordersdiscountprice}`" />
      <wd-cell title="订单状态">
        <template #default>
          <wd-tag :type="getOrderStatusType(orderDetail.ordersorderstatus)">
            {{ getOrderStatus(orderDetail.ordersorderstatus) }}
          </wd-tag>
        </template>
      </wd-cell>
      <wd-cell title="下单时间" :value="orderDetail.ordersorderdate" />
      <wd-cell title="发票信息">
        <!-- 发票信息展示 -->
        <view class="flex flex-wrap" v-if="invoiceImg.length">
          <view class="flex-1" v-for="item in invoiceImg" :key="item.id">
            <wd-img :width="100" :height="100" :src="item.url" :enable-preview="true" />
          </view>
        </view>
        <!-- 无发票信息时的提示 -->
        <view v-else class="text-gray-500 text-sm">暂无发票信息</view>
      </wd-cell>
      <wd-cell title="购机者证件照片">
        <view class="flex flex-wrap" v-if="identityImg.length">
          <view class="flex-1" v-for="item in identityImg" :key="item.id">
            <wd-img :width="100" :height="100" :src="item.url" :enable-preview="true" />
          </view>
        </view>
        <view v-else class="text-gray-500 text-sm">暂无购机者证件照片</view>
      </wd-cell>
      <wd-cell title="购机者照片">
        <view class="flex flex-wrap" v-if="buyerImg.length">
          <view class="flex-1" v-for="item in buyerImg" :key="item.id">
            <wd-img :width="100" :height="100" :src="item.url" :enable-preview="true" />
          </view>
        </view>
        <view v-else class="text-gray-500 text-sm">暂无购机者照片</view>
      </wd-cell>
    </wd-cell-group>

    <!-- 回到订单列表 -->
    <view class="sticky-box-content w-full box-border px-2 pb-2 mt-4">
      <wd-button type="primary" block @click="handleBack">回到订单列表</wd-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useOrderStore } from '@/store/order'
import { useFileStore } from '@/store/file'
import { useMessage } from 'wot-design-uni'
import type { OrderType } from '@/types/order'

const orderStore = useOrderStore()
const fileStore = useFileStore()
const message = useMessage()
const currentOrdersId = ref('')
const orderscouponid = ref('')
const orderDetail = ref<OrderType>({} as OrderType)

// 获取订单详情
const getOrderDetail = async () => {
  const res = await orderStore.getOrderDetail(currentOrdersId.value)
  orderDetail.value = res
  orderscouponid.value = res.orderscouponid
}

// 获取订单状态
const getOrderStatus = (status: number) => {
  const statusMap = {
    0: '待审核',
    1: '已支付',
    2: '已完成',
  }
  return statusMap[status] || '未知状态'
}

// 获取订单状态对应的标签类型
const getOrderStatusType = (status: number) => {
  const typeMap = {
    0: 'warning', // 待审核 - 黄色警告色
    1: 'success', // 已支付 - 绿色成功色
    2: 'primary', // 已完成 - 蓝色主要色
  }
  return typeMap[status] || 'danger' // 未知状态使用红色危险色
}

// 回到订单列表
function handleBack() {
  uni.navigateTo({
    url: '/pages/order/index',
  })
}

const invoiceImg = ref([]) // 发票图片
const identityImg = ref([]) // 购机者证件照片
const buyerImg = ref([]) // 购机者照片

// 获取发票图片附件
const getInvoiceImg = async () => {
  const res = await fileStore.getAttachmentList({
    attlsh: currentOrdersId.value, // 关联id为订单id
    attmodel: 'orders_invoice',
  })
  invoiceImg.value = res
}

// 获取购机者证件照片附件
const getIdentityImg = async () => {
  const res = await fileStore.getAttachmentList({
    attlsh: orderscouponid.value, // 关联id为优惠劵id
    attmodel: 'coupon_identity',
  })
  identityImg.value = res
}

// 获取购机者照片附件
const getBuyerImg = async () => {
  const res = await fileStore.getAttachmentList({
    attlsh: orderscouponid.value, // 关联id为优惠劵id
    attmodel: 'coupon_buyer',
  })
  buyerImg.value = res
}

onLoad(async (query) => {
  currentOrdersId.value = query.ordersid
  await getOrderDetail()
  getInvoiceImg()
  getIdentityImg()
  getBuyerImg()
})
</script>

<style lang="scss" scoped>
.upload-popup {
  border-radius: 16px;
}

.upload-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

:deep(.wd-upload) {
  width: 100%;
}
</style>
