<template>
  <el-dialog
    v-model="visible"
    title="订单详情"
    top="40px"
    draggable
    width="90%"
    :close-on-click-modal="false"
    class="order-detail-dialog"
  >
    <el-card
      style="margin-bottom: 10px"
      v-if="detailData"
      class="!border-none mt-2"
      shadow="never"
    >
      <el-descriptions class="margin-top" :column="3" :border="true">
        <el-descriptions-item :title="detailData.namespace" label="订单来源"
          >{{ detailData.namespace }}
        </el-descriptions-item>

        <el-descriptions-item
          :title="detailData.factory_order_number"
          label="订单号"
          >{{ detailData.factory_order_number }}
        </el-descriptions-item>
        <el-descriptions-item :title="detailData.shop_number" label="店铺单号"
          >{{ detailData.shop_number }}
        </el-descriptions-item>

        <el-descriptions-item
          :title="detailData.third_order_number"
          label="第三方订单号"
          >{{ detailData.third_order_number }}
        </el-descriptions-item>

        <el-descriptions-item :title="detailData.statusStr" label="订单状态"
          >{{ detailData.statusStr }}
        </el-descriptions-item>
        <el-descriptions-item :title="detailData.product_num" label="产品数量"
          >{{ detailData.product_num }}
        </el-descriptions-item>
        <el-descriptions-item
          :title="detailData.start_stocking_time"
          label="确认时间"
          >{{ detailData.start_stocking_time }}
        </el-descriptions-item>
        <el-descriptions-item :title="detailData.finish_time" label="完成时间"
          >{{ detailData.finish_time }}
        </el-descriptions-item>

        <el-descriptions-item
          :title="detailData.delivery_type"
          label="交运方式"
        >
          <span v-if="detailData.delivery_type === 'lanshou'">上门揽收 </span>
          <span v-if="detailData.delivery_type === 'zisong'">卖家自送 </span>
        </el-descriptions-item>
        <el-descriptions-item
          :title="detailData.logistics_way_name"
          label="物流方式"
        >
          {{ detailData.logistics_way_name }}
        </el-descriptions-item>
        <el-descriptions-item
          :title="detailData.lanshou_name || detailData.receiver_name"
          label="收货人"
          >{{ detailData.lanshou_name || detailData.receiver_name }}
        </el-descriptions-item>
        <el-descriptions-item
          :title="detailData.lanshou_phone || detailData.receiver_phone"
          label="收货电话"
          >{{ detailData.lanshou_phone || detailData.receiver_phone }}
        </el-descriptions-item>
        <el-descriptions-item
          :title="detailData.lanshou_region || detailData.receiver_province"
          label="收货区域"
          >{{ detailData.lanshou_region || detailData.receiver_province }}
        </el-descriptions-item>
        <el-descriptions-item
          :title="
            detailData.lanshou_address ||
            [
              detailData.receiver_province,
              detailData.receiver_city,
              detailData.receiver_district,
              detailData.receiver_address1,
            ].join(' ')
          "
          label="收货地址"
          >{{
            detailData.lanshou_address ||
            [
              detailData.receiver_province,
              detailData.receiver_city,
              detailData.receiver_district,
              detailData.receiver_address1,
            ].join(' ')
          }}
        </el-descriptions-item>
        <el-descriptions-item
          :title="detailData.lanshou_post || detailData.receiver_post_code"
          label="收货邮政编码"
          >{{ detailData.lanshou_post || detailData.receiver_post_code }}
        </el-descriptions-item>
        <el-descriptions-item :title="detailData.user_mark" label="客户"
          >{{ detailData.user_mark }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card v-if="detailData" class="!border-none mt-2" shadow="never">
      <div class="font-bold">商品</div>
      <div class="flex mt-4">
        <el-table
          border
          class="mt-4"
          size="large"
          height="400"
          :data="detailData.productList"
        >
          <el-table-column
            show-overflow-tooltip
            label="商品图片"
            width="100"
            prop="variant_image"
          >
            <template #default="{ row }">
              <el-image
                v-if="row.variant_image"
                preview-teleported
                style="width: 60px; height: 60px"
                :preview-src-list="[row.variant_image]"
                :src="row.variant_image"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column
            label="生产单号"
            width="150"
            show-overflow-tooltip
            prop="third_sub_order_number"
          ></el-table-column>
          <el-table-column
            label="工厂单号"
            width="150"
            show-overflow-tooltip
            prop="factory_sub_order_number"
          ></el-table-column>
          <el-table-column
            label="商品名称"
            show-overflow-tooltip
            prop="product_name"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            width="100"
            label="价格(￥)"
            prop="price"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            width="100"
            label="商品数量"
            prop="num"
          ></el-table-column>
          <el-table-column
            label="店铺单号"
            width="150"
            prop="shop_number"
            show-overflow-tooltip
          >
            <template #default>
              {{ detailData.shop_number }}
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="baseSKU"
            width="150"
            prop="base_sku"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="变体SKU"
            width="150"
            prop="variant_sku"
          ></el-table-column>

          <el-table-column
            show-overflow-tooltip
            label="已发货数量"
            width="120"
            prop="shipment_num"
          ></el-table-column>
        </el-table>
      </div>
    </el-card>
  </el-dialog>
</template>

<script lang="ts" setup>
import { getPodUsDetailData } from '@/api/order'
import { PodUsDetailData } from '@/types/api/deliveryNote.ts'

// 定义props
interface Props {
  orderId?: number | string | null
  dialogVisible: boolean
  loading?: boolean
}

const visible = ref(false)
const props = withDefaults(defineProps<Props>(), {
  orderId: null,
  dialogVisible: false,
  loading: false,
})

// 定义事件
const emit = defineEmits(['close', 'update'])

const detailData = ref<PodUsDetailData | null>(null)
const getData = async () => {
  if (!props.orderId) return
  const res = await getPodUsDetailData(props.orderId || '')
  res.data.productList.forEach((it) => {
    it.price = Number(it.product_price)
    it.customized_quantityStr = it.customized_quantity > 1 ? '多面' : '单面'
    it.image_ary =
      it.image_ary && it.image_ary.startsWith('[')
        ? JSON.parse(it.image_ary).filter((el: { title: string }) => el.title)
        : []
  })
  detailData.value = res.data
  console.log(detailData.value)
}

// 监听props变化，重新获取数据
watch(
  () => props.orderId,
  (newId) => {
    if (newId) {
      getData()
    }
  },
)

onMounted(() => {
  if (props.orderId) {
    getData()
  }
})

onActivated(() => {
  if (props.orderId) {
    getData()
  }
})

watch(
  () => props.dialogVisible,
  () => {
    visible.value = props.dialogVisible
  },
)

watch(
  () => visible.value,
  () => {
    emit('update', visible.value)
  },
)
</script>
<style lang="scss" scoped>
.img-list {
  display: flex;
  gap: 5px;
}

.order-detail-dialog {
  :deep(.el-dialog__body) {
    height: 70vh !important;
    overflow-y: auto;
    padding: 20px;
  }
}

.detail-loading-container {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
