<template>
  <view class="operation-logs">
    <!-- 顶部导航栏 -->
    <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="text" @click="filterLogs">筛选</u-button>
      </view>
    </view>

    <!-- 搜索框 -->
    <view class="search-box">
      <u-search placeholder="搜索操作人/操作内容" v-model="searchKeyword"></u-search>
    </view>

    <!-- 时间范围选择 -->
    <view class="time-range">
      <u-cell-group>
        <u-cell 
          title="时间范围" 
          :right-text="`${startDate} 至 ${endDate}`"
          is-link
          @click="showDateRangeModal = true"
        ></u-cell>
      </u-cell-group>
    </view>

    <!-- 操作日志列表 -->
    <view class="logs-list">
      <u-list v-if="filteredLogs.length > 0" :load-more="loadMore" @loadmore="onLoadMore">
        <u-list-item v-for="log in paginatedLogs" :key="log.id" :border="true">
          <view class="log-item">
            <view class="log-header">
              <view class="log-user">{{ log.userName }}</view>
              <view class="log-time">{{ formatTime(log.timestamp) }}</view>
            </view>
            <view class="log-content">{{ log.content }}</view>
            <view class="log-result">
              <u-tag :type="log.success ? 'success' : 'error'">
                {{ log.success ? '成功' : '失败' }}
              </u-tag>
            </view>
          </view>
        </u-list-item>
      </u-list>
      <u-empty v-else text="暂无操作日志"></u-empty>
    </view>

    <!-- 时间范围选择弹窗 -->
    <u-popup v-model="showDateRangeModal" mode="bottom" :round="true" :closeable="true">
      <view class="modal-content">
        <view class="modal-title">选择时间范围</view>
        <view class="date-picker">
          <u-datetime-picker
            v-model="startDateTime"
            mode="date"
            :formatter="formatter"
            @confirm="onStartDateConfirm"
          ></u-datetime-picker>
          <view class="date-separator">至</view>
          <u-datetime-picker
            v-model="endDateTime"
            mode="date"
            :formatter="formatter"
            @confirm="onEndDateConfirm"
          ></u-datetime-picker>
        </view>
        <view class="modal-buttons">
          <u-button @click="showDateRangeModal = false" style="flex: 1; margin-right: 20rpx;">取消</u-button>
          <u-button type="primary" @click="confirmDateRange" style="flex: 1;">确定</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        searchKeyword: '',
        startDate: '2023-01-01',
        endDate: '2023-12-31',
        startDateTime: [2023, 0, 1],
        endDateTime: [2023, 11, 31],
        showDateRangeModal: false,
        currentPage: 1,
        pageSize: 20,
        loadMore: {
          loading: false,
          finished: false,
          error: false
        },
        logs: [
          { id: 1, userName: '张三', content: '添加新用户：李四', timestamp: 1691234567890, success: true },
          { id: 2, userName: '李四', content: '创建新部门：市场部', timestamp: 1691234567891, success: true },
          { id: 3, userName: '王五', content: '上传图片：项目截图.jpg', timestamp: 1691234567892, success: true },
          { id: 4, userName: '张三', content: '审核图片：项目截图.jpg', timestamp: 1691234567893, success: true },
          { id: 5, userName: '孙八', content: '修改用户角色：李四 - 部门负责人', timestamp: 1691234567894, success: true },
          { id: 6, userName: '张三', content: '删除过期图片', timestamp: 1691234567895, success: false },
          { id: 7, userName: '李四', content: '创建收集任务：季度报告图片', timestamp: 1691234567896, success: true },
          { id: 8, userName: '王五', content: '登录系统', timestamp: 1691234567897, success: true },
          { id: 9, userName: '张三', content: '修改系统设置：最大上传图片大小', timestamp: 1691234567898, success: true },
          { id: 10, userName: '李四', content: '批量审核图片', timestamp: 1691234567899, success: true },
          { id: 11, userName: '王五', content: '查看任务统计报表', timestamp: 1691234567900, success: true },
          { id: 12, userName: '张三', content: '系统数据备份', timestamp: 1691234567901, success: true },
          { id: 13, userName: '李四', content: '修改部门负责人：技术部', timestamp: 1691234567902, success: true },
          { id: 14, userName: '王五', content: '上传图片：活动照片.png', timestamp: 1691234567903, success: true },
          { id: 15, userName: '张三', content: '修改用户密码：王五', timestamp: 1691234567904, success: false },
          { id: 16, userName: '李四', content: '查看用户列表', timestamp: 1691234567905, success: true },
          { id: 17, userName: '王五', content: '修改任务截止时间', timestamp: 1691234567906, success: true },
          { id: 18, userName: '张三', content: '清理系统缓存', timestamp: 1691234567907, success: true },
          { id: 19, userName: '李四', content: '上传图片：产品展示.jpg', timestamp: 1691234567908, success: true },
          { id: 20, userName: '王五', content: '退出系统', timestamp: 1691234567909, success: true },
          { id: 21, userName: '张三', content: '修改用户信息：李四', timestamp: 1691234567910, success: true },
          { id: 22, userName: '李四', content: '删除部门：测试部', timestamp: 1691234567911, success: true }
        ]
      }
    },
    computed: {
      filteredLogs() {
        let result = this.logs
        
        // 按关键词搜索
        if (this.searchKeyword) {
          result = result.filter(log => 
            log.userName.includes(this.searchKeyword) || 
            log.content.includes(this.searchKeyword)
          )
        }
        
        // 按时间范围过滤
        const startTimestamp = new Date(this.startDate).getTime()
        const endTimestamp = new Date(this.endDate).setHours(23, 59, 59, 999)
        result = result.filter(log => 
          log.timestamp >= startTimestamp && log.timestamp <= endTimestamp
        )
        
        // 按时间倒序排列
        return result.sort((a, b) => b.timestamp - a.timestamp)
      },
      paginatedLogs() {
        const start = (this.currentPage - 1) * this.pageSize
        const end = start + this.pageSize
        return this.filteredLogs.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')
        const second = date.getSeconds().toString().padStart(2, '0')
        return `${year}-${month}-${day} ${hour}:${minute}:${second}`
      },
      formatter(type, value) {
        if (type === 'year') {
          return `${value}年`
        } else if (type === 'month') {
          return `${value}月`
        } else if (type === 'day') {
          return `${value}日`
        }
        return value
      },
      onStartDateConfirm(e) {
        const [year, month, day] = e
        this.startDate = `${year}-${(month + 1).toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`
      },
      onEndDateConfirm(e) {
        const [year, month, day] = e
        this.endDate = `${year}-${(month + 1).toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`
      },
      confirmDateRange() {
        this.showDateRangeModal = false
        this.currentPage = 1
        this.updateLoadMoreStatus()
      },
      filterLogs() {
        // 筛选功能可以进一步扩展
        uni.showToast({ title: '筛选功能开发中', icon: 'none' })
      },
      onLoadMore() {
        if (this.loadMore.loading) return
        
        this.loadMore.loading = true
        
        // 模拟加载更多数据
        setTimeout(() => {
          this.currentPage++
          this.loadMore.loading = false
          this.updateLoadMoreStatus()
        }, 1000)
      },
      updateLoadMoreStatus() {
        const hasMore = this.paginatedLogs.length < this.filteredLogs.length
        this.loadMore.finished = !hasMore
      }
    }
  }
</script>

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

    .search-box {
      padding: 20rpx;
      background-color: #fff;
    }

    .time-range {
      margin-top: 20rpx;
      padding: 0 20rpx;
    }

    .logs-list {
      margin-top: 20rpx;
      background-color: #fff;

      .log-item {
        padding: 20rpx;

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

          .log-user {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
          }

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

        .log-content {
          font-size: 30rpx;
          color: #666;
          margin-bottom: 10rpx;
          line-height: 1.5;
        }

        .log-result {
          display: flex;
          justify-content: flex-end;
        }
      }
    }

    .modal-content {
      padding: 30rpx;

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

      .date-picker {
        margin-bottom: 30rpx;

        .date-separator {
          text-align: center;
          padding: 20rpx 0;
          font-size: 32rpx;
          color: #666;
        }
      }

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