<template>
  <div class="component-item-content">
    <fieldset class="component-item-content-hgroup">
      <legend class="component-item-content-title">
        <slot name="title"></slot>
      </legend>
      <div class="component-item-content-subtitle">
        <slot name="subtitle"></slot>
      </div>
    </fieldset>
    <div class="component-item-content-main">
      <article class="component-item-preview">
        <slot name="preview"></slot>
      </article>
      <article class="component-item-code">
        <div class="code-view" v-if="visible">
          <slot name="code"></slot>
        </div>
        <div class="code-toggle" @click="toggleCode">
          <span v-if="visible">隐藏代码</span>
          <span v-else>显示代码</span>
        </div>
      </article>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'svExample',
    data () {
      return {
        visible: false
      }
    },
    methods: {
      toggleCode () {
        this.visible = !this.visible
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
</style>
