<template>
  <span class="RCopy">
    <q-icon
      v-if="copyButtonPosition === 'left'"
      size="sm"
      color="#1491CF"
      name="pgs-copy"
      class="RCopy-Button"
      @click="sendToClipBoard(value)"
    />
    <span class="RCopy-Text" :title="value">
      {{ value }}
    </span>
    <q-icon
      v-if="copyButtonPosition !== 'left'"
      size="sm"
      color="#1491CF"
      name="pgs-copy"
      class="RCopy-Button"
      @click="sendToClipBoard(value)"
    />
  </span>
</template>

<script lang="ts">
import { copyToClipboard } from 'quasar';
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({
  inheritAttrs: false,
})
export default class CopyCell extends Vue {
  @Prop()
  value: string;

  @Prop({ default: 'right' })
  copyButtonPosition: string;

  public sendToClipBoard(text: string): void {
    copyToClipboard(text);
    this.$q.notify({
      message: `'${text}' скопирован`,
    });
  }
}
</script>

<style lang="scss" scoped>
.RCopy {
  font-size: 14px;
  line-height: 16px;
  color: rgba(2, 12, 18, 0.9);
  display: flex;
  max-width: 100%;
  gap: 4px;
  align-items: center;
  overflow: hidden;

  &-Text {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  &-Button {
    padding-left: 2px;
    color: #1491cf;
    cursor: pointer;
  }
}
</style>
