<template>
  <view class="data-backup">
    <!-- 顶部导航栏 -->
    <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="createBackup" :disabled="isBackingUp">
          {{ isBackingUp ? '备份中...' : '立即备份' }}
        </u-button>
      </view>
    </view>

    <!-- 备份设置 -->
    <view class="backup-settings">
      <u-cell-group>
        <u-cell 
          title="自动备份频率" 
          :right-text="`${autoBackupFrequency}小时`"
          is-link
          @click="showFrequencyModal = true"
        ></u-cell>
        <u-cell 
          title="保留备份数量" 
          :right-text="`${maxBackups}个`"
          is-link
          @click="showMaxBackupsModal = true"
        ></u-cell>
        <u-cell 
          title="备份存储位置" 
          :right-text="backupStorageLocation"
          is-link
          @click="selectStorageLocation"
        ></u-cell>
      </u-cell-group>
    </view>

    <!-- 备份列表 -->
    <view class="backup-list">
      <view class="section-header">
        <text class="section-title">历史备份</text>
        <u-button type="text" @click="cleanOldBackups">清理旧备份</u-button>
      </view>
      
      <u-list v-if="backups.length > 0" :load-more="loadMore" @loadmore="onLoadMore">
        <u-list-item v-for="backup in paginatedBackups" :key="backup.id" :border="true">
          <view class="backup-item">
            <view class="backup-header">
              <view class="backup-name">{{ backup.name }}</view>
              <view class="backup-time">{{ formatTime(backup.timestamp) }}</view>
            </view>
            <view class="backup-info">
              <text class="backup-size">大小: {{ backup.size }}</text>
              <text class="backup-type" :class="backup.type">类型: {{ backup.type === 'auto' ? '自动' : '手动' }}</text>
            </view>
            <view class="backup-actions">
              <u-button size="mini" type="primary" @click="downloadBackup(backup.id)">下载</u-button>
              <u-button size="mini" type="success" @click="restoreBackup(backup.id)">恢复</u-button>
              <u-button size="mini" type="error" @click="deleteBackup(backup.id)">删除</u-button>
            </view>
          </view>
        </u-list-item>
      </u-list>
      <u-empty v-else text="暂无备份记录"></u-empty>
    </view>

    <!-- 自动备份频率选择弹窗 -->
    <u-popup v-model="showFrequencyModal" mode="bottom" :round="true" :closeable="true">
      <view class="modal-content">
        <view class="modal-title">选择自动备份频率</view>
        <view class="picker-options">
          <u-button 
            v-for="option in frequencyOptions" 
            :key="option.value"
            :type="autoBackupFrequency === option.value ? 'primary' : 'default'"
            style="margin-bottom: 20rpx;"
            @click="selectFrequency(option.value)"
          >
            {{ option.label }}
          </u-button>
        </view>
        <view class="modal-buttons">
          <u-button @click="showFrequencyModal = false">取消</u-button>
        </view>
      </view>
    </u-popup>

    <!-- 保留备份数量选择弹窗 -->
    <u-popup v-model="showMaxBackupsModal" mode="bottom" :round="true" :closeable="true">
      <view class="modal-content">
        <view class="modal-title">选择保留备份数量</view>
        <view class="picker-options">
          <u-button 
            v-for="option in maxBackupsOptions" 
            :key="option.value"
            :type="maxBackups === option.value ? 'primary' : 'default'"
            style="margin-bottom: 20rpx;"
            @click="selectMaxBackups(option.value)"
          >
            {{ option.label }}
          </u-button>
        </view>
        <view class="modal-buttons">
          <u-button @click="showMaxBackupsModal = false">取消</u-button>
        </view>
      </view>
    </u-popup>

    <!-- 备份进度弹窗 -->
    <u-popup v-model="showProgressModal" mode="center" :round="true" :closeable="false" :mask-close-able="false">
      <view class="progress-modal-content">
        <view class="progress-title">正在备份数据</view>
        <u-progress :percentage="backupProgress" :show-text="true" bar-height="10" active></u-progress>
        <view class="progress-text">{{ backupProgressText }}</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isBackingUp: false,
        backupProgress: 0,
        backupProgressText: '准备备份...',
        showProgressModal: false,
        showFrequencyModal: false,
        showMaxBackupsModal: false,
        autoBackupFrequency: 24, // 默认24小时
        maxBackups: 10, // 默认保留10个备份
        backupStorageLocation: '本地存储',
        currentPage: 1,
        pageSize: 10,
        loadMore: {
          loading: false,
          finished: false,
          error: false
        },
        frequencyOptions: [
          { label: '6小时', value: 6 },
          { label: '12小时', value: 12 },
          { label: '24小时', value: 24 },
          { label: '48小时', value: 48 },
          { label: '72小时', value: 72 },
          { label: '关闭自动备份', value: 0 }
        ],
        maxBackupsOptions: [
          { label: '5个', value: 5 },
          { label: '10个', value: 10 },
          { label: '20个', value: 20 },
          { label: '50个', value: 50 }
        ],
        backups: [
          { id: 1, name: 'backup_20230801_120000', timestamp: 1690843200000, size: '12.5 MB', type: 'auto' },
          { id: 2, name: 'backup_20230802_120000', timestamp: 1690929600000, size: '13.2 MB', type: 'auto' },
          { id: 3, name: 'backup_20230803_103000', timestamp: 1691005800000, size: '14.1 MB', type: 'manual' },
          { id: 4, name: 'backup_20230804_120000', timestamp: 1691092200000, size: '14.3 MB', type: 'auto' },
          { id: 5, name: 'backup_20230805_120000', timestamp: 1691178600000, size: '14.8 MB', type: 'auto' },
          { id: 6, name: 'backup_20230806_120000', timestamp: 1691265000000, size: '15.2 MB', type: 'auto' },
          { id: 7, name: 'backup_20230807_091500', timestamp: 1691336100000, size: '15.5 MB', type: 'manual' },
          { id: 8, name: 'backup_20230808_120000', timestamp: 1691434200000, size: '16.1 MB', type: 'auto' },
          { id: 9, name: 'backup_20230809_120000', timestamp: 1691520600000, size: '16.5 MB', type: 'auto' },
          { id: 10, name: 'backup_20230810_120000', timestamp: 1691607000000, size: '17.0 MB', type: 'auto' },
          { id: 11, name: 'backup_20230811_120000', timestamp: 1691693400000, size: '17.3 MB', type: 'auto' },
          { id: 12, name: 'backup_20230812_153000', timestamp: 1691779800000, size: '17.8 MB', type: 'manual' }
        ]
      }
    },
    computed: {
      paginatedBackups() {
        const start = (this.currentPage - 1) * this.pageSize
        const end = start + this.pageSize
        return this.backups.sort((a, b) => b.timestamp - a.timestamp).slice(start, end)
      }
    },
    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}`
      },
      createBackup() {
        this.isBackingUp = true
        this.backupProgress = 0
        this.backupProgressText = '准备备份...'
        this.showProgressModal = true

        // 模拟备份进度
        let progress = 0
        const interval = setInterval(() => {
          progress += 5
          this.backupProgress = progress
          
          if (progress <= 30) {
            this.backupProgressText = '正在收集数据...'
          } else if (progress <= 60) {
            this.backupProgressText = '正在压缩数据...'
          } else if (progress <= 90) {
            this.backupProgressText = '正在保存备份...'
          } else {
            this.backupProgressText = '备份完成！'
          }
          
          if (progress >= 100) {
            clearInterval(interval)
            setTimeout(() => {
              this.isBackingUp = false
              this.showProgressModal = false
              
              // 添加新备份到列表
              const now = new Date()
              const newBackup = {
                id: this.backups.length + 1,
                name: `backup_${now.getFullYear()}${(now.getMonth() + 1).toString().padStart(2, '0')}${now.getDate().toString().padStart(2, '0')}_${now.getHours().toString().padStart(2, '0')}${now.getMinutes().toString().padStart(2, '0')}${now.getSeconds().toString().padStart(2, '0')}`,
                timestamp: now.getTime(),
                size: `${(Math.random() * 5 + 15).toFixed(1)} MB`,
                type: 'manual'
              }
              this.backups.unshift(newBackup)
              this.currentPage = 1
              this.updateLoadMoreStatus()
              
              uni.showToast({ title: '备份成功', icon: 'success' })
            }, 1000)
          }
        }, 200)
      },
      downloadBackup(id) {
        uni.showLoading({ title: '正在下载...' })
        
        // 模拟下载
        setTimeout(() => {
          uni.hideLoading()
          const backup = this.backups.find(b => b.id === id)
          uni.showToast({ 
            title: `备份文件 ${backup.name} 已下载`, 
            icon: 'success' 
          })
        }, 1500)
      },
      restoreBackup(id) {
        uni.showModal({
          title: '确认恢复',
          content: '恢复数据将覆盖当前系统数据，是否继续？',
          success: (res) => {
            if (res.confirm) {
              uni.showLoading({ title: '正在恢复...' })
              
              // 模拟恢复
              setTimeout(() => {
                uni.hideLoading()
                uni.showToast({ 
                  title: '数据恢复成功', 
                  icon: 'success' 
                })
              }, 2000)
            }
          }
        })
      },
      deleteBackup(id) {
        uni.showModal({
          title: '确认删除',
          content: '确定要删除此备份文件吗？',
          success: (res) => {
            if (res.confirm) {
              this.backups = this.backups.filter(backup => backup.id !== id)
              uni.showToast({ 
                title: '删除成功', 
                icon: 'success' 
              })
              this.updateLoadMoreStatus()
            }
          }
        })
      },
      cleanOldBackups() {
        uni.showModal({
          title: '清理旧备份',
          content: `系统将只保留最近 ${this.maxBackups} 个备份文件，是否继续？`,
          success: (res) => {
            if (res.confirm) {
              // 模拟清理
              setTimeout(() => {
                const sortedBackups = this.backups.sort((a, b) => b.timestamp - a.timestamp)
                this.backups = sortedBackups.slice(0, this.maxBackups)
                uni.showToast({ 
                  title: '清理完成', 
                  icon: 'success' 
                })
                this.currentPage = 1
                this.updateLoadMoreStatus()
              }, 1000)
            }
          }
        })
      },
      selectFrequency(value) {
        this.autoBackupFrequency = value
        this.showFrequencyModal = false
        uni.showToast({ 
          title: `自动备份频率已设置为${value === 0 ? '关闭' : value + '小时'}`, 
          icon: 'success' 
        })
      },
      selectMaxBackups(value) {
        this.maxBackups = value
        this.showMaxBackupsModal = false
        uni.showToast({ 
          title: `保留备份数量已设置为${value}个`, 
          icon: 'success' 
        })
      },
      selectStorageLocation() {
        // 模拟选择存储位置
        uni.showActionSheet({
          itemList: ['本地存储', '云存储'],
          success: (res) => {
            this.backupStorageLocation = res.tapIndex === 0 ? '本地存储' : '云存储'
            uni.showToast({ 
              title: `存储位置已设置为${this.backupStorageLocation}`, 
              icon: 'success' 
            })
          }
        })
      },
      onLoadMore() {
        if (this.loadMore.loading) return
        
        this.loadMore.loading = true
        
        // 模拟加载更多数据
        setTimeout(() => {
          this.currentPage++
          this.loadMore.loading = false
          this.updateLoadMoreStatus()
        }, 1000)
      },
      updateLoadMoreStatus() {
        const hasMore = this.paginatedBackups.length < this.backups.length
        this.loadMore.finished = !hasMore
      }
    }
  }
</script>

<style lang="scss">
  .data-backup {
    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;
      }
    }

    .backup-settings {
      margin-top: 20rpx;
    }

    .backup-list {
      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;
        }
      }

      .backup-item {
        padding: 20rpx;

        .backup-header {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10rpx;

          .backup-name {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
          }

          .backup-time {
            font-size: 28rpx;
            color: #999;
          }
        }

        .backup-info {
          display: flex;
          gap: 30rpx;
          margin-bottom: 20rpx;

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

          .backup-type {
            font-size: 28rpx;
          }
          
          .backup-type.auto {
            color: #409eff;
          }
          
          .backup-type.manual {
            color: #67c23a;
          }
        }

        .backup-actions {
          display: flex;
          justify-content: flex-end;
          gap: 10rpx;
        }
      }
    }

    .modal-content {
      padding: 30rpx;

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

      .picker-options {
        display: flex;
        flex-wrap: wrap;
        gap: 15rpx;
        margin-bottom: 30rpx;
      }

      .modal-buttons {
        margin-top: 20rpx;
      }
    }

    .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;
      }
    }
  }
</style>