<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 class="flex flex-wrap justify-end" v-else>
          <wd-button type="primary" size="small" @click="showUploadDialog = true">
            上传发票
          </wd-button>
        </view>
      </wd-cell>
      <wd-cell title="证件信息">
        <view class="flex flex-wrap">
          <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>
      </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>

    <!-- 上传发票弹窗 -->
    <wd-popup
      v-model="showUploadDialog"
      round
      closable
      custom-class="upload-popup w-[80%]"
      class="w-[80%]"
    >
      <view class="p-5">
        <view class="text-lg font-medium text-center mb-5">上传发票</view>
        <view class="upload-container mb-6">
          <UploadComponent
            v-model="invoiceUpload.fileList"
            v-model:fileIds="invoiceUpload.fileIds"
            :limit="1"
            :attlsh="currentOrdersId"
            attmodel="orders_invoice"
            attpath="/orders_invoice/"
            modelStats="invoiceFileIds"
            message="请上传发票照片"
          />
          <view class="text-xs text-gray-500 mt-2 text-center">
            上传清晰的发票照片，以便于核对信息
          </view>
          <!-- 如果上传成功,展示上传成功的文字 -->
          <view v-if="invoiceUpload.fileIds.length" class="text-center text-green-500 mt-2">
            上传成功
          </view>
        </view>
        <view class="px-2">
          <wd-button type="primary" block @click="handleConfirmUpload">确认</wd-button>
        </view>
      </view>
    </wd-popup>
  </view>
</template>

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

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

// 上传发票文件相关
const invoiceUpload = reactive({
  fileList: [],
  fileIds: [],
})

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

// 获取订单状态
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 getInvoiceImg = async () => {
  const res = await fileStore.getAttachmentList({
    attlsh: currentOrdersId.value,
    attmodel: 'orders_invoice',
  })
  invoiceImg.value = res
}

// 获取证件信息图片附件
const getIdentityImg = async () => {
  const res = await fileStore.getAttachmentList({
    attlsh: currentOrdersId.value,
    attmodel: 'orders_identity',
  })
  identityImg.value = res
}

// 确认上传并关闭弹窗
function handleConfirmUpload() {
  showUploadDialog.value = false
  // 重新请求订单详情和发票图片
  getOrderDetail()
  getInvoiceImg()
  // 清空上传数据
  invoiceUpload.fileList = []
  invoiceUpload.fileIds = []
}

onLoad((query) => {
  currentOrdersId.value = query.ordersid
  getOrderDetail()
  getInvoiceImg()
  getIdentityImg()
})
</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>
