<!-- 订单查看 - 基础信息 -->

<template>
  <!-- isDetail:true时为商家备注进来的 -->
  <el-form v-if="isDetail" ref="formRef" :model="formData" label-width="120px" :disabled="isDetail">
    <el-row>
      <el-col :span="12">
        <el-form-item label="订单号" prop="no">
          {{ formData.no }}
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="总金额" prop="categoryId">
          {{ fenToYuan(formData.payPrice) }}元
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>

      <el-col :span="12" v-if="!isDelivery">
        <el-form-item label="订单类型" prop="brandId">
          <!-- <dict-tag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="formData.type!" /> -->
          {{ getDictObj(DICT_TYPE.TRADE_ORDER_TYPE, formData.type)?.label }}
        </el-form-item>
      </el-col>
      <el-col :span="(isDelivery ? 24:12)">
        <el-form-item label="状态" prop="brandId">
          {{ getDictObj(DICT_TYPE.TRADE_ORDER_STATUS, formData.status)?.label }}
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="客户名称" prop="brandId">
          {{ formData?.user?.nickname }}
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="配送方式" prop="keyword">
          {{ getDictObj(DICT_TYPE.TRADE_DELIVERY_TYPE, formData.deliveryType)?.label }}
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="收货人" prop="brandId">
          {{ formData.receiverName }}
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="收货地址" prop="keyword">
          {{ formData.receiverDetailAddress }}
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="收货人联系电话" prop="brandId">
          {{ formData.receiverMobile }}
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="买家留言" prop="brandId">
          {{ formData.userRemark }}
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>


  <!-- isDetail:false为订单选项时进来的 -->
  <el-form v-else ref="formRef" :model="formData" label-width="120px" :disabled="isDetail" :class="{'mobile-card':mobile}">
    
    <el-row v-if="mobile">
      <el-col :span="12">
        <el-form-item label="订单图片" prop="no" >
          <!-- {{ formData.items.length > 0 ? formData.items[0].picUrl : ''}} -->
          <!-- <img :src="formData.items[0].picUrl"  /> -->
          <SPuUploadImg v-model="orderImgUrl" :disabled="true" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="订单号" prop="no">
          {{ formData.no }}
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="总金额" prop="categoryId">
          {{ fenToYuan(formData.payPrice) }}元
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="订单类型" prop="brandId">
          <!-- <dict-tag :type="DICT_TYPE.TRADE_ORDER_TYPE" :value="formData.type!" /> -->
          {{ getDictObj(DICT_TYPE.TRADE_ORDER_TYPE, formData.type)?.label }}

        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="下单时间" prop="keyword">
          {{ formData.createTime && formatDate(formData.createTime) }}
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="客户名称" prop="brandId">
          {{ formData?.user?.nickname }}
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="支付方式" prop="keyword">
          {{ getDictObj(DICT_TYPE.PAY_CHANNEL_CODE, formData.payChannelCode)?.label }}
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="状态" prop="brandId">
          {{ getDictObj(DICT_TYPE.TRADE_ORDER_STATUS, formData.status)?.label }}
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="支付时间" prop="keyword">
          {{ formData.payTime && formatDate(formData.payTime) }}
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="订单来源" prop="brandId">
          {{ getDictObj(DICT_TYPE.TERMINAL, formData.terminal)?.label }}
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="配送方式" prop="keyword">
          {{ getDictObj(DICT_TYPE.TRADE_DELIVERY_TYPE, formData.deliveryType)?.label }}
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="收货人" prop="brandId">
          {{ formData.receiverName }}
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="收货地址" prop="keyword">
          {{ formData.receiverDetailAddress }}
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="收货人联系电话" prop="brandId">
          {{ formData.receiverMobile }}
        </el-form-item>
      </el-col>

    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="买家留言" prop="brandId">
          {{ formData.userRemark }}
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="备注" prop="brandId">
          {{ formData.remark }}
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>

</template>

<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import * as TradeOrderApi from '@/api/mall/trade/order'
import { fenToYuan } from '@/utils'
import { formatDate } from '@/utils/formatTime'
import { DICT_TYPE, getDictLabel, getDictObj } from '@/utils/dict'

// 判断页面是否是移动端
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
const mobile = computed(() => appStore.getMobile)


const props = defineProps({
  id: propTypes.number.def(undefined), // 订单ID
  isDetail: propTypes.bool.def(false),
  showPickUp: propTypes.bool.def(true), // 显示核销按钮
  isDelivery: propTypes.bool.def(false) // 是否是发货页面

})
const formData = ref<TradeOrderApi.OrderVO>({
  logs: []
})
const orderImgUrl = ref('')
const isDetail = props.isDetail
const id = props.id
const getDetail = async () => {
  if (id) {
    const res = (await TradeOrderApi.getOrder(id)) as TradeOrderApi.OrderVO
    // 没有表单信息则关闭页面返回
    if (!res) {
      message.error('交易订单不存在')
      close()
    }
    formData.value = res
    orderImgUrl.value = res.items[0].picUrl
    // console.log(orderImgUrl.value)
  }
}

// 暴露给父组件
defineExpose({ getDetail,formData })
const message = useMessage() // 消息弹窗
onMounted(async () => {
  getDetail()
})
</script>
<style src="./OrderComponents.css"  lang="scss" scoped> </style>
