<!--
 * @Description:
 * 分享弹窗
 -->
<template>
  <a-modal
    :title="modaltitle"
    width="50%"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    wrapClassName="share-modal"
  >
    <div class="link_title">表单链接</div>
    <div class="link_box">
      <span class="link">{{ content }}</span>
      <a-button
        @click="handleCopyJson"
        class="copy-btn"
        data-clipboard-action="copy"
        :data-clipboard-text="content"
        type="primary"
      >点击复制</a-button
      >
    </div>
  </a-modal>
</template>
<script>
/* eslint-enable */
import previewCode from '../../PreviewCode/index'
import Clipboard from 'clipboard'

export default {
  name: 'UrlModal',
  data() {
    return {
      visible: false,
      editorVueJson: '',
      editorHtmlJson: '',
      jsonData: {},
      content: '',
      modaltitle: '分享表单'
    }
  },
  props: {
    pid: {
      type: String,
      default: ''
    }
  },
  watch: {
    pid(val) {
      console.log(val)
      this.content = `${process.env.VUE_APP_FORMPARSER_URL}?formId=${val}`
    }
  },
  components: {
    previewCode
  },
  methods: {
    handleOk(e) {
      setTimeout(() => {
        this.visible = false
      }, 1000)
    },
    handleCancel() {
      this.visible = false
    },
    handleCopyJson() {
      // 复制数据
      console.log('daozel')
      const clipboard = new Clipboard('.copy-btn')
      clipboard.on('success', () => {
        this.$message.success('复制成功')
      })
      clipboard.on('error', () => {
        this.$message.error('复制失败')
      })
      setTimeout(() => {
        // 销毁实例
        clipboard.destroy()
      }, 122)
    }
  }
}
</script>
<style lang="less">
.link_title {
  font-weight: bold;
  line-height: 4;
  color: #000;
}
.link_box {
  width: 80%;
  display: flex;
}
.link {
  display: block;
  flex: 1;
  color: #333;
  padding: 4px 15px;
  border-radius: 2px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
