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

<script>
import buttonMixin from './button_mixin.js'
import ClipboardJS from 'clipboard'
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
    }
  },
  mounted() {
    this.textCopy()
  },
  beforeDestroy() {
    if (this.clipboard?.listener?.destroy) {
      this.clipboard.listener.destroy()
    }
  },
  methods: {
    // 组装复制内容
    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.columnCopyClass}`, {
          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>
