<template>
  <view class="clear-cache">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-back" @click="navigateBack">
        <u-icon name="arrow-left" size="24" color="#606266"></u-icon>
      </view>
      <view class="nav-title">清理缓存</view>
      <view class="nav-right">
        <u-button type="primary" size="small" @click="clearAllCache" :disabled="isClearing">
          {{ isClearing ? '清理中...' : '清理全部' }}
        </u-button>
      </view>
    </view>

    <!-- 缓存概览 -->
    <view class="cache-overview">
      <view class="cache-card">
        <view class="cache-title">
          <u-icon name="folder-open" size="32" color="#606266" style="margin-right: 12rpx;"></u-icon>
          <text class="title-text">系统缓存</text>
        </view>
        <view class="cache-size">
          <text class="size-value">{{ totalCacheSize }}</text>
          <text class="size-unit">MB</text>
        </view>
        <view class="cache-desc">上次清理时间: {{ lastClearTime }}</view>
      </view>
    </view>

    <!-- 缓存详情列表 -->
    <view class="cache-details">
      <view class="section-header">
        <text class="section-title">缓存详情</text>
        <text class="section-hint">点击可清理对应缓存</text>
      </view>
      
      <u-list>
        <u-list-item v-for="item in cacheItems" :key="item.type" :border="true">
          <view class="cache-item" @click="clearSpecificCache(item.type)">
            <view class="cache-item-left">
              <u-icon :name="item.icon" size="32" color="#606266" style="margin-right: 12rpx;"></u-icon>
              <view class="cache-item-info">
                <view class="cache-item-name">{{ item.name }}</view>
                <view class="cache-item-desc">{{ item.description }}</view>
              </view>
            </view>
            <view class="cache-item-right">
              <text class="cache-item-size">{{ item.size }} MB</text>
              <u-icon name="arrow-right" size="24" color="#c0c4cc"></u-icon>
            </view>
          </view>
        </u-list-item>
      </u-list>
    </view>

    <!-- 缓存清理提示 -->
    <view class="cache-tips">
      <u-icon name="information-circle" size="24" color="#909399" style="margin-right: 12rpx;"></u-icon>
      <text class="tips-text">定期清理缓存可以提高系统运行速度，建议每周清理一次。</text>
    </view>

    <!-- 清理历史 -->
    <view class="clear-history">
      <view class="section-header">
        <text class="section-title">清理历史</text>
        <u-button type="text" @click="clearHistory">清空历史</u-button>
      </view>
      
      <u-list v-if="clearHistoryList.length > 0">
        <u-list-item v-for="history in clearHistoryList" :key="history.id" :border="true">
          <view class="history-item">
            <view class="history-content">
              <text class="history-action">{{ history.action }}</text>
              <text class="history-size">清理了 {{ history.clearedSize }} MB</text>
            </view>
            <view class="history-time">{{ formatTime(history.timestamp) }}</view>
          </view>
        </u-list-item>
      </u-list>
      <u-empty v-else text="暂无清理记录"></u-empty>
    </view>

    <!-- 清理进度弹窗 -->
    <u-popup v-model="showProgressModal" mode="center" :round="true" :closeable="false" :mask-close-able="false">
      <view class="progress-modal-content">
        <view class="progress-title">{{ clearingTitle }}</view>
        <u-progress :percentage="clearProgress" :show-text="true" bar-height="10" active></u-progress>
        <view class="progress-text">{{ clearProgressText }}</view>
      </view>
    </u-popup>

    <!-- 清理确认弹窗 -->
    <u-popup v-model="showConfirmModal" mode="center" :round="true">
      <view class="confirm-modal-content">
        <view class="confirm-title">确认清理</view>
        <view class="confirm-content">{{ confirmContent }}</view>
        <view class="confirm-buttons">
          <u-button @click="showConfirmModal = false" style="flex: 1; margin-right: 20rpx;">取消</u-button>
          <u-button type="primary" @click="confirmClearCache" style="flex: 1;">确认清理</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isClearing: false,
        clearProgress: 0,
        clearProgressText: '',
        clearingTitle: '',
        showProgressModal: false,
        showConfirmModal: false,
        confirmContent: '',
        cacheTypeToClear: '',
        totalCacheSize: '246.8',
        lastClearTime: '2023-08-01 10:30:00',
        cacheItems: [
          {
            type: 'image',
            name: '图片缓存',
            description: '临时存储的图片文件',
            size: '156.2',
            icon: 'image',
            color: '#409eff'
          },
          {
            type: 'data',
            name: '数据缓存',
            description: 'API请求数据缓存',
            size: '45.3',
            icon: 'document-text',
            color: '#67c23a'
          },
          {
            type: 'temp',
            name: '临时文件',
            description: '系统临时生成的文件',
            size: '28.7',
            icon: 'file-temp',
            color: '#faad14'
          },
          {
            type: 'log',
            name: '日志文件',
            description: '系统运行日志',
            size: '16.6',
            icon: 'document-copy',
            color: '#909399'
          }
        ],
        clearHistoryList: [
          {
            id: 1,
            action: '清理全部缓存',
            clearedSize: '128.5',
            timestamp: 1690843200000
          },
          {
            id: 2,
            action: '清理图片缓存',
            clearedSize: '89.2',
            timestamp: 1690756800000
          },
          {
            id: 3,
            action: '清理日志文件',
            clearedSize: '12.3',
            timestamp: 1690670400000
          }
        ]
      }
    },
    methods: {
      navigateBack() {
        uni.navigateBack()
      },
      formatTime(timestamp) {
        const date = new Date(timestamp)
        const year = date.getFullYear()
        const month = (date.getMonth() + 1).toString().padStart(2, '0')
        const day = date.getDate().toString().padStart(2, '0')
        const hour = date.getHours().toString().padStart(2, '0')
        const minute = date.getMinutes().toString().padStart(2, '0')
        return `${year}-${month}-${day} ${hour}:${minute}`
      },
      clearAllCache() {
        this.showConfirmModal = true
        this.confirmContent = '确定要清理全部缓存吗？这将释放所有缓存空间。'
        this.cacheTypeToClear = 'all'
      },
      clearSpecificCache(type) {
        this.showConfirmModal = true
        const cacheItem = this.cacheItems.find(item => item.type === type)
        this.confirmContent = `确定要清理${cacheItem.name}吗？这将释放 ${cacheItem.size} MB 的存储空间。`
        this.cacheTypeToClear = type
      },
      confirmClearCache() {
        this.showConfirmModal = false
        this.isClearing = true
        this.clearProgress = 0
        this.showProgressModal = true
        
        if (this.cacheTypeToClear === 'all') {
          this.clearingTitle = '清理全部缓存'
          this.clearProgressText = '准备清理...'
        } else {
          const cacheItem = this.cacheItems.find(item => item.type === this.cacheTypeToClear)
          this.clearingTitle = `清理${cacheItem.name}`
          this.clearProgressText = '准备清理...'
        }

        // 模拟清理进度
        let progress = 0
        const interval = setInterval(() => {
          progress += 5
          this.clearProgress = progress
          
          if (progress <= 30) {
            this.clearProgressText = '正在扫描文件...'
          } else if (progress <= 60) {
            this.clearProgressText = '正在清理缓存...'
          } else if (progress <= 90) {
            this.clearProgressText = '正在更新系统...'
          } else {
            this.clearProgressText = '清理完成！'
          }
          
          if (progress >= 100) {
            clearInterval(interval)
            setTimeout(() => {
              this.isClearing = false
              this.showProgressModal = false
              
              // 更新缓存大小
              if (this.cacheTypeToClear === 'all') {
                this.totalCacheSize = '0.0'
                this.cacheItems.forEach(item => {
                  item.size = '0.0'
                })
              } else {
                const cacheItem = this.cacheItems.find(item => item.type === this.cacheTypeToClear)
                const clearedSize = parseFloat(cacheItem.size)
                cacheItem.size = '0.0'
                this.totalCacheSize = (parseFloat(this.totalCacheSize) - clearedSize).toFixed(1)
              }
              
              // 更新最后清理时间
              const now = new Date()
              const year = now.getFullYear()
              const month = (now.getMonth() + 1).toString().padStart(2, '0')
              const day = now.getDate().toString().padStart(2, '0')
              const hour = now.getHours().toString().padStart(2, '0')
              const minute = now.getMinutes().toString().padStart(2, '0')
              const second = now.getSeconds().toString().padStart(2, '0')
              this.lastClearTime = `${year}-${month}-${day} ${hour}:${minute}:${second}`
              
              // 添加到清理历史
              this.addToClearHistory()
              
              uni.showToast({ 
                title: '缓存清理成功', 
                icon: 'success' 
              })
            }, 1000)
          }
        }, 200)
      },
      addToClearHistory() {
        let action, clearedSize
        
        if (this.cacheTypeToClear === 'all') {
          action = '清理全部缓存'
          clearedSize = this.totalCacheSize
        } else {
          const cacheItem = this.cacheItems.find(item => item.type === this.cacheTypeToClear)
          action = `清理${cacheItem.name}`
          clearedSize = cacheItem.size
        }
        
        const newHistory = {
          id: this.clearHistoryList.length + 1,
          action: action,
          clearedSize: clearedSize,
          timestamp: Date.now()
        }
        
        this.clearHistoryList.unshift(newHistory)
      },
      clearHistory() {
        uni.showModal({
          title: '确认清空',
          content: '确定要清空清理历史记录吗？',
          success: (res) => {
            if (res.confirm) {
              this.clearHistoryList = []
              uni.showToast({ 
                title: '历史记录已清空', 
                icon: 'success' 
              })
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .clear-cache {
    padding-bottom: 20rpx;
    background-color: #f5f5f5;

    .nav-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 88rpx;
      padding: 0 30rpx;
      background-color: #fff;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

      .nav-title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
      }
    }

    .cache-overview {
      margin-top: 20rpx;
      padding: 0 20rpx;
    }

    .cache-card {
      background: linear-gradient(135deg, #409eff, #67c23a);
      border-radius: 16rpx;
      padding: 30rpx;
      text-align: center;
      color: #fff;

      .cache-title {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10rpx;
        margin-bottom: 20rpx;

        .title-text {
          font-size: 32rpx;
          font-weight: bold;
        }
      }

      .cache-size {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 5rpx;
        margin-bottom: 15rpx;

        .size-value {
          font-size: 60rpx;
          font-weight: bold;
        }

        .size-unit {
          font-size: 32rpx;
          opacity: 0.8;
        }
      }

      .cache-desc {
        font-size: 24rpx;
        opacity: 0.8;
      }
    }

    .cache-details {
      margin-top: 20rpx;
      background-color: #fff;

      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx;
        border-bottom: 1px solid #f0f0f0;

        .section-title {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
        }

        .section-hint {
          font-size: 24rpx;
          color: #999;
        }
      }

      .cache-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx;

        .cache-item-left {
          display: flex;
          align-items: center;
          gap: 20rpx;
        }

        .cache-item-info {
          .cache-item-name {
            font-size: 32rpx;
            color: #333;
            margin-bottom: 5rpx;
          }

          .cache-item-desc {
            font-size: 24rpx;
            color: #999;
          }
        }

        .cache-item-right {
          display: flex;
          align-items: center;
          gap: 10rpx;

          .cache-item-size {
            font-size: 30rpx;
            color: #666;
          }
        }
      }
    }

    .cache-tips {
      display: flex;
      align-items: center;
      gap: 10rpx;
      margin: 20rpx;
      padding: 20rpx;
      background-color: #fdf6ec;
      border-radius: 10rpx;
      border-left: 4rpx solid #faad14;

      .tips-text {
        font-size: 28rpx;
        color: #fa8c16;
        flex: 1;
      }
    }

    .clear-history {
      margin-top: 20rpx;
      background-color: #fff;

      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx;
        border-bottom: 1px solid #f0f0f0;

        .section-title {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
        }
      }

      .history-item {
        padding: 20rpx;

        .history-content {
          .history-action {
            font-size: 32rpx;
            color: #333;
            margin-bottom: 5rpx;
            display: block;
          }

          .history-size {
            font-size: 28rpx;
            color: #666;
          }
        }

        .history-time {
          font-size: 24rpx;
          color: #999;
          margin-top: 10rpx;
          display: block;
          text-align: right;
        }
      }
    }

    .progress-modal-content {
      padding: 40rpx;
      text-align: center;

      .progress-title {
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 30rpx;
        color: #333;
      }

      .progress-text {
        margin-top: 20rpx;
        font-size: 30rpx;
        color: #666;
      }
    }

    .confirm-modal-content {
      padding: 40rpx;

      .confirm-title {
        font-size: 36rpx;
        font-weight: bold;
        text-align: center;
        margin-bottom: 20rpx;
        color: #333;
      }

      .confirm-content {
        font-size: 30rpx;
        color: #666;
        text-align: center;
        margin-bottom: 30rpx;
      }

      .confirm-buttons {
        display: flex;
      }
    }
  }
</style>