
<!--复制账号密码-->
<template>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="300px"
    :destroy-on-close="true"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    center
  >
    <p>账号添加成功！</p>
    <p>账号：{{ userAccount }}</p>
    <p>新密码：<span class="text-primary">{{ pwd }}</span></p>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="dialogVisible = false">知道了</el-button>
      <el-button size="small" type="primary" @click="dialogVisible = false; onCopyText({ userAccount, pwd })">复制账号密码</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  // name: 'CopyPwd',
  data() {
    return {
      dialogVisible: false,
      pwd: null,
      userAccount: null
    }
  },
  methods: {
    handleOpen({ userAccount, pwd }) {
      this.userAccount = userAccount
      this.pwd = pwd
      this.dialogVisible = true
    },
    onCopyText({ userAccount, pwd }) {
      if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(`账号：${userAccount} 密码：${pwd}`)
        this.$modal.msgSuccess('复制成功')
      } else {
        const textArea = document.createElement('textarea')
        textArea.value = `账号：${userAccount} 密码：${pwd}`
        textArea.style.position = 'absolute'
        textArea.style.opacity = 0
        textArea.style.left = '-999999px'
        textArea.style.top = '-999999px'
        document.body.appendChild(textArea)
        textArea.focus()
        textArea.select()
        return new Promise((res, rej) => {
          document.execCommand('copy') ? res() : rej()
          this.$modal.msgSuccess('复制成功')
          textArea.remove()
        })
      }
    }
  }
}
</script>
<style scoped lang="scss">

</style>
