<template>
  <!-- 可折叠面板标题 -->
  <keep-alive>
      <div class="collapseTitle-box">
        <!-- 头部标题 -->
        <div class="collapseTitle-header">
          <div class="flex-spaceB" style="width:100%">
            <div>
              <div class="collapseTitle-bar" :style="[{width:barWidth + 'px'}]"></div>
              <div :ref="title" class="collapseTitle-name">{{title}}</div>
            </div>
            <i v-if="isCollapse" class="iconfont iconycxiala icon-select" :class="{ iconOperation: visible }" @click.stop="toggle"></i>
          </div>
        </div>
        <!-- 折叠内容 -->
        <el-collapse-transition v-if="isCollapse">
          <div v-show="!visible">
            <slot/>
          </div>
        </el-collapse-transition>
      </div>
  </keep-alive>
</template>

<script>
export default {
  name: 'collapseTitle',
  components: {
  },
  props: {
    // 标题
    title: {
      type: String,
      require: false,
      default () {
        return '标题'
      }
    },
    // 是否缓存
    cache: {
      type: Boolean,
      default () {
        return false
      }
    },
    // 是否折叠
    isCollapse: {
      type: Boolean,
      default () {
        return false
      }
    }
  },
  data () {
    return {
      barWidth: 0, // 下横线宽度
      visible: false // 显隐控件
    }
  },
  mounted () {
    this.getWidth()
  },
  activated () {
    if (this.cache) {
      this.getWidth()
    }
  },
  methods: {
    // 获取标题文本宽度
    getWidth () {
      this.$nextTick(() => {
        // 使下横线宽度与文本宽度保持一致
        let title = this.$refs[this.title].getBoundingClientRect()
        console.log(title)
        this.barWidth = title.width
      })
    },
    // 下拉、收起操作
    toggle () {
      this.visible = !this.visible
    }
  }
}
</script>
<style lang="scss" scoped>
.collapseTitle-box{
  .collapseTitle-header {
    width: 100%;
    margin: 0 0 10px 0;
    border-bottom: 2px solid #e0e8f5;
    padding: 0px 0px 10px 0px;
    position: relative;
    .collapseTitle-bar{
      position: absolute;
      width: 70px;
      height: 2px;
      background: #1890ff;
      bottom: -2px;
      left: 0;
    }
    .collapseTitle-name{
      font-size:14px;color:#6e778f
    }
    .iconOperation {
      transform: rotate(-90deg);
    }
    .icon-select{
      color:#6e778f;font-size: 16px
    }
    .icon-select:hover {
      color:  #1890ff !important;
      transition: transform .3s;
    }
  }
}
</style>
