<template>
  <div class="auto-save-container" :style="'width:' + dataWidth">
    <div class="input-wrapper" :class="{ focused: isFocused }">
      <!-- textArea -->
      <textarea ref="textarea" v-if="dataType == 'textarea'" v-model="currentContent" @change="handleTextarea"
        @focus="handleFocus" @blur="handleBlur" :rows="textareaRow" :placeholder="placeholder" class="auto-save-textarea"></textarea>

      <!-- input -->
      <el-input v-model="currentContent" v-if="dataType == 'input'" @change="handleInput" @focus="handleFocus"
        @blur="handleBlur" :placeholder="placeholder"></el-input>

      <!-- select -->
      <el-select v-model="currentContent" v-if="dataType == 'select'" @change="handleSelect" @focus="handleFocus" @blur="handleBlur"
        :placeholder="placeholder">
        <el-option v-for="item in dataSelect" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>

      <transition name="fade">
        <div v-if="isFocused || showStatusIcon" class="status-icon-wrapper" @click="toggleInfoPanel">
          <div class="status-icon" :class="getOverallStatus().status">
            <i :class="getStatusIcon()"></i>
          </div>
        </div>
      </transition>
    </div>

    <!-- 信息面板 -->
    <transition name="slide-fade">
      <div v-if="showInfoPanel" class="info-panel">
        <div class="panel-header">
          <h3>{{ dataName }}</h3>
          <button class="close-btn" @click="showInfoPanel = false">×</button>
        </div>

        <div class="panel-content">
          <!-- 保存状态概览 -->
          <div class="status-overview">
            <div class="overview-item">
              <span class="label">最后保存:</span>
              <span class="value">{{ formatTime(lastSaveTime) }}</span>
            </div>
            <div class="overview-item">
              <span class="label">总体状态:</span>
              <span class="value status-badge" :class="getOverallStatus().status">
                {{ getOverallStatus().text }}
              </span>
            </div>
            <div class="overview-item" v-if="queueStatus.queuedCount > 0">
              <span class="label">离线队列:</span>
              <span class="value warning">{{ queueStatus.queuedCount }} 条待同步</span>
            </div>
          </div>

          <!-- 各存储状态 -->
          <div class="storage-status">
            <h4>存储状态</h4>
            <div class="status-grid">
              <div v-for="(state, type) in storageStates" :key="type" class="status-item" :class="state.status">
                <div class="status-header">
                  <span class="storage-name">{{ getStorageName(type) }}</span>
                  <i :class="getStorageStatusIcon(type)"></i>
                </div>
                <div class="status-details">
                  <div class="status-time" v-if="state.lastSaved">
                    {{ formatTime(state.lastSaved) }}
                  </div>
                  <div class="status-message" v-if="state.error">
                    {{ state.error }}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 历史版本 -->
          <div class="history-section">
            <div class="section-header">
              <h4>历史版本</h4>
              <div class="storage-selector">
                <select v-model="selectedHistoryStorage">
                  <option value="localStorage">本地存储</option>
                  <option value="indexedDB">indexedDB数据库</option>
                  <option value="server">云端</option>
                  <option value="sessionStorage">会话存储</option>
                  <option value="memory">内存</option>
                </select>
              </div>
            </div>

            <div class="history-list" v-if="history[selectedHistoryStorage]">
              <div v-for="item in history[selectedHistoryStorage]" :key="item.version" class="history-item"
                :class="{ current: isCurrentVersion(item) }" @click="restoreVersion(selectedHistoryStorage, item)">
                <div class="history-content">{{ previewContent(item.content) }}</div>
                <div class="history-meta">
                  <span class="history-time">{{ formatTime(item.timestamp) }}</span>
                  <span class="history-version">v{{ item.version }}</span>
                </div>
              </div>
            </div>
            <div v-else class="empty-history">暂无历史版本</div>
          </div>

        </div>
      </div>
    </transition>

    <!-- 遮罩层 -->
    <transition name="fade">
      <div v-if="showInfoPanel" class="panel-overlay" @click="showInfoPanel = false"></div>
    </transition>
  </div>
</template>

<script>
import AutoSaveManager from './AutoSaveManager.js';

export default {
  name: 'AutoSaveTextarea',
  components: {
  },
  props: {
     // textarea行数
     textareaRow: {
      type: Number,
      default: 1
    },
    // select类型枚举
    dataSelect: {
      type: Array,
      default: ()=>[]
    },
    // 数据类型
    dataType: {
      type: String,
      required: true,
      default: 'input'
    },
    // 数据关联的key
    dataKey: {
      type: String,
      required: true,
      default: 'default'
    },
    // 数据关联的name
    dataName: {
      type: String,
      required: true,
      default: 'default'
    },
    // 宽度
    dataWidth: {
      type: String,
      default: '100%'
    },
    // 初始内容
    value: {
      type: String,
      default: ''
    },
    // 占位符
    placeholder: {
      type: String,
      default: '请输入内容...'
    },
    // 服务器配置
    serverConfig: {
      type: Object,
      default: () => ({})
    },
    // 是否自动加载
    autoLoad: {
      type: Boolean,
      default: true
    }
  },

  data() {
    return {
      currentContent: '',
      isFocused: false,
      showInfoPanel: false,
      showStatusIcon: false,
      storageStates: {},
      history: {},
      selectedHistoryStorage: 'localStorage',
      lastSaveTime: null,
      manager: null,
      queueStatus: {
        queuedCount: 0,
        isOnline: true,
        isSyncing: false
      },
    };
  },

  watch: {
    // 监听 value 变化，更新当前内容
    value: {
      immediate: true,
      handler(newVal) {
        if (newVal !== this.currentContent && !this.hasUserInput) {
          this.currentContent = newVal;
          this.initValue(newVal);
        }
      }
    },
  },

  created() {
    this.initManager(this.dataKey);
  },

  mounted() {
    if (this.autoLoad) {
      this.loadContent();
    }

    // 监听网络状态变化
    window.addEventListener('online', this.handleNetworkChange);
    window.addEventListener('offline', this.handleNetworkChange);

    // 定时更新状态
    this.updateInterval = setInterval(() => {
      this.updateStorageStates();
    }, 3000);
  },

  beforeDestroy() {
    if (this.manager) {
      this.manager.saveImmediately();
    }

    clearInterval(this.updateInterval);
    window.removeEventListener('online', this.handleNetworkChange);
    window.removeEventListener('offline', this.handleNetworkChange);
  },

  methods: {
    /**
     * 初始化内容
     */
    initValue(value) {
      let that = this
      let initInterval = setTimeout(function () {
        if (that.manager) {
          that.manager.save(value);
          clearInterval(initInterval);
        }
      }, 200)
    },
    /**
     * 初始化管理器
     */
    async initManager(key) {
      if (this.manager) {
        await this.manager.saveImmediately();
      }

      this.manager = new AutoSaveManager(key, this.serverConfig);
      this.currentContent = this.value;
      this.manager.save(this.currentContent);
      this.updateStorageStates();
    },

    /**
     * 加载内容
     */
    async loadContent() {
      if (this.manager) {
        const content = await this.manager.loadFromAllStorages();
        if (content) {
          this.currentContent = content;
        }
      }
    },

    /**
     * 处理选择
     */
     handleSelect(event) {
      this.currentContent = event;
      if (this.manager) {
        this.manager.save(this.currentContent);
      }
    },

    /**
     * 处理input输入
     */
    handleInput(event) {
      this.currentContent = event;
      if (this.manager) {
        this.manager.save(this.currentContent);
      }
    },
    /**
     * 处理textArea输入
     */
    handleTextarea(event) {
      this.currentContent =event.target.value;
      if (this.manager) {
        this.manager.save(this.currentContent);
      }
    },
    /**
     * 处理获取焦点
     */
    handleFocus() {
      this.isFocused = true;
      this.showStatusIcon = true;
    },

    /**
     * 处理失去焦点
     */
    handleBlur() {
      this.isFocused = false;
      // 延迟隐藏状态图标
      setTimeout(() => {
        if (!this.isFocused && !this.showInfoPanel) {
          this.showStatusIcon = false;
        }
      }, 300);
    },

    /**
     * 切换信息面板
     */
    toggleInfoPanel() {
      this.showInfoPanel = !this.showInfoPanel;
      if (this.showInfoPanel) {
        this.loadHistory();
        this.updateStorageStates();
      }
    },

    /**
     * 更新存储状态
     */
    updateStorageStates() {
      if (this.manager) {
        this.storageStates = this.manager.getAllStates();
        this.lastSaveTime = this.getLatestSaveTime();

        // 更新队列状态
        if (this.manager.storages.server) {
          this.queueStatus = this.manager.storages.server.getQueueStatus();
        }
      }
    },

    /**
     * 获取最新保存时间
     */
    getLatestSaveTime() {
      let latestTime = 0;
      Object.values(this.storageStates).forEach(state => {
        if (state.lastSaved && state.lastSaved > latestTime) {
          latestTime = state.lastSaved;
        }
      });
      return latestTime;
    },

    /**
     * 获取总体状态
     */
    getOverallStatus() {
      const states = Object.values(this.storageStates);
      const errorCount = states.filter(s => s.status === 'error').length;
      const savingCount = states.filter(s => s.status === 'saving').length;
      const savedCount = states.filter(s => s.status === 'saved').length;

      if (errorCount > 0) {
        return { status: 'error', text: '部分存储失败' };
      } else if (savingCount > 0) {
        return { status: 'saving', text: '保存中...' };
      } else if (savedCount > 0) {
        return { status: 'saved', text: '已保存' };
      }
      return { status: 'idle', text: '未保存' };
    },

    /**
     * 获取状态图标
     */
    getStatusIcon() {
      const status = this.getOverallStatus().status;
      switch (status) {
        case 'saving': return 'el-icon-loading';
        case 'saved': return 'el-icon-success';
        case 'error': return 'el-icon-error';
        default: return 'el-icon-info';
      }
    },

    /**
     * 获取存储状态图标
     */
    getStorageStatusIcon(type) {
      const status = this.storageStates[type]?.status;
      switch (status) {
        case 'saving': return 'el-icon-loading';
        case 'saved': return 'el-icon-success';
        case 'error': return 'el-icon-error';
        case 'loaded': return 'el-icon-check';
        default: return 'el-icon-watch';
      }
    },

    /**
     * 获取存储名称
     */
    getStorageName(type) {
      const names = {
        memory: '内存',
        localStorage: '本地存储',
        sessionStorage: '会话存储',
        indexedDB: 'indexedDB数据库',
        server: '云端'
      };
      return names[type] || type;
    },

    /**
     * 加载历史版本
     */
    async loadHistory() {
      if (!this.manager) return;

      const storageTypes = ['memory', 'localStorage', 'sessionStorage', 'indexedDB', 'server'];
      for (const type of storageTypes) {
        try {
          const result = await this.manager.getHistory(type);
          if (result.success) {
            this.$set(this.history, type, result.data || []);
          }
        } catch (error) {
          console.error(`加载${type}历史失败:`, error);
        }
      }
    },

    /**
     * 恢复版本
     */
    async restoreVersion(storageType, versionData) {
      if (!this.manager) return;

      try {
        const result = await this.manager.restoreFromHistory(storageType, versionData);
        if (result.success) {
          this.currentContent = result.content;
          this.$emit('content-restored', result.content);

          this.$message({
            message: '版本恢复成功',
            type: 'success'
          });
        }
      } catch (error) {
        this.$message.error('版本恢复失败: ' + error.message);
      }
    },

    /**
     * 检查是否为当前版本
     */
    isCurrentVersion(versionData) {
      if (!this.manager) return false;
      return versionData.content === this.currentContent;
    },

    /**
     * 预览内容
     */
    previewContent(content) {
      if (!content) return '空内容';
      const str = typeof content === 'string' ? content : JSON.stringify(content);
      return str.length > 50 ? str.substring(0, 50) + '...' : str;
    },

    /**
     * 处理网络变化
     */
    handleNetworkChange() {
      this.updateStorageStates();
      if (navigator.onLine && this.manager?.storages?.server) {
        this.manager.storages.server.processQueue();
      }
    },

    /**
     * 格式化时间
     */
    formatTime(timestamp) {
      if (!timestamp) return '从未保存';
      const date = new Date(timestamp);
      const now = new Date();
      const diff = now - date;

      if (diff < 60000) return '刚刚';
      if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前`;
      if (diff < 86400000) return `${Math.floor(diff / 3600000)}小时前`;

      return date.toLocaleString();
    },
    async initManager(key) {
      if (this.manager) {
        try {
          await this.manager.saveImmediately();
        } catch (error) {
          console.error('保存当前数据失败:', error);
        }
      }

      try {
        this.manager = new AutoSaveManager(key, this.serverConfig);
        // 等待管理器初始化完成
        await this.manager.waitForInit();

        this.currentContent = this.value;
        this.updateStorageStates();

        // 自动加载保存的内容
        await this.loadContent();
      } catch (error) {
        console.error('初始化管理器失败:', error);
        this.$message.error('自动保存功能初始化失败: ' + error.message);

        // 即使失败也创建基本的管理器
        this.manager = {
          save: (content) => {
            localStorage.setItem(`fallback_${key}`, content);
          },
          loadFromAllStorages: () => {
            return localStorage.getItem(`fallback_${key}`) || this.value;
          },
          getAllStates: () => ({})
        };
      }
    },
  }
};
</script>

<style scoped>
.auto-save-container {
  position: relative;
  width: 100%;
}

.input-wrapper {
  position: relative;
  transition: all 0.3s ease;
  margin: 0px 5px;
}

.input-wrapper.focused {
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.auto-save-textarea {
  width: 100%;
  padding: 0px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  resize: vertical;
  transition: border-color 0.3s ease;
}

.auto-save-textarea:focus {
  outline: none;
  border-color: #409eff;
}

.status-icon-wrapper {
  position: absolute;
    right: -32px;
    bottom: 0px;
    z-index: 10;
    cursor: pointer;
    background: #fff;
}

.status-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.3s ease;
  background: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.status-icon.saving {
  color: #e6a23c;
  animation: spin 1s linear infinite;
}

.status-icon.saved {
  color: #67c23a;
}

.status-icon.error {
  color: #f56c6c;
}

.status-icon.idle {
  color: #909399;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* 信息面板样式 */
.info-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 800px;
  max-height: 80vh;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  display: flex;
  flex-direction: column;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
}

.panel-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #909399;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.close-btn:hover {
  background: #f5f7fa;
}

.panel-content {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

/* 状态概览 */
.status-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 6px;
}

.overview-item {
  display: flex;
  flex-direction: column;
}

.overview-item .label {
  font-size: 12px;
  color: #909399;
  margin-bottom: 4px;
}

.overview-item .value {
  font-size: 14px;
  font-weight: 500;
}

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
}

.status-badge.saving {
  /* background: #fdf6ec; */
  color: #e6a23c;
}

.status-badge.saved {
  /* background: #f0f9eb; */
  color: #67c23a;
}

.status-badge.error {
  /* background: #fef0f0; */
  color: #f56c6c;
}

/* 存储状态 */
.storage-status {
  margin-bottom: 24px;
}

.storage-status h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.status-item {
  padding: 12px;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.status-item.saving {
  border-color: #e6a23c;
  background: #fdf6ec;
}

.status-item.saved {
  border-color: #67c23a;
  background: #f0f9eb;
}

.status-item.error {
  border-color: #f56c6c;
  background: #fef0f0;
}

.status-item.idle {
  background: #f8f9fa;
}

.status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.storage-name {
  font-size: 14px;
  font-weight: 500;
}

.status-details {
  font-size: 12px;
  color: #606266;
}

.status-time {
  margin-bottom: 4px;
}

.status-message {
  color: #f56c6c;
  font-style: italic;
}

/* 历史版本 */
.history-section {
  margin-bottom: 24px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.storage-selector select {
  padding: 6px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  cursor: pointer;
}

.history-list {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.history-item {
  padding: 12px;
  border-bottom: 1px solid #f5f7fa;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.history-item:hover {
  background: #f5f7fa;
}

.history-item.current {
  background: #ecf5ff;
  border-left: 3px solid #409eff;
}

.history-content {
  font-size: 14px;
  margin-bottom: 8px;
  color: #303133;
}

.history-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #909399;
}

.empty-history {
  text-align: center;
  padding: 32px;
  color: #909399;
  font-style: italic;
}

/* 备份管理 */
.backup-section h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
}

.backup-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-small {
  padding: 6px 12px;
  font-size: 12px;
}

.btn-primary {
  background: #409eff;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #66b1ff;
}

.btn-primary:disabled {
  background: #a0cfff;
  cursor: not-allowed;
}

.btn-secondary {
  background: #f5f7fa;
  color: #606266;
  border: 1px solid #dcdfe6;
}

.btn-secondary:hover {
  background: #e4e7ed;
}

.backup-list {
  max-height: 200px;
  overflow-y: auto;
}

.backup-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #f5f7fa;
}

.backup-info {
  flex: 1;
}

.backup-name {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}

.backup-meta {
  font-size: 12px;
  color: #909399;
  display: flex;
  gap: 12px;
}

/* 遮罩层 */
.panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-fade-enter-active {
  transition: all 0.3s ease;
}

.slide-fade-leave-active {
  transition: all 0.3s ease;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translate(-50%, -60%);
  opacity: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .info-panel {
    width: 95%;
    max-height: 90vh;
  }

  .status-grid {
    grid-template-columns: 1fr;
  }

  .status-overview {
    grid-template-columns: 1fr;
  }
}

/* 在 style 部分添加 */
.cleanup-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.section-actions {
  display: flex;
  gap: 8px;
}

.btn-small {
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-refresh {
  background: #f5f7fa;
  border: 1px solid #dcdfe6;
  color: #606266;
  padding: 4px;
  width: 28px;
  height: 28px;
  justify-content: center;
}

.btn-refresh:hover:not(:disabled) {
  background: #e4e7ed;
}

.btn-refresh:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-manage {
  background: #409eff;
  border: 1px solid #409eff;
  color: white;
}

.btn-manage:hover {
  background: #66b1ff;
  border-color: #66b1ff;
}

.btn-quick-cleanup {
  background: #e6a23c;
  border: 1px solid #e6a23c;
  color: white;
}

.btn-quick-cleanup:hover:not(:disabled) {
  background: #ebb563;
  border-color: #ebb563;
}

.btn-quick-cleanup:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #f5d9a5;
  border-color: #f5d9a5;
}

.btn-space-cleanup {
  background: #f56c6c;
  border: 1px solid #f56c6c;
  color: white;
}

.btn-space-cleanup:hover:not(:disabled) {
  background: #f78989;
  border-color: #f78989;
}

.btn-space-cleanup:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #fab6b6;
  border-color: #fab6b6;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.stat-item {
  background: #f8f9fa;
  padding: 8px;
  border-radius: 4px;
  text-align: center;
}

.stat-label {
  font-size: 11px;
  color: #909399;
  margin-bottom: 2px;
}

.stat-value {
  font-size: 14px;
  font-weight: 600;
  color: #409eff;
}

.stat-value.highlight {
  color: #e6a23c;
}

.quota-info {
  background: #f8f9fa;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 16px;
}

.quota-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
  color: #606266;
}

.quota-bar {
  height: 6px;
  background: #e4e7ed;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

.quota-fill {
  height: 100%;
  transition: width 0.3s ease;
}

.quota-fill.low {
  background: #67c23a;
}

.quota-fill.medium {
  background: #e6a23c;
}

.quota-fill.high {
  background: #f56c6c;
}

.quota-details {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #909399;
}

.quick-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.storage-details {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
}

.details-header {
  padding: 8px 12px;
  background: #f8f9fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 12px;
  color: #606266;
}

.details-header:hover {
  background: #f0f2f5;
}

.details-header .el-icon-arrow-down {
  transition: transform 0.3s ease;
}

.details-header .el-icon-arrow-down.rotate {
  transform: rotate(180deg);
}

.details-content {
  padding: 12px;
  background: white;
}

.storage-item {
  padding: 8px 0;
  border-bottom: 1px solid #f5f7fa;
}

.storage-item:last-child {
  border-bottom: none;
}

.storage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.storage-name {
  font-size: 12px;
  font-weight: 500;
  color: #303133;
}

.storage-count {
  font-size: 11px;
  color: #909399;
}

.storage-info {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
}

.info-item {
  display: flex;
  gap: 4px;
}

.info-item span:first-child {
  color: #909399;
}

.info-item span:last-child {
  color: #606266;
}

.info-item .cleanable {
  color: #e6a23c;
  font-weight: 500;
}

.no-stats {
  padding: 24px;
  text-align: center;
  color: #909399;
}

.empty-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.empty-message .el-icon-info {
  font-size: 24px;
  color: #c0c4cc;
}

/* 动画效果 */
.slide-down-enter-active,
.slide-down-leave-active {
  transition: all 0.3s ease;
  max-height: 300px;
  overflow: hidden;
}

.slide-down-enter-from,
.slide-down-leave-to {
  max-height: 0;
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 旋转动画 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.loading {
  animation: spin 1s linear infinite;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .quick-actions {
    flex-direction: column;
  }

  .btn-small {
    justify-content: center;
  }
}
</style>