<template>
  <div class="run-case">
    <div class="component">
      <slot name="component"></slot>
    </div>
    <Divider orientation="left">{{label}}</Divider>
    <div class="description">
      <slot name="description"></slot>
    </div>
    <Divider dashed></Divider>
    <div class="code-action">
      <Icon class="icon" title="复制代码" type="md-copy" size="20" @click="copyCode"/>
      <Icon class="icon" title="查看代码" type="md-code" size="20" @click="showCode"/>
    </div>
    <div class="code" v-if="isCodeDisplay">
      <highlightjs
      autodetect 
        :code="code"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: '标题'
    },
    file: {
      type: String,
      default: ''
    }
  },
  methods: {
    copyCode() {
      this.$Copy({
        text: this.code
      })
    },
    showCode() {
      this.isCodeDisplay = !this.isCodeDisplay 
    }
  },
  mounted() {
    if (!this.file) {
      return
    }
    fetch(this.file).then(res => res.text()).then(code => {
      this.code = code
    })
  },
  data() {
    return {
      code: '',
      isCodeDisplay: false
    }
  }
}
</script>

<style lang="less">
.run-case{
  padding: 20px;
  border: 1px solid #7e7e7e;
  border-radius: 4px;
  margin-bottom: 40px;
  .code{
    border-radius: 5px;
  }
  .code-action{
    text-align: right;
    .icon{
      cursor: pointer;
      margin-left: 15px;
    }
  }
  .hljs{
    background-color: #424242;
    border: none;
  }
}
</style>