<template>
  <div class="flex items-center mt-[12px] p-[12px] bg-white border border-t border-[#e0e0e0]">
    <div class="flex flex-col flex-1">
      <span class="text-[14px] font-medium text-ink-800">位于 {{ orderData.oneLevelAddress }}</span>
      <span class="mt-[4px] text-[12px] text-ink-500">{{ orderData.commodityAddress }}</span>
    </div>

    <div class="flex items-center gap-[10px] ml-[16px]">
      <div>
        <div class="actions-btn">
          <van-icon type="paperplane-filled" size="16" color="#171717" />
        </div>
        <span class="text-[12px] text-ink-600">导航</span>
      </div>

      <div>
        <div class="actions-btn" @click.stop="callPhone">
          <van-icon type="phone-filled" size="16" color="#171717" />
        </div>
        <span class="text-[12px] text-ink-600">电话</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from "vue";

const props = defineProps({
  orderData: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});

// 拨打电话
const getPhoneNumber = () => {
  const o = props.orderData || {};
  return o.commodityPhone || o.phone || o.contactPhone;
};

const callPhone = () => {
  const phone = getPhoneNumber();

  if (!phone) {
    showToast("未提供电话号码");
    return;
  }

  window.location.href = `tel:${phone}`;
};
</script>
