<template>
  <div class="xt-grouped-form-card" :class="{ 'is-collapsed': isCollapsed }">
    <div class="card-header" @click="handleToggle">
      <div class="header-content">
        <div class="header-main">
          <h3 class="card-title">{{ title }}</h3>
          <p class="card-desc" v-if="desc">{{ desc }}</p>
        </div>
        
        <!-- 右上角按钮槽位 -->
        <div class="header-actions">
          <slot name="actions">
            <el-button
              type="text"
              size="small"
              icon="el-icon-refresh"
              @click.stop="handleReset"
              class="action-btn reset-btn"
              title="重置表单"
            >
              重置
            </el-button>
            <el-button
              type="text"
              size="small"
              icon="el-icon-cpu"
              @click.stop="handleTest"
              class="action-btn test-btn"
              title="测试配置"
            >
              测试
            </el-button>
          </slot>
          
          <!-- 折叠按钮 -->
          <el-button
            v-if="collapsible"
            type="text"
            size="small"
            @click.stop="handleToggle"
            class="collapse-btn"
            :title="isCollapsed ? '展开' : '折叠'"
          >
            <i class="el-icon-arrow-down collapse-icon" :class="{ 'is-collapsed': isCollapsed }"></i>
          </el-button>
        </div>
      </div>
    </div>

    <!-- 表单内容区域 -->
    <transition name="collapse" @enter="enter" @leave="leave">
      <div class="card-content" v-show="!isCollapsed" ref="content">
        <div class="content-inner">
          <slot></slot>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'XtGroupedFormCard',
  
  props: {
    // 卡片标题
    title: {
      type: String,
      required: true
    },
    
    // 卡片描述
    desc: {
      type: String,
      default: ''
    },
    
    // 是否可折叠
    collapsible: {
      type: Boolean,
      default: true
    },
    
    // 默认是否折叠
    defaultCollapsed: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      isCollapsed: this.defaultCollapsed
    }
  },

  methods: {
    handleToggle() {
      if (!this.collapsible) return
      
      this.isCollapsed = !this.isCollapsed
      this.$emit('toggle', this.isCollapsed)
    },

    handleTest() {
      this.$emit('test')
    },

    handleReset() {
      this.$confirm('确定要重置此分组的所有表单项吗？', '重置确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('reset')
        this.$message.success('表单已重置')
      }).catch(() => {
        // 用户取消
      })
    },

    // 折叠动画 - 进入
    enter(el) {
      el.style.height = '0'
      el.style.overflow = 'hidden'
      
      // 强制重排
      el.offsetHeight
      
      el.style.height = el.scrollHeight + 'px'
      el.style.transition = `height ${this.$options.transitionDuration || 300}ms ease-out`
      
      setTimeout(() => {
        el.style.height = 'auto'
        el.style.overflow = 'visible'
      }, this.$options.transitionDuration || 300)
    },

    // 折叠动画 - 离开
    leave(el) {
      el.style.height = el.scrollHeight + 'px'
      el.style.overflow = 'hidden'
      
      // 强制重排
      el.offsetHeight
      
      el.style.height = '0'
      el.style.transition = `height ${this.$options.transitionDuration || 300}ms ease-out`
    }
  },

  // 组件选项
  transitionDuration: 300
}
</script>

<style lang="scss" scoped>
.xt-grouped-form-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--spacing-6);
  overflow: hidden;
  transition: all var(--duration-200) var(--ease-out);

  &:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-1px);
  }

  &.is-collapsed {
    .card-header {
      border-bottom: none;
    }
  }

  .card-header {
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border-secondary);
    padding: var(--spacing-5) var(--spacing-6);
    cursor: pointer;
    transition: all var(--duration-200) var(--ease-out);
    position: relative;

    &:hover {
      background: var(--color-bg-secondary);
    }

    .header-content {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--spacing-4);
    }

    .header-main {
      flex: 1;
      min-width: 0;

      .card-title {
        color: var(--color-text-primary);
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
        line-height: var(--line-height-tight);
        margin: 0 0 var(--spacing-1) 0;
        display: flex;
        align-items: center;
        gap: var(--spacing-2);

        &::before {
          content: '';
          width: 4px;
          height: 16px;
          background: var(--color-primary);
          border-radius: var(--radius-full);
          flex-shrink: 0;
        }
      }

      .card-desc {
        color: var(--color-text-tertiary);
        font-size: var(--font-size-sm);
        line-height: var(--line-height-normal);
        margin: 0;
      }
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: var(--spacing-2);
      flex-shrink: 0;

      .action-btn {
        color: var(--color-text-tertiary);
        padding: var(--spacing-2);
        border-radius: var(--radius-md);
        transition: all var(--duration-200) var(--ease-out);

        &:hover {
          background: var(--color-primary-50);
          color: var(--color-primary);
          transform: translateY(-1px);
        }

        &.reset-btn:hover {
          color: var(--color-warning);
          background: var(--color-warning-50);
        }

        &.test-btn:hover {
          color: var(--color-success);
          background: var(--color-success-50);
        }
      }

      .collapse-btn {
        color: var(--color-text-tertiary);
        padding: var(--spacing-2);
        border-radius: var(--radius-full);
        transition: all var(--duration-200) var(--ease-out);
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
          background: var(--color-bg-tertiary);
          color: var(--color-text-primary);
        }

        .collapse-icon {
          transition: transform var(--duration-300) var(--ease-out);
          font-size: var(--font-size-base);

          &.is-collapsed {
            transform: rotate(-90deg);
          }
        }
      }
    }
  }

  .card-content {
    background: var(--color-bg-card);

    .content-inner {
      padding: var(--spacing-6);

      // 表单项样式优化
      ::v-deep .el-form {
        .el-form-item {
          margin-bottom: var(--spacing-5);

          &:last-child {
            margin-bottom: 0;
          }

          .el-form-item__label {
            color: var(--color-text-primary);
            font-weight: var(--font-weight-medium);
            line-height: var(--line-height-normal);
          }

          .el-form-item__content {
            .el-input,
            .el-select,
            .el-textarea {
              width: 100%;
            }
          }
        }

        // 表单分组
        .form-group {
          background: var(--color-bg-secondary);
          border-radius: var(--radius-lg);
          padding: var(--spacing-4);
          margin-bottom: var(--spacing-5);

          .form-group-title {
            color: var(--color-text-primary);
            font-size: var(--font-size-base);
            font-weight: var(--font-weight-medium);
            margin: 0 0 var(--spacing-3) 0;
            padding-bottom: var(--spacing-2);
            border-bottom: 1px solid var(--color-border-secondary);
          }
        }
      }
    }
  }
}

// 折叠动画
.collapse-enter-active,
.collapse-leave-active {
  transition: all 300ms ease-out;
  overflow: hidden;
}

.collapse-enter,
.collapse-leave-to {
  height: 0;
  opacity: 0;
}

// 响应式设计
@media (max-width: 768px) {
  .xt-grouped-form-card {
    margin-bottom: var(--spacing-4);
    border-radius: var(--radius-lg);

    .card-header {
      padding: var(--spacing-4);

      .header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-3);
      }

      .header-main {
        .card-title {
          font-size: var(--font-size-base);
        }

        .card-desc {
          font-size: var(--font-size-xs);
        }
      }

      .header-actions {
        align-self: flex-end;
      }
    }

    .card-content {
      .content-inner {
        padding: var(--spacing-4);
      }
    }
  }
}

// 暗色主题优化
html.dark {
  .xt-grouped-form-card {
    .card-header {
      &:hover {
        background: var(--color-bg-tertiary);
      }
    }
  }
}

// 加载状态
.xt-grouped-form-card.is-loading {
  .card-header {
    position: relative;
    overflow: hidden;

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
      animation: loading-shimmer 1.5s infinite;
    }
  }
}

@keyframes loading-shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
</style>
