<template>
  <div class="custom-collapse">
    <div
      class="collapse-header"
      @click="toggleCollapse"
      :class="{ 'is-active': isActive }"
    >
      <span>{{ title }}</span>
<!--      <div class="flex-center-left mb16">-->
<!--        <img class="item-size" src="../../assets/images/account-item.png" alt="">-->
<!--        <div class="card-title">{{ title }}</div>-->
<!--      </div>-->
      <i class="el-icon-arrow-right arrow" :class="{ 'is-active': isActive }"></i>
    </div>
    <div
      class="collapse-content"
      :style="{ maxHeight: contentHeight }"
      ref="content"
    >
      <div class="content-inner">
        <slot></slot>
      </div>
      <div class="gradient-overlay" v-show="!isActive">
        <button class="expand-button" @click="expandContent">
          <span>{{ $t('common.expandMore') }}</span>
          <i class="el-icon-arrow-down"></i>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: 'Collapse Title'
    },
    minHeight: {
      type: Number,
      default: 100 // 增加默认最小高度
    }
  },
  data() {
    return {
      isActive: false,
      contentHeight: this.minHeight + 'px'
    }
  },
  methods: {
    toggleCollapse() {
      this.setCollapsedState(!this.isActive)
    },
    expandContent() {
      this.setCollapsedState(true)
    },
    setCollapsedState(isExpanded) {
      this.isActive = isExpanded
      if (this.isActive) {
        this.contentHeight = this.$refs.content.scrollHeight + 'px'
      } else {
        this.contentHeight = this.minHeight + 'px'
      }
      this.$emit('toggle', this.isActive)
    }
  }
}
</script>

<style scoped>
.custom-collapse {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
}

.collapse-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  cursor: pointer;
}

.collapse-header.is-active {
  border-bottom: 1px solid #ebeef5;
}

.arrow {
  transition: transform 0.3s;
}

.arrow.is-active {
  transform: rotate(90deg);
}

.collapse-content {
  position: relative;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.content-inner {
  padding: 10px;
}

.gradient-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px; /* 增加高度以容纳按钮 */
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.9) 50%, rgba(255,255,255,1));
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.expand-button {
  background-color: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 20px;
  padding: 5px 15px;
  margin-bottom: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.3s;
}

.expand-button:hover {
  background-color: #f5f7fa;
}

.expand-button span {
  margin-right: 5px;
}

.expand-button i {
  font-size: 12px;
}
.item-size {
  width: 14px;
  height: 14px;
  margin-right: 6px;
}
.card-title {
  font-family: Arial, Arial;
  font-size: 16px;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.85);
  line-height: 18px;
}
.flex-center-left {
  display: flex;
  align-items: center;
  justify-content: left;
}
.mb16 {
  margin-bottom: 16px;
}
</style>

<!--<template>-->
<!--  <div class="custom-collapse">-->
<!--    <div-->
<!--      class="collapse-header"-->
<!--      @click="toggleCollapse"-->
<!--      :class="{ 'is-active': isActive }"-->
<!--    >-->
<!--      <span>{{ title }}</span>-->
<!--      <i class="el-icon-arrow-right arrow" :class="{ 'is-active': isActive }"></i>-->
<!--    </div>-->
<!--    <div-->
<!--      class="collapse-content"-->
<!--      :style="{ maxHeight: contentHeight }"-->
<!--      ref="content"-->
<!--    >-->
<!--      <div class="content-inner">-->
<!--        <slot></slot>-->
<!--      </div>-->
<!--      <div class="gradient-overlay" v-show="!isActive">-->
<!--        <button class="expand-button" @click="expandContent">-->
<!--          <span>展开更多</span>-->
<!--          <i class="el-icon-arrow-down"></i>-->
<!--        </button>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import { isNumber } from 'lodash'-->

<!--export default {-->
<!--  props: {-->
<!--    title: {-->
<!--      type: String,-->
<!--      default: 'Collapse Title'-->
<!--    },-->
<!--    minHeight: {-->
<!--      type: Number | String,-->
<!--      default: 100-->
<!--    }-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      isActive: false,-->
<!--      contentHeight: isNumber(this.minHeight) ? this.minHeight + 'px' : this.minHeight-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    toggleCollapse() {-->
<!--      this.setCollapsedState(!this.isActive)-->
<!--    },-->
<!--    expandContent() {-->
<!--      this.setCollapsedState(true)-->
<!--    },-->
<!--    setCollapsedState(isExpanded) {-->
<!--      this.isActive = isExpanded-->
<!--      this.$nextTick(() => {-->
<!--        if (this.isActive) {-->
<!--          this.contentHeight = this.$refs.content.scrollHeight + 'px'-->
<!--        } else {-->
<!--          this.contentHeight = isNumber(this.minHeight) ? this.minHeight + 'px' : this.minHeight-->
<!--        }-->
<!--        this.emitToggleWithHeight()-->
<!--      })-->
<!--    },-->
<!--    emitToggleWithHeight() {-->
<!--      const height = this.$refs.content.offsetHeight-->
<!--      // this.$emit('toggle', this.isActive, height)-->
<!--      this.$emit('toggle', this.isActive, this.contentHeight)-->
<!--    }-->
<!--  },-->
<!--  mounted() {-->
<!--    this.$nextTick(() => {-->
<!--      this.emitToggleWithHeight()-->
<!--    })-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->
<!--.custom-collapse {-->
<!--  border: 1px solid #ebeef5;-->
<!--  border-radius: 4px;-->
<!--  overflow: hidden;-->
<!--}-->

<!--.collapse-header {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  align-items: center;-->
<!--  padding: 10px;-->
<!--  background-color: #f5f7fa;-->
<!--  cursor: pointer;-->
<!--}-->

<!--.collapse-header.is-active {-->
<!--  border-bottom: 1px solid #ebeef5;-->
<!--}-->

<!--.arrow {-->
<!--  transition: transform 0.3s;-->
<!--}-->

<!--.arrow.is-active {-->
<!--  transform: rotate(90deg);-->
<!--}-->

<!--.collapse-content {-->
<!--  position: relative;-->
<!--  overflow: hidden;-->
<!--  transition: max-height 0.3s ease-out;-->
<!--}-->

<!--.content-inner {-->
<!--  padding: 10px;-->
<!--}-->

<!--.gradient-overlay {-->
<!--  position: absolute;-->
<!--  bottom: 0;-->
<!--  left: 0;-->
<!--  right: 0;-->
<!--  height: 60px;-->
<!--  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.9) 50%, rgba(255,255,255,1));-->
<!--  display: flex;-->
<!--  align-items: flex-end;-->
<!--  justify-content: center;-->
<!--}-->

<!--.expand-button {-->
<!--  background-color: #ffffff;-->
<!--  border: 1px solid #dcdfe6;-->
<!--  border-radius: 20px;-->
<!--  padding: 5px 15px;-->
<!--  margin-bottom: 10px;-->
<!--  cursor: pointer;-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  transition: all 0.3s;-->
<!--}-->

<!--.expand-button:hover {-->
<!--  background-color: #f5f7fa;-->
<!--}-->

<!--.expand-button span {-->
<!--  margin-right: 5px;-->
<!--}-->

<!--.expand-button i {-->
<!--  font-size: 12px;-->
<!--}-->
<!--</style>-->
