<template>
  <div class="flex items-center mt-[12px] p-[12px] bg-white border-t border-[#e0e0e0]">
    <div class="flex flex-col flex-1">
      <span class="text-[14px] font-medium text-ink-800">{{ t("goods.location.locatedAt") }} {{
        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="w-[28px] h-[28px] rounded-[10px] bg-[#F5F5F5] flex items-center justify-center">
          <Navigation size="16" color="#171717" />
        </div>
        <span class="text-[12px] text-ink-600">{{ t("goods.location.navigation") }}</span>
      </div> -->

      <div>
        <div class="w-[28px] h-[28px] rounded-[10px] bg-[#F5F5F5] flex items-center justify-center"
          @click.stop="callPhone">
          <Phone size="16" color="#171717" />
        </div>
        <span class="text-[12px] text-ink-600">{{ t("goods.location.phone") }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from "vue";
import { useI18n } from "vue-i18n";
import { Phone, Navigation } from '@lucide/vue'

const { t } = useI18n();

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(t("goods.location.missingPhone"));
    return;
  }

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