<template>
<el-card class="code-preview">
  <component :is="example.comp"></component>

  <el-divider content-position="left">{{example.title}}</el-divider>

  <el-collapse class="code-preview__tab">
    <el-collapse-item :title="example.desc" name="1">
      <pre><code class="html" ref="source">{{example.source}}</code></pre>
    </el-collapse-item>
  </el-collapse>
</el-card>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { CompExample } from '@/config/components/type'
import hljs from 'highlight.js/lib'
import 'highlight.js/styles/darcula.css'

@Component
export default class CodePreview extends Vue {
  @Prop() example!: CompExample

  mounted () {
    hljs.highlightBlock(this.$refs.source)
  }
}
</script>

<style lang="scss">
.code-preview {
  margin-top: 32px;
}

.code-preview__tab {
  margin-top: -16px !important;
  border-top: none !important;
}
</style>
