<template>
 <div class="panel bg-white rounded-4">
    <div class="panel-header lh-60 px-30">
      <div class="name c-333 fs-20 font-bold mr-20">意向订单详情({{orderInfo.billNo}})</div>
    </div>
    <div class="panel-body p-30 border-t border-t-solid border-t-gray-1 grid grid-cols-3 gap-col-100 gap-row-30">
      <div>意向订单ID: {{orderInfo.id}}</div>
      <div>客户名称: {{orderInfo.customerName}}</div>
      <div>订单状态: {{orderInfo.state}}</div>
      <div>销售总金额: {{toUSD(orderInfo.price)}}</div>
      <div>下单时间: {{orderInfo.createTime}}</div>
    </div>
  </div>
  <div class="p-30 mt-10 bg-white">
    <a-table :data-source="orderInfo.merchandises" :columns="columns">
      <template #bodyCell="{ column, value, record }">
        <template v-if="column.key === 'url'">
         <img class="w-50 h-50" :src="record.url" alt="">
        </template>
        <template v-if="column.dataIndex === 'unitPrice'">
            {{ toUSD(value) }}
        </template>
        <template v-if="column.dataIndex === 'totalPrice'">
            {{ toUSD(value) }}
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { apiOrderInfo } from '@/api/order'
import { useRoute } from 'vue-router'
import useUserStore from '@/store/modules/user'
import {toUSD} from '@/utils'
// 获取地址栏参数
const route = useRoute()
const id = route.query.id as string
// 获取用户信息上的 supplierId
const userStore = useUserStore()

const orderInfo = ref<any>({})
apiOrderInfo({id, supplierId: userStore.userInfo.id}).then(res => {
  orderInfo.value = res.data.result
})
// apiOrderInfo()
const columns = [
  {
    title: '商品名称',
    dataIndex: 'merchandiseName',
  },
  {
    title: '图片',
    dataIndex: 'url',
  },
  {
    title: '所属品牌',
    dataIndex: 'brandName',
  },
  {
    title: '总件数',
    dataIndex: 'count',
  },
  {
    title: '销售单价',
    dataIndex: 'unitPrice',
  },
  {
    title: '销售总价',
    dataIndex: 'totalPrice',
  }
]
</script>
<style scoped>
</style>
