<template>
  <div>
    <section class="code-box" :id="alias">
      <section class="code-box-demo">
        <slot></slot>
        <slot name="demo"></slot>
      </section>
      <section class="code-box-meta markdown">
        <h3>
          {{name}}
          <a :href="'#' + alias" aria-hidden="true" class="anchor">#</a>
        </h3>
        <p>{{desc}}</p>
        <el-tooltip placement="top" :content="showCode ? 'Hide Code' : 'Show Code'">
          <el-button @click="showCode = !showCode" type="text">&lt;/&gt;</el-button>
        </el-tooltip>
      </section>
      <el-collapse-transition>
        <section class="code-box-code" v-show="showCode">
          <pre v-highlightjs="formatCode">
            <code class="language-html">
            </code>
          </pre>
          <el-tooltip placement="top" content="复制代码">
            <i class="el-icon-document-copy" @click="doCopy"></i>
          </el-tooltip>
        </section>
      </el-collapse-transition>
    </section>
  </div>
</template>
<script>
import utils from "@/utils.js";

export default {
  name: "CodeBox",
  props: {
    name: String,
    alias: String,
    code: String,
    desc: String
  },
  data() {
    return {
      showCode: false
    };
  },
  computed: {
    formatCode: function() {
      return utils.trimEachLine(this.code);
    }
  },
  mounted() {
    const me = this;
  },
  methods: {
    doCopy: function() {
      this.$copyText(this.formatCode).then(
        () => {
          this.$message({ message: "复制成功", type: "success" });
        },
        () => {
          this.$message.error("复制失败");
        }
      );
    }
  }
};
</script>
<style lang="scss" scoped>
.code-box {
  border: 1px solid #ebedf0;
  border-radius: 2px;
  display: inline-block;
  width: 100%;
  position: relative;
  margin: 0 0 40px;
  transition: all 0.2s;
}

.code-box:target {
  border: 1px solid #1890ff;
}

.code-box-demo {
  border-bottom: 1px solid #ebedf0;
  padding: 20px 25px 30px;
  color: rgba(0, 0, 0, 0.65);
}

.code-box-meta.markdown {
  position: relative;
  padding: 18px 32px;
  border-radius: 0 0 2px 2px;
  transition: background-color 0.4s;
  width: 100%;
}

.markdown {
  color: #314659;
  line-height: 2;
}

.code-box > .code-box-meta > h3 {
  position: absolute;
  top: -17px;
  padding: 1px 8px;
  margin-left: -8px;
  color: #777;
  border-radius: 2px 2px 0 0;
  background: #fff;
  width: auto;
}

.code-box > .code-box-meta > button {
  position: absolute;
  top: 10px;
  right: 10px;
  font-weight: bold;
  color: #999;
}

.code-box > .code-box-meta > button:hover {
  color: #333;
}

.code-box > .code-box-code {
  border-top: 1px dashed #ebedf0;
  position: relative;
}

.code-box > .code-box-code > i {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 14px;
  cursor: pointer;
}

.code-box > .code-box-code > i:hover {
  font-weight: bold;
}

.code-box > .code-box-code > pre {
  margin: 0 40px 0 20px;
}

.code-box-meta h3, section.code-box-meta p {
  margin: 0;
  width: 98%;
}

.markdown .anchor {
  opacity: 0;
  transition: opacity 0.3s ease;
  margin-left: 8px;
}

.markdown .anchor:hover {
  opacity: 1;
}

a {
  color: #1890ff;
  background-color: transparent;
  text-decoration: none;
  outline: none;
  cursor: pointer;
  transition: color 0.3s;
  -webkit-text-decoration-skip: objects;
}

*, *::before, *::after {
  box-sizing: border-box;
}
</style>