<template>
  <el-collapse-item
    :title="title"
    :name="name"
    :disabled="disabled"
    :class="[isMobile ? 'mobile-collapse-item' : '']"
  >
    <slot v-if="isMobile" slot="title" name="title">
      {{ title }}
      <el-button
        size="small"
        type="text"
        icon="el-icon-caret-bottom"
      ></el-button>
    </slot>
    <slot v-else slot="title" name="title"></slot>
    <slot></slot>
  </el-collapse-item>
</template>
<script>
  import mobileMode from '@/mixins/mobileMode.js'
  export default {
    name: 'HtCollapseItem',
    mixins: [mobileMode],
    props: {
      title: String,
      name: {
        type: [String, Number],
        default() {
          return this._uid
        },
      },
      disabled: Boolean,
    },
  }
</script>

<style lang="scss" scoped>
  /* 移动端折叠面板样式 */
  .mobile-collapse-item {
    ::v-deep.el-collapse-item__arrow {
      display: none;
    }
    /* 头部穿透，让头部内容在两端，本身固有属性是flex */
    ::v-deep.el-collapse-item__header {
      justify-content: space-between;
      font-size: 16px;
      color: #262626;
      padding: 0 16px;
      margin-bottom: 0 !important;
    }
  }
</style>
<style lang="scss">
  .mobile-collapse-item {
    .el-icon-caret-bottom {
      font-size: 22px;
      color: #8c8c8c;
    }
    .is-active .el-icon-caret-bottom {
      transform: rotate(180deg);
    }
  }
  .sub-div-title {
    overflow: hidden;
    width: calc(100% - 150px);
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
    max-width: 500px;
  }
  .sub-div-title-mobile {
    overflow: hidden;
    width: calc(100vw - 170px);
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .sun-record-title-mobile {
    span {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      width: calc(100vw - 100px);
      display: block;
    }
  }
</style>
