<template>
 <el-drawer v-model="drawer" :title="dialogTitle" size="40%">
    <div>
      <el-descriptions :title="t('score.receivingInformation')" :column="2">
        <el-descriptions-item :label="t('score.nickname')">{{ nickname }}</el-descriptions-item>
        <el-descriptions-item :label="t('score.consignee')">{{ DetailData.customerName }}</el-descriptions-item>
        <el-descriptions-item :label="t('score.contactPhoneNumber')">{{ DetailData.customerPhone }}</el-descriptions-item>
        <el-descriptions-item :label="t('score.address')">{{ DetailData.customerAddress }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions :title="t('score.productDetails')" :column="2">
        <el-descriptions-item :label="t('score.goodsPicture')">
          <el-image style="width: 40px; height: 40px" :src="convertImageUrl(product.image)" :fit="fit" />
        </el-descriptions-item>
        <el-descriptions-item :label="t('score.productName')">{{ product.title }}</el-descriptions-item>
        <el-descriptions-item :label="t('score.price')">{{ product.score }}{{t('mp.points')}}</el-descriptions-item>
        <!-- <el-descriptions-item :label="t('score.us')收货地址">1111</el-descriptions-item> -->
      </el-descriptions>
      <el-descriptions :title="t('score.orderInformation')" :column="2">
        <el-descriptions-item :label="t('score.orderNo')">{{ DetailData.orderId }}</el-descriptions-item>
        <el-descriptions-item :label="t('score.quantity')">{{ DetailData.number }}</el-descriptions-item>
        <el-descriptions-item :label="t('score.spendingPoints')">{{ DetailData.totalScore }}</el-descriptions-item>
        <el-descriptions-item :label="t('score.payment')">
           <span v-if="DetailData.havePaid == 0" style="color:#F56C6C">{{t('common.no')}}</span>
           <span v-if="DetailData.havePaid == 1" style="color:#409EFF">{{t('common.yes')}}</span>
        </el-descriptions-item>
        <el-descriptions-item :label="t('score.whetherToShipOrNot')">
           <span v-if="DetailData.haveDelivered == 0" style="color:#F56C6C">{{t('common.no')}}</span>
           <span v-if="DetailData.haveDelivered == 1" style="color:#409EFF">{{t('common.yes')}}</span>
        </el-descriptions-item>
        <el-descriptions-item :label="t('score.receiveOrNot')">
           <span v-if="DetailData.haveReceived == 0" style="color:#F56C6C">{{t('common.no')}}</span>
           <span v-if="DetailData.haveReceived == 1" style="color:#409EFF">{{t('common.yes')}}</span>
        </el-descriptions-item>
        <el-descriptions-item label="ip">{{ DetailData.ip }}</el-descriptions-item>
        <el-descriptions-item :label="t('public.createTime')">{{ formatDate(DetailData.createTime)}}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions :title="t('score.logisticsInformation')" :column="2">
        <el-descriptions-item :label="t('score.expressCompany')">{{ DetailData.expressCompany }}</el-descriptions-item>
        <el-descriptions-item :label="t('score.courierNumber')">
          {{ DetailData.expressNumber }} 
          <el-button type="primary" @click="getLogistic(DetailData.expressSn,DetailData.expressNumber)">物流追踪</el-button>
        </el-descriptions-item>
      </el-descriptions>
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in logisticResult"
          :key="index"
          :timestamp="activity.acceptTime"
        >
          {{ activity.acceptStation }}
        </el-timeline-item>
      </el-timeline>
    </div>
  </el-drawer>
</template>
<script setup lang="ts">
import * as OrderApi from '@/api/score/order'
import { formatDate } from '@/utils/formatTime'
import { convertImageUrl } from '@/utils/image-helper'
//const message = useMessage() // 消息弹窗

const { t } = useI18n() // 国际化
// const message = useMessage() // 消息弹窗
const dialogTitle = ref('') // 弹窗的标题
const drawer = ref(false)
const DetailData = ref({})
const nickname = ref('')
const logisticResult = ref({})
const product = ref({})
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  drawer.value = true
  dialogTitle.value = t('action.' + type)
  let data  = await OrderApi.getOrder(id)
  DetailData.value = data
  nickname.value = DetailData.value.userRespVO.nickname
  product.value = data.scoreProductRespVO
  console.log('aa:',product.value )
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const getLogistic = async(deliverySn,deliveryId) => {
  const res  = await OrderApi.getLogistic(deliverySn, deliveryId)
  if (res.success == "false") {
    message.error(res.reason)
  }
  logisticResult.value = res.traces
}
</script>
<style scoped>
</style>
