<template>
  <div>
    <h2 class="demo-header-text">{{title}}</h2>
    <h2 class="demo-header-text"
        style="font-size:14px">{{subTitle}}</h2>
    <div class="wrap">

      <div class="compoent-area">
        <slot></slot>
      </div>
      <div class="code-control"
           @mouseleave="mouseHandler('leave')"
           @mouseenter="mouseHandler('enter')">
        <div class="content"
             @click.stop.prevent="expandCodeHandler"
             :class="showCode?'is-active':''">
          <i class="el-icon-caret-bottom"></i>
          <transition name="slide-fade">
            <span class="show-text"
                  v-show="showCode">{{expandCode?'隐藏代码':'显示代码'}}</span>
          </transition>
        </div>
      </div>
      <el-collapse-transition>
        <slot name="code-area">
          <section class="code-box-code"
                   v-show="expandCode">
            <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>
        </slot>
      </el-collapse-transition>
    </div>
  </div>
</template>

<script>
export default {
  name: 'show-code',
  data () {
    return {
      showCode: false,
      expandCode: false
    }
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    subTitle: {
      type: String,
      default: ''
    },
    formatCode: {
      type: String,
      default: ''
    }
  },
  methods: {
    doCopy () {
      this.$copyText(this.formatCode).then(
        () => {
          this.$message.success('复制成功')
        },
        () => {
          this.$message.error('复制失败')
        }
      )
    },
    async expandCodeHandler () {
      this.expandCode = !this.expandCode
    },
    async mouseHandler (type) {
      const obj = {
        enter: () => {
          this.showCode = true
        },

        leave: () => {
          this.showCode = false
        }
      }
      return obj[type]()
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  width: 1000px;
  border: 1px solid #ebebeb;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  .compoent-area {
    margin: 20px;
  }
  .el-icon-document-copy {
    cursor: pointer;
    margin-right: 20px;
  }
  .code-box-code {
    width: 100%;
    display: flex;
  }
  pre {
    flex: 1;
    min-height: 100px;
  }
}
.code-control {
  border-top: 1px solid #eaeefb;
  height: 44px;
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  align-self: flex-end;

  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  text-align: center;
  margin-top: -1px;
  color: #d3dce6;
  cursor: pointer;
  position: relative;
  .is-active {
    .el-icon-caret-bottom {
      color: #409eff;
    }
  }
  .el-icon-caret-bottom {
    font-size: 20px;
  }
  .content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .slide-fade-enter-active,
  .slide-fade-leave-active {
    transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
  }

  .slide-fade-enter,
  .slide-fade-leave-to {
    transform: translateX(30px);
  }
  .show-text {
    color: #409eff;
  }
}
</style>
