<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",
        v-mask="'+7 (###) ###-##-##'"
      )
</template>

<script>
import BaseInput from "@/components/base/BaseInput";
import { mask } from "vue-the-mask";
export default {
  name: "TableCellBodyPhone",
  components: { BaseInput },
  props: {
    value: Object,
    width: Number,
    isOpenChange: Boolean,
  },
  directives: { mask },
};
</script>

<style lang="sass" scoped>
.phone
  width: 158px
</style>
