<!--预览命令  -->

<template>
  <div>
    <el-button ref="copy" icon="el-icon-document-copy" style="float: right;" type="text" @click="copy" :data-clipboard-text="result"></el-button>
    <div style="word-wrap: break-word" v-html="resultAdjust">

    </div>
  </div>

</template>

<script>
import Clipboard from 'clipboard'
import { TuningRun } from '@/api/gptController.js'
// import { getSessionHash } from '@/utils/index';
export default {
  data() {
    return {
      clipboard: null,
      result: '',
      SocketService: new this.$SocketService('queue/join', this.websocketonmessage, this.successful),
      wsData: {
        data: null,
        event_data: null,
        fn_index: 18,
        session_hash: this.item.runId
      }
    }
  },

  components: {},

  computed: {
    resultAdjust() {
      return this.result.replace(/\n/g, '<br/>').replace('```bash', '')
    }
  },
  props: ['item'],
  mounted() {
    this.SocketService.initWebSocket()
    this.clipboard = new Clipboard(this.$refs.copy.$el)
  },

  methods: {
    successful() {
      // 连接成功
      this.send(`{"fn_index":${this.wsData.fn_index},"session_hash":"${this.wsData.session_hash}"}`)
      this.getPreviewCommand()
    },
    getPreviewCommand() {
      // 获取参数
      TuningRun.getPreviewCommand(this, { runId: this.item.runId }).then((res) => {
        this.wsData.data = res.data
        this.send(JSON.stringify(this.wsData))
      })
    },
    send(data) {
      // 发送参数
      this.SocketService.websocketsend(data)
    },
    websocketonmessage(e) {
      // 返回接收参数
      console.log(e)
      if (JSON.parse(e.data).msg === 'process_generating') {
        this.result = JSON.parse(e.data).output.data[0]
      }
    },
    copy() {
      try {
        this.clipboard.on('success', (e) => {
          this.$message.success('接入信息复制成功！')
          this.clipboard = null
        })
        this.clipboard.on('error', (e) => {
          this.$message.error('浏览器不支持复制')
          this.clipboard = null
        })
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>
<style scoped>
</style>
