<!-- 订单查看 - 商品 -->

<template>
  <el-form ref="formRef" :model="formData" v-if="!isDelivery" label-width="120px" :disabled="isDetail" :class="{'mobile-card':mobile}" :border="true">
    <el-row>
      <el-col :span="12">
        <el-form-item label="商品总额">
          {{ fenToYuan(formData.totalPrice!) }} 元
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="应付金额">
          {{ fenToYuan(formData.payPrice!) }} 元
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <!-- <el-col :span="12">
        <el-form-item label="优惠卷优惠">
          {{ fenToYuan(formData.couponPrice!) }} 元
        </el-form-item>
      </el-col> -->
      <el-col :span="12">
        <el-form-item label="积分抵扣" >
          {{ pointsToYuan(formData.payIntegral!) }} 元
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="运费金额">
          {{ fenToYuan(formData.deliveryPrice!) }} 元
        </el-form-item>
      </el-col>
    </el-row>

    <!-- <el-row>
      <el-col :span="12">
        <el-form-item label="订单人工调价">
          {{ fenToYuan(formData.adjustPrice!) }} 元
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="活动优惠">
          {{ fenToYuan(formData.discountPrice!) }} 元
        </el-form-item>
      </el-col>
    </el-row> -->
    <!-- <el-row>
      <el-col :span="12" v-if="!mobile">
        &nbsp;
      </el-col>
      <el-col :span="12">
        <el-form-item label="积分抵扣" >
          {{ fenToYuan(formData.pointPrice!) }} 元
        </el-form-item>
      </el-col>
    </el-row> -->
  </el-form>

  <p v-if="!mobile" style="margin-bottom: 5px;font-weight: bold;color: #909399;font-size: 16px;">商品列表</p>
  <!-- 如果是移动端的话 换成移动端的样式来显示 -->
  <div v-if="mobile" >

    <el-form ref="formRef" :model="formData" label-width="120px" :border="true"  v-for="(item,index) in formData.items" :key="item.id" class="mobile-card">
      
      <div class="mobile-card-title"><Icon icon="ep:list" /> 商品{{ index+1 }}</div>
      <el-row>
        <el-col :span="12">
          <el-form-item label="商品图片">
            <SPuUploadImg v-model="item.picUrl" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商品名称">
            {{ item.spuName }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="商品条码">
            {{ item.spuId }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="销售价">
            {{item.highPrecisionPrice ? (item.highPrecisionPrice / 100 ).toFixed(6) : fenToYuan(item.price)+"元"}}
            <!-- {{ fenToYuan(item.price) }} 元 -->
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="市场价">
            {{ fenToYuan(item.price!) }} 元
          </el-form-item>
        </el-col>
        <el-col :span="12" >
          <el-form-item label="数量" style="color: red;">
            {{ item.count }} 
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        
        <el-col :span="12">
          <el-form-item label="小计">
            {{ fenToYuan(item.payPrice!) }} 元
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注">
            无
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <!-- 如果是pc端直接显示描述框 -->
  <el-descriptions width="100" v-else>
    <el-descriptions-item labelClassName="no-colon">
      <el-row width="100%">
        <el-col :span="24">
          <el-table :data="formData.items" border>
            <el-table-column label="商品图片" width="100">
              <template #default="{ row }">
                <div style="height: 56px;margin: 0 auto;text-align: center;">
                  <img :src="row.picUrl" style="max-width: 100%;max-height: 100%;" />
                </div>
              </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="spuName" width="150">

              <template #default="{ row }">
                {{ row.spuName }}
              </template>
            </el-table-column>
            <el-table-column label="商品条码" width="100">

              <template #default="{ row }">{{ row.spuId }}</template>
            </el-table-column>
            <el-table-column label="销售价" prop="price" width="100">

              <template #default="{ row }">
                <!-- {{(row.highPrecisionPrice / 100 ).toFixed(6)}} -->
                {{row.highPrecisionPrice ? (row.highPrecisionPrice / 100 ).toFixed(6) : fenToYuan(row.price)+"元"}}
              </template>
            </el-table-column>
            <el-table-column label="市场价" prop="price" width="100">

              <template #default="{ row }">{{ fenToYuan(row.price) }}元</template>
            </el-table-column>
            <el-table-column label="数量" prop="count" width="100" />
            <el-table-column label="小计" prop="payPrice" width="100">

              <template #default="{ row }">{{ fenToYuan(row.payPrice) }}元</template>
            </el-table-column>
            <el-table-column label="备注" prop="afterSaleStatus">

              <template #default="{ row }">
                <dict-tag :type="DICT_TYPE.TRADE_ORDER_ITEM_AFTER_SALE_STATUS" :value="row.afterSaleStatus" />
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-descriptions-item>
  </el-descriptions>
</template>

<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import * as TradeOrderApi from '@/api/mall/trade/order'
import { fenToYuan,pointsToYuan } from '@/utils'
import { formatDate } from '@/utils/formatTime'
import { DICT_TYPE, getDictLabel, getDictObj } from '@/utils/dict'
// 从路由中引入store中的app仓库
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
const mobile = computed(() => appStore.getMobile)

const props = defineProps({
  id: propTypes.number.def(undefined), // 订单ID
  showPickUp: propTypes.bool.def(true), // 显示核销按钮
  isDelivery: propTypes.bool.def(false) // 是否是发货页面
})
const formData = ref<TradeOrderApi.OrderVO>({
  logs: []
})
const id = props.id
const getOrderProduct = async () => {
  if (id) {
    const res = (await TradeOrderApi.getOrderProduct(id)) as TradeOrderApi.OrderVO
    // 没有表单信息则关闭页面返回
    if (!res) {
      message.error('交易订单不存在')
      close()
    }
    formData.value = res
  }
}

const message = useMessage() // 消息弹窗


onMounted(async () => {
  getOrderProduct()
})
</script>
<style src="./OrderComponents.css"  lang="scss" scoped> </style>