salix-front/src/components/ui/VnLinkPhone.vue

57 lines
1.5 KiB
Vue

<script setup>
import { reactive, useAttrs, onBeforeMount, capitalize } from 'vue';
import axios from 'axios';
import { parsePhone } from 'src/filters';
import useOpenURL from 'src/composables/useOpenURL';
const props = defineProps({
phoneNumber: { type: [String, Number], default: null },
channel: { type: Number, default: null },
});
const config = reactive({
sip: { icon: 'phone', href: `sip:${props.phoneNumber}` },
'say-simple': {
icon: 'vn:saysimple',
channel: props.channel,
url: null,
},
});
const type = Object.keys(config).find((key) => key in useAttrs()) || 'sip';
onBeforeMount(async () => {
let { channel, url } = config[type];
if (type === 'say-simple') {
const { url: defaultUrl, defaultChannel } = (
await axios.get('SaySimpleConfigs/findOne')
).data;
if (!channel) config[type].channel = defaultChannel;
if (!url) config[type].url = defaultUrl;
}
});
function openSaySimple() {
useOpenURL(
`${config[type].url}?customerIdentity=%2B${parsePhone(
props.phoneNumber
)}&channelId=${config[type].channel}`
);
}
</script>
<template>
<QBtn
v-if="phoneNumber"
flat
round
:icon="config[type].icon"
size="sm"
color="primary"
padding="none"
@click.stop="openSaySimple"
>
<QTooltip>
{{ capitalize(type).replace('-', '') }}
</QTooltip>
</QBtn>
</template>