<template>
  <el-form label-width="120px" class="view" :class="{ 'mobile-card': mobile }">
     <el-row>
      <el-col :span="12">
        <el-form-item label="商品">
          <div class="el-input el-input--default is-disabled el-input--suffix ">
            {{ formData?.orderItem?.spuName }}
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="商品原价">
          <div class="el-input el-input--default is-disabled el-input--suffix ">￥{{ fenToYuan(formData?.orderItem?.price) }}
          </div>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="数量">
          <div class="el-input el-input--default is-disabled el-input--suffix ">{{ formData?.orderItem?.count }}</div>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="合计">
          <div class="el-input el-input--default is-disabled el-input--suffix ">￥{{ fenToYuan(formData?.orderItem?.payPrice)
          }}</div>
        </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?.orderItem" :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="销售价">
            {{ 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="数量">
            {{ 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?.orderItem" 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 }">{{ 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> -->
  <!-- {{ formData }} -->
</template>
<script lang="ts" setup>
import * as AfterSaleApi from '@/api/mall/trade/afterSale/index'
import { fenToYuan } from '@/utils'
import { computed, onMounted, ref } from 'vue'
import { useAppStore } from '@/store/modules/app'
const appStore = useAppStore()
const mobile = computed(() => appStore.getMobile)
defineOptions({ name: 'TradeAfterSaleDetail' })
const formData = ref({})

const props = defineProps({
  obj: {
    default: {}
  }
})
const message = useMessage() // 消息弹窗

/** 获得详情 */
const getDetail = async (id) => {
  console.log(id)
  if (id) {
    const res = await AfterSaleApi.getAfterSale(id)
    // 没有表单信息则关闭页面返回
    if (res == null) {
      message.notifyError('售后订单不存在')
      close()
    }
    formData.value = res
  }
}
onMounted(() => {
  getDetail(props.obj.id)
})
defineExpose({ getDetail }) // 提供 open 方法，用于打开弹窗
</script>

<style src="@/styles/PcComponents.css"  lang="scss" scoped></style>
