<template>
  <view class="collapse-panel">
    <view 
      class="collapse-header"
      @click="toggleCollapse"
    >
      <view class="title">
        <uni-icons type="gear-filled" size="18" color="white" />
        <text>{{ title }}</text>
      </view>
      <view class="header-right">
        <view class="extra" @click.stop>
          <slot name="extra"></slot>
        </view>
        <view 
          class="arrow"
          :class="{ 'arrow-open': isOpen }"
        >
          <uni-icons type="arrowright" size="18" color="white" />
        </view>
      </view>
    </view>
    
    <view 
      class="collapse-content"
      :style="contentStyle"
    >
      <slot />
    </view>
  </view>
</template>

<script>
export default {
  // 定义组件接收的属性
  props: {
    title: {
      type: String,
      required: true
    },
    duration: {
      type: Number,
      default: 300
    },
    isBorder: {
      type: Boolean,
      default: true
    }
  },
  // 响应式数据
  data() {
    return {
      isOpen: false,
      contentHeight: 0
    };
  },
  // 计算属性
  computed: {
    contentStyle() {
      return {
        'max-height': this.isOpen ? '1000px' : '0',
        'transition': `all ${this.duration}ms ease`,
        'opacity': this.isOpen ? 1 : 0
      };
    }
  },
  // 方法定义
  methods: {
    toggleCollapse() {
      this.isOpen = !this.isOpen;
    }
  }
};
</script>

<style lang="scss" scoped>
.collapse-panel {
  margin: 16rpx 0;
  border-radius: 8rpx;
  overflow: hidden;
  border: 1rpx solid #eee;

  .collapse-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx;
    background-color: #2bf;
    color: white;
    transition: background-color 0.2s;

    &:active {
      background-color: #f1f3f5;
    }

    .title {
      font-size: 32rpx;
      font-weight: 500;
      color: white;
      display: flex;
      align-items: center;
      gap: 12rpx;
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 16rpx;
    }

    .extra {
      display: flex;
      align-items: center;
    }

    .arrow {
      transition: transform 0.3s ease;
      color: white;

      &-open {
        transform: rotate(90deg);
      }
    }
  }

  .collapse-content {
    overflow: hidden;
    padding: 0 24rpx;
    background-color: #fff;
    
    // 展开动画
    &-enter-active,
    &-leave-active {
      transition: all 0.3s ease;
    }

    &-enter-from,
    &-leave-to {
      opacity: 0;
      max-height: 0;
    }
  }
}
</style>
    