<template>
  <div class="detail_tab_pane" :class="{noneTitle:titleHidden}" ref="detailTabPane">
    <slot name="tip"></slot>
    <div class="pane_item_title" v-if="!titleHidden">
      <span>{{label}}</span>
      <slot name="tipsmall"></slot>
    </div>
    <div class="pane_item_content">
      <slot></slot>
    </div>
  </div>

</template>

<script>
  import transfer from '../../util/eventTransfer'
    export default {
        name: "enoDetailPane",
        data() {
            return {
                currentPane: 0
            }
        },
        props: {
            'label':{
                type:String
            },
            'titleHidden':{
                type:Boolean
            }
        },
        created() {

        },
        mounted() {
            transfer.$on('to-detail-pane',data=>{
                this.currentPane=data;
            });
            setTimeout(()=>{
              transfer.$emit('to-detailTab-scrollTop',this.$refs.detailTabPane);
            },500)


        }
    }
</script>

<style lang="less" scoped>
  .detail_tab_pane {
    padding-top: 40px;
    &.noneTitle{
      padding-top: 0;
      padding-bottom: 40px;
      border-bottom: 1px solid #ebebeb;
      .pane_item_content{
        padding: 24px 0 0;
      }
    }
    .pane_item_title {
      position: relative;
      font-size: 16px;
      line-height: 1;
      span {
        display: inline-block;
        text-align-last: justify;
        padding-left: 8px;
        font-size: 16px;
        font-weight: bold;
      }

      &:before {
        content: "";
        width: 3px;
        height: 16px;
        background-color: @mainColor;
        position: absolute;
        left: 0;
        top: 0;
      }
    }

    .pane_item_content {
      padding: 24px 20px 0;
    }

    .detail_tab_pane_info {
      margin-bottom: 40px;

      .pane_info_photo {
        float: left;
      }

      .pane_info_body {
        width: 100%;
        padding-left: 280px;
        padding-top: 10px;
        min-height: 264px;

        .pane_info_name {
          font-size: 18px;
          padding-bottom: 10px;
          border-bottom: 1px solid @borderColor;

          .pane_name_option {
            float: right;
          }
        }

        .pane_info_items {
          padding-top: 10px;
          font-size: 12px;
          line-height: 30px;
          .pane_info_item {
          }
        }
      }
    }

    .edit_tip {
      font-size: 12px;
      padding: 10px 20px;
      background-color: #f2fff2;

      span {
        &:nth-of-type(1) {
          font-size: 14px;
          color: @mainColor;
        }
      }
    }
  }
</style>
