<template>
  <div>
    <pre class="code language-shell 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-bash';
import FpCodeMixin from './FpCodeMixin';

export default {
  name: "FpCodeCurl",
  mixins: [FpCodeMixin],
  computed: {
    html() {
      return Prism.highlight(this.code(), Prism.languages.bash, 'bash');
    }
  },
  methods: {
    code() {
      let c1 = {}
      this.items.filter(e => e.vd).forEach(e => {
        c1[e.vd] = e.v
      })
      c1['id'] = this.posterId
      c1 = JSON.stringify(c1, '', '  ')
      let c = `curl --location --request POST '${this.apiUrl}api/link' --header 'token: ${this.token}' --header 'Content-Type: application/json' \\
--data-raw '${c1}'`
      return c;
    }
  }
}
</script>

<style scoped>

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

</style>