<template>
  <div class="fbg-demo">
    <div class="fbg-demo-container" :style="cssStyle">
      <slot></slot>
    </div>
    <pre class="fbg-demo-code" ref="codeBoxRef"><code v-text='code' ref="codeRef"></code>
    </pre>
    <div class="fbg-demo-tools">
      <p @click="toggle"><span >{{showCode?'隐藏代码':'显示代码'}}</span></p>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    code: {
      type: String,
      default: ''
    },
    cssStyle: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showCode: false
    }
  },
  methods: {
    toggle() {
      if (this.showCode) {
        this.$refs.codeBoxRef.style.height = '0px';
        this.showCode = false;
      } else {
        this.$refs.codeBoxRef.style.height = this.$refs.codeRef.offsetHeight+15+'px';
        this.showCode = true;
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.fbg-demo {
  border: 1px solid #dfdfdf;
  border-radius: 5px;
  box-shadow: 0px 1px 3px #ddd;
  &-code {
    height: 0px;
    overflow: hidden;
    transition: height 0.6s;
    background: #fafafa;
  }
  &-container {
    padding: 20px;
    border-bottom: 1px solid #ddd;
    overflow-y: visible;
  }
  &-tools {
    padding: 8px 12px;
    text-align:center;
    color: #999;
    cursor: pointer;
    &:hover {
      color: #409eff;
    }
  }
}
</style>