<script setup>
const props = defineProps(["row", "pagename"]);

const phone = props.row.customer__phone || props.row.party__phone || props.row.phone;
const format = (s) => `${s.slice(0, 3)} ${s.slice(3, 6)} ${s.slice(6, 20)}`;
const text = format(phone);
const showmodal = ref();

function call() {
  window.open(`tel:${phone}`);
}
function sms() {
  window.open(`sms:${phone}`);
}
function openZalo() {
  window.open(`https://zalo.me/${phone}`, "_blank");
}

function sendSms() {
  showmodal.value = {
    component: "user/Sms",
    title: "Nhắn tin SMS",
    width: "50%",
    height: "400px",
    vbind: {
      row: props.row,
      pagename: props.pagename,
      api: "customersms",
    },
  };
}
</script>

<template>
  <div>
    <p class="is-flex is-gap-1 is-align-items-center">
      <span class="is-size-4 font-bold">
        {{ text }}
      </span>
      <button
        class="button is-small is-light is-primary rounded-full"
        @click="$copyToClipboard(phone)"
      >
        <span class="icon">
          <Icon
            name="material-symbols:content-copy-outline-rounded"
            :size="17"
          />
        </span>
      </button>
    </p>
    <p class="buttons are-small mt-2">
      <button
        class="button is-primary"
        @click="call"
      >
        <span class="icon">
          <Icon
            name="material-symbols:call-outline-rounded"
            :size="18"
          />
        </span>
        <span>Call</span>
      </button>
      <button
        class="button"
        @click="sms"
      >
        SMS
      </button>
      <button
        class="button"
        @click="openZalo"
      >
        Zalo
      </button>
    </p>
    <Modal
      v-if="showmodal"
      v-bind="showmodal"
      @close="showmodal = undefined"
    />
  </div>
</template>
