<template>
  <div class="eagle-code-snippet">
    <div class="eagle-code-snippet--demo">
      <slot name="source"></slot>
    </div>
    <div class="eagle-code-snippet--desc">
      <slot name="desc"></slot>
      <span class="eagle-code-snippet--icon-code"
            @click="showCode = !showCode"
            title="查看代码"
      >
        <img v-if="showCode"
             src="@/assets/images/icon/code-open.svg" />
        <img v-else
             src="@/assets/images/icon/code-close.svg" />
      </span>
    </div>
    <eagle-code-collapse>
      <div v-show="showCode"
           class="eagle-code-snippet--code">
        <slot name="code"></slot>
      </div>
    </eagle-code-collapse>
  </div>
</template>

<script>
import EagleCodeCollapse from "./code-collapse"

export default {
  components: { EagleCodeCollapse },
  data() {
    return {
      showCode: false
    };
  }
};
</script>
<style lang="scss">
.eagle-code-snippet {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 16px;
  border-radius: 4px;
  transition: all 0.2s;
  box-shadow: 0 6px 12px -2px #e6e6e6, 0 0 0 1px #f0f2f7;
  background-color: #ffffff;
  text-align: left;
  // element-ui样式冲突
  ul > li {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
  }
}
.eagle-code-snippet--demo {
  box-sizing: border-box;
  padding: 30px 35px;
  color: #333333;
  border-bottom: 1px solid #ebedf0;
}
.eagle-code-snippet--desc {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 12px 50px 12px 20px;
  font-size: 14px;
  transition: background-color 0.4s;
  line-height: 1.5;

  code {
    color: #777398;
    padding: 2px 4px;
    margin: 0 2px;
    background-color: #f5f7fb;
    border-radius: 4px;
    border: 0;
  }
}

.eagle-code-snippet--icon-code {
  position: absolute;
  right: 16px;
  bottom: 13px;
  cursor: pointer;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;

  > img {
    transition: all 0.4s;
    user-select: none;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    max-width: 100%;
    width: 100%;
    vertical-align: baseline;
    box-shadow: none;
  }
}

.eagle-code-snippet--code {
  box-sizing: border-box;
  border-top: 1px solid #ebedf0;

  code {
    background-color: #f5f7fb;
    font-family: Consolas, Menlo, Courier, monospace;
    border: none;
    display: block;
    font-size: 14px;
    padding: 16px 32px;
    line-height: 1.5;
  }

  .hljs {
    padding: 0;
    margin: 0;

    code {
      margin: 0;
    }

  }
}
</style>