<template>
  <div>
    <pre class="code language-javascript line-numbers" v-html="html"></pre>
    <el-button ref="btnCopy" type="info" style="position: absolute; top: 20px; right: 10px;">复制</el-button>
  </div>
</template>

<script>

import Prism from 'prismjs';
import 'prismjs/components/prism-javascript';
import FpCodeMixin from './FpCodeMixin';

export default {
  name: "FpCodeJs",
  mixins: [FpCodeMixin],
  computed: {
    html() {
      return Prism.highlight(this.code(), Prism.languages.javascript, 'javascript');
    }
  },
  methods: {
    code() {
      let c1 = this.json()
      return `import fastposter from 'fastposter';

// 如需进一步了解，请参考开发文档 https://cloud.fastposter.net/doc/sdk/

// 1.创建海报客户端对象
let client = fastposter.init({token: "${this.token}", endpoint: "${this.apiUrl}"});

// 2.准备海报参数（从实际业务系统中获取）
let params = ${c1}

// 3.生成海报并保存(提供图片流、二进制、base64等多种方式)
client.buildPoster('${this.posterId || '未生成'}', params)
  .then((res)=>{
      // 将res 信息直接复制到 img 标签的 src 属性上即可
      // document.getElementById('myImg').src = res
  })`
    }
  }
}
</script>

<style scoped>

.code {
  text-align: left;
  overflow: auto;
  user-select: text;
  cursor: text;
  height: 500px;
  font-size: 13px;
}

</style>