<template>
  <div class="code-demo">
    <h3 id="ji-chu-yong-fa">
      {{title}}
    </h3>
    <p>{{desc}}</p>
    <div class="demo-block demo-zh-CN demo-collapse">
      <div class="source">
        <slot></slot>
      </div>
      <pre
        class="language-css"
        v-html="Prism.highlight(code, Prism.languages.html, 'html')"
        v-show="showCode"
      ></pre>
      <div class="demo-block-control" style="left: 0px;" @click="showCode = !showCode">
        <i :class="{'el-icon-caret-bottom': !showCode, 'el-icon-caret-top': showCode}"></i>
        <span style>{{ showCode ? '隐藏代码' : '显示代码' }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import Prism from "prismjs";
import "prismjs/themes/prism-okaidia.css";

export default {
  name: "MMCCodeDemo",
  props: {
    title: {
      type: String,
      default: "",
    },
    desc: {
      type: String,
      default: "",
    },
    code: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      Prism,
      showCode: false,
    };
  },
};
</script>

<style lang="scss" scoped>
.code-demo {
  text-align: left;
}

p {
  font-size: 14px;
  color: #5e6d82;
  line-height: 1.5em;
}

h3 {
  margin: 55px 0 20px;
  font-weight: 400;
  color: #1f2f3d;
  font-size: 22px;
}
.demo-block {
  border: 1px solid #ebebeb;
  border-radius: 3px;
  transition: 0.2s;

  &:hover {
    /* box-shadow: 0 0 8px 0 rgb(232 237 250 0.6),
      0 2px 4px 0 rgba(232 237 250 0.5); */
  }

  .source {
    padding: 24px;
  }

  .demo-block-control {
    border-top: 1px solid #eaeefb;
    height: 44px;
    box-sizing: border-box;
    background-color: #fff;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    text-align: center;
    margin-top: -1px;
    color: #d3dce6;
    cursor: pointer;
    position: relative;

    i {
      font-size: 16px;
      line-height: 44px;
      transition: 0.3s;
    }

    > span {
      font-size: 14px;
      line-height: 44px;
      transition: 0.3s;
      display: inline-block;
    }

    .control-button {
      line-height: 26px;
      position: absolute;
      top: 0;
      right: 0;
      font-size: 14px;
      padding-left: 5px;
      padding-right: 25px;
    }
  }
}
</style>