<template lang="pug">
  .flex.box-border.px-4.items-center.w-full.text-sm(:style="{ width : width + 'px' }")
    span.text-sm(
      v-if="!isOpenChange"
    ) {{value.phone.username.replace(/\+7(\d{3})(\d{3})(\d{2})(\d{2})/, '+7 ($1) $2-$3-$4')}}
    .phone(v-if="isOpenChange")
      base-input(
        @click.stop,
        v-model="value.phone.username",
        :placeholder="value.phone.username",
        mask="+7 (###) ###-##-##",
        outlined
      )
</template>

<script>
import BaseInput from "@/components/base/BaseInput";

export default {
  name: "TableCellBodyPhone",
  components: { BaseInput },
  props: {
    value: Object,
    width: Number,
    isOpenChange: Boolean,
  },
};
</script>
