<template>
  <div>
    <p class="fsb-30">{{ text }}
      <a class="ml-3" @click="copy()">
        <SvgIcon v-bind="{name: 'copy.svg', type: 'primary', size: 24}"></SvgIcon>
      </a>
    </p>
    <p class="buttons mt-4">
      <button class="button is-primary" @click="call()">Call</button>
      <button class="button is-primary" @click="sms()">SMS</button>
      <button class="button is-primary" @click="openZalo()">Zalo</button>
    </p>
    <Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal"></Modal>
  </div>
</template>
<script>
export default {
  props: ['row', 'pagename'],
  data() {
    return {
      text: undefined,
      phone: this.row.customer__phone || this.row.party__phone || this.row.phone,
      showmodal: undefined
    }
  },
  created() {
    var format = function(s) {
      return `${s.slice(0,3)} ${s.slice(3,6)} ${s.slice(6, 20)}`
    }
    this.text = format(this.phone)
  },
  methods: {
    call() {
      window.open(`tel:${this.phone}`)
    },
    sms() {
      window.open(`sms:${this.phone}`)
    },
    sendSms() {
      let api = this.row.code.indexOf('CN')>=0? 'customersms' : undefined
      if(this.row.code.indexOf('LN')>=0) api = 'loansms'
      else if(this.row.code.indexOf('TS')>=0) api = 'collateralsms'
      this.showmodal = {component: 'user/Sms', title: 'Nhắn tin SMS', width: '50%', height: '400px', 
      vbind: {row: this.row, pagename: this.pagename, api: api}}
    },
    copy() {
      this.$copyToClipboard(this.phone)
    },
    openZalo() {
      window.open(`https://zalo.me/${this.phone}`, '_blank')
    }
  }
}
</script>