<template>
  <div
    class="btn flex items-center justify-center cursor-pointer"
    ref="btn"
    :data-clipboard-text="copyTxt"
  >
    <slot>
      {{ $t('lang.components.copy') }}
    </slot>
  </div>
</template>

<script lang="ts">
import Clipboard from 'clipboard'
import { message } from 'ant-design-vue'
import Vue from 'vue'

export default Vue.extend({
  props: {
    copyTxt: [String, Number],
  },
  mounted() {
    this.init()
  },
  methods: {
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    init() {
      const clipboard = new Clipboard(this.$refs.btn as Element)
      clipboard.on('success', (e) => {
        message.success(this.$t('lang.components.copySuc') as string)
        e.clearSelection()
      })

      clipboard.on('error', () => {
        message.error(this.$t('lang.components.copyErr') as string)
      })
    },
  },
})
</script>

<style scoped>
.btn {
  width: 60px;
  height: 30px;
  background: rgba(37, 69, 203, 0.1);
  border-radius: 15px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2545cb;
}
</style>
