<template>
  <div class="xt-sticky-action-bar">
    <div class="action-bar-container">
      <!-- 左侧状态信息 -->
      <div class="status-info">
        <div class="status-item" v-if="dirtyCount > 0">
          <i class="el-icon-edit-outline status-icon dirty"></i>
          <span class="status-text">{{ dirtyCount }} 项变更</span>
        </div>
        <div class="status-item" v-if="errorCount > 0">
          <i class="el-icon-warning-outline status-icon error"></i>
          <span class="status-text">{{ errorCount }} 项错误</span>
        </div>
        <div class="status-item" v-if="dirtyCount === 0 && errorCount === 0">
          <i class="el-icon-circle-check status-icon success"></i>
          <span class="status-text">无变更</span>
        </div>
      </div>

      <!-- 右侧操作按钮 -->
      <div class="action-buttons">
        <el-button
          size="small"
          :loading="loading.save"
          :disabled="dirtyCount === 0"
          @click="handleSave"
          class="action-btn draft-btn"
        >
          <i class="el-icon-document" v-if="!loading.save"></i>
          保存草稿
        </el-button>

        <el-button
          type="info"
          size="small"
          :loading="loading.test"
          @click="handleTest"
          class="action-btn test-btn"
        >
          <i class="el-icon-cpu" v-if="!loading.test"></i>
          测试全部
        </el-button>

        <el-button
          type="primary"
          size="small"
          :loading="loading.publish"
          :disabled="errorCount > 0"
          @click="handlePublish"
          class="action-btn publish-btn"
        >
          <i class="el-icon-upload2" v-if="!loading.publish"></i>
          发布
        </el-button>

        <el-dropdown
          trigger="click"
          placement="top-end"
          @command="handleDropdownCommand"
          class="more-actions"
        >
          <el-button
            size="small"
            :loading="loading.rollback"
            class="action-btn more-btn"
          >
            <i class="el-icon-more" v-if="!loading.rollback"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="rollback" icon="el-icon-refresh-left">
              回滚到上个版本
            </el-dropdown-item>
            <el-dropdown-item command="reset" icon="el-icon-delete">
              重置所有变更
            </el-dropdown-item>
            <el-dropdown-item command="export" icon="el-icon-download">
              导出配置
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <!-- 进度条 -->
    <div class="progress-bar" v-if="showProgress">
      <div class="progress-fill" :style="{ width: progressPercent + '%' }"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'XtStickyActionBar',
  
  props: {
    // 变更项数量
    dirtyCount: {
      type: Number,
      default: 0
    },
    
    // 错误项数量
    errorCount: {
      type: Number,
      default: 0
    },
    
    // 加载状态
    loading: {
      type: Object,
      default: () => ({
        save: false,
        test: false,
        publish: false,
        rollback: false
      })
    },
    
    // 是否显示进度条
    showProgress: {
      type: Boolean,
      default: false
    },
    
    // 进度百分比
    progressPercent: {
      type: Number,
      default: 0,
      validator: val => val >= 0 && val <= 100
    }
  },

  methods: {
    handleSave() {
      this.$emit('save')
    },

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

    handlePublish() {
      if (this.errorCount > 0) {
        this.$message.warning('请先修复所有错误后再发布')
        return
      }
      this.$emit('publish')
    },

    handleDropdownCommand(command) {
      switch (command) {
        case 'rollback':
          this.$emit('rollback')
          break
        case 'reset':
          this.$emit('reset')
          break
        case 'export':
          this.$emit('export')
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.xt-sticky-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-bg-card);
  border-top: 1px solid var(--color-border-primary);
  box-shadow: var(--shadow-xl);
  backdrop-filter: blur(8px);
  z-index: var(--z-index-sticky);
  transition: all var(--duration-200) var(--ease-out);

  .action-bar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4) var(--spacing-6);
    max-width: 1200px;
    margin: 0 auto;
  }

  .status-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);

    .status-item {
      display: flex;
      align-items: center;
      gap: var(--spacing-2);
      padding: var(--spacing-2) var(--spacing-3);
      background: var(--color-bg-tertiary);
      border-radius: var(--radius-full);
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-medium);
      transition: all var(--duration-200) var(--ease-out);

      .status-icon {
        font-size: var(--font-size-base);
        
        &.dirty {
          color: var(--color-warning);
        }
        
        &.error {
          color: var(--color-danger);
        }
        
        &.success {
          color: var(--color-success);
        }
      }

      .status-text {
        color: var(--color-text-primary);
      }
    }
  }

  .action-buttons {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);

    .action-btn {
      font-weight: var(--font-weight-medium);
      border-radius: var(--radius-lg);
      transition: all var(--duration-200) var(--ease-out);
      position: relative;
      overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
        transition: left var(--duration-300) var(--ease-out);
      }

      &:hover::before {
        left: 100%;
      }

      i {
        margin-right: var(--spacing-1);
      }

      &.draft-btn:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
      }

      &.test-btn:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
      }

      &.publish-btn {
        &:not(:disabled):hover {
          transform: translateY(-1px);
          box-shadow: var(--shadow-md);
        }

        &:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }
      }

      &.more-btn {
        padding: var(--spacing-2);
        width: 32px;
        border-radius: var(--radius-full);
        
        &:hover {
          background: var(--color-bg-tertiary);
          transform: rotate(90deg);
        }
      }
    }
  }

  .more-actions {
    ::v-deep .el-dropdown-menu {
      background: var(--color-bg-card);
      border: 1px solid var(--color-border-primary);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-xl);
      padding: var(--spacing-2);

      .el-dropdown-menu__item {
        color: var(--color-text-primary);
        border-radius: var(--radius-md);
        padding: var(--spacing-2) var(--spacing-3);
        margin-bottom: var(--spacing-1);
        transition: all var(--duration-150) var(--ease-out);

        &:hover {
          background: var(--color-primary-50);
          color: var(--color-primary);
        }

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

        i {
          color: inherit;
        }
      }
    }
  }

  .progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-bg-tertiary);
    overflow: hidden;

    .progress-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
      transition: width var(--duration-300) var(--ease-out);
      position: relative;

      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        animation: shimmer 2s infinite;
      }
    }
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .xt-sticky-action-bar {
    .action-bar-container {
      padding: var(--spacing-3) var(--spacing-4);
      flex-direction: column;
      gap: var(--spacing-3);
    }

    .status-info {
      order: 2;
      justify-content: center;
    }

    .action-buttons {
      order: 1;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--spacing-2);

      .action-btn {
        font-size: var(--font-size-xs);
        padding: var(--spacing-2) var(--spacing-3);
      }
    }
  }
}

// 暗色主题特殊优化
html.dark {
  .xt-sticky-action-bar {
    background: rgba(31, 41, 55, 0.95);
    backdrop-filter: blur(12px);
  }
}
</style>
