<template>
  <el-button v-if="btnys && columnCopyClassKey" :class="columnCopyClassKey" type="info" size="mini">{{
    text
  }}</el-button>
  <div v-else-if="columnCopyClassKey" class="withinLine">
    <el-button :class="columnCopyClassKey" type="primary" size="mini">{{ text }}</el-button>
  </div>
</template>

<script>
import buttonMixin from './button_mixin.js'
import ClipboardJS from 'clipboard'
import md5 from 'md5'
var nrBR = `
`
export default {
  mixins: [buttonMixin],
  props: {
    text: {
      type: String,
      default: ''
    },
    columnCopyClass: {
      type: String,
      default: 'columnCopyClass_cp'
    },
    info: {
      type: Array,
      default: () => []
    },
    cpText: {
      type: String,
      default: ''
    },
    btnys: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      columnCopyClassKey: 'name-' + this.getRandom16Chars(md5(this.columnCopyClass + '_' + this.orderInfo.id))
    }
  },
  mounted() {
    this.textCopy()
  },
  beforeDestroy() {
    if (this.clipboard?.listener?.destroy) {
      this.clipboard.listener.destroy()
    }
  },
  methods: {
    getRandom16Chars(str) {
      // 确保输入字符串的长度是32
      if (str.length !== 32) {
        throw new Error('输入字符串必须是32个字符长')
      }
      // 创建一个存储选中的字符的数组
      let selectedChars = []
      // 使用 Set 来确保没有重复的索引
      let indices = new Set()
      // 随机选择16个不同的索引
      while (indices.size < 10) {
        let randomIndex = Math.floor(Math.random() * 32)
        indices.add(randomIndex)
      }
      // 根据选中的索引提取字符
      indices.forEach(index => {
        selectedChars.push(str[index])
      })
      // 返回选中的16个字符组成的字符串
      return selectedChars.join('')
    },
    // 组装复制内容
    cpFormInfo() {
      if (this.cpText) {
        return this.cpText
      }
      return this.info
        .map(item => {
          return `${item.formItemAttributes.label}： ${
            item.getValue
              ? item.getValue() || ''
              : item.formItemAttributes.prop && item.formItemAttributes.prop !== '_'
              ? item.options && this.orderInfo[item.formItemAttributes.prop]
                ? item.options.find(val => val.value === this.orderInfo[item.formItemAttributes.prop])?.label || ''
                : this.orderInfo[item.formItemAttributes.prop] || ''
              : ''
          }`
        })
        .join(nrBR)
    },
    // 绑定复制功能
    textCopy() {
      this.$nextTick(() => {
        if (this.clipboard?.listener?.destroy) {
          this.clipboard.listener.destroy()
        }
        this.clipboard = new ClipboardJS(`.${this.columnCopyClassKey}`, {
          text: this.cpFormInfo
        })
        this.clipboard.on('success', () => {
          this.$message({
            type: 'success',
            message: '复制成功'
          })
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.withinLine {
  display: inline-block;
  ::v-deep .el-button {
    margin-left: 0;
    margin-right: 10px;
    margin-bottom: 10px;
  }
}
</style>
