<template>
  <view class="log-container">
    <NavBar title="操作日志" @back="goBack" />

    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-input-wrapper">
        <AppIcon name="search" size="14" color="#999999" />
        <input type="text" placeholder="搜索操作人" v-model="searchKeyword" @confirm="handleSearch" />
      </view>
      <button class="search-btn" @click="handleSearch">搜索</button>
    </view>

    <!-- 日志列表 -->
    <view class="log-list" v-if="list.length > 0">
      <view class="log-item" v-for="(item, index) in list" :key="index">
        <view class="item-header">
          <text class="item-operator">{{ item.operator || item.username || item.adminUserName || '-' }}</text>
          <text class="item-time">{{ formatTime(item.createTime || item.optTime) }}</text>
        </view>
        <view class="item-content">
          <text class="content-text">{{ item.operation || item.optContent || item.content || '-' }}</text>
        </view>
        <view class="item-meta" v-if="item.ip || item.module">
          <text class="meta-item" v-if="item.module">{{ item.module }}</text>
          <text class="meta-item" v-if="item.ip">IP: {{ item.ip }}</text>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <view class="load-more" v-if="list.length > 0">
      <text class="load-more-text" v-if="loadMoreStatus === 'more'">上拉加载更多</text>
      <text class="load-more-text" v-else-if="loadMoreStatus === 'loading'">正在加载...</text>
      <text class="load-more-text" v-else>没有更多数据了</text>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="list.length === 0 && !loading">
      <view class="empty-icon-wrapper">
        <AppIcon name="clock" size="48" color="#CCCCCC" />
      </view>
      <text class="empty-text">暂无操作日志</text>
    </view>

    <!-- 加载中 -->
    <view class="loading-state" v-if="loading && list.length === 0">
      <view class="loading-spinner"></view>
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onReachBottom } from '@dcloudio/uni-app'
import { getOptLogList } from '../../api/system.js'
import { formatTime, showToast } from '../../utils/index.js'

const list = ref([])
const loading = ref(true)
const page = ref(1)
const pageSize = ref(20)
const hasMore = ref(true)
const loadMoreStatus = ref('more')
const searchKeyword = ref('')

const goBack = () => uni.navigateBack()

const loadData = async (isLoadMore = false) => {
  if (!isLoadMore) {
    page.value = 1
    list.value = []
    hasMore.value = true
    loadMoreStatus.value = 'more'
  } else {
    loadMoreStatus.value = 'loading'
  }
  loading.value = true
  try {
    const params = { pageNum: page.value, pageSize: pageSize.value }
    if (searchKeyword.value) params.operator = searchKeyword.value

    const res = await getOptLogList(params)
    if (res && res.code === 200) {
      const data = res.data
      const records = data.records || data.list || data
      const total = data.total || 0
      const totalPages = Math.ceil(total / pageSize.value)
      hasMore.value = page.value < totalPages
      loadMoreStatus.value = hasMore.value ? 'more' : 'noMore'
      if (isLoadMore) {
        list.value = [...list.value, ...records]
        page.value++
      } else {
        list.value = records
        page.value = 2
      }
    }
  } catch (e) {
    console.error('加载操作日志失败:', e)
    showToast('加载操作日志失败')
  } finally {
    loading.value = false
  }
}

const loadMore = () => { if (hasMore.value && !loading.value && loadMoreStatus.value !== 'loading') loadData(true) }

onReachBottom(() => { loadMore() })
const handleSearch = () => loadData()

onMounted(() => loadData())
</script>

<style scoped>
.log-container {
  min-height: 100vh;
  background-color: #F5F7FA;
  padding-bottom: 100rpx;
}
.search-bar {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #FFFFFF;
  margin-bottom: 20rpx;
}
.search-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #F5F5F5;
  border-radius: 16rpx;
  padding: 0 20rpx;
}
.search-input-wrapper input { flex: 1; height: 64rpx; font-size: 28rpx; }
.search-btn {
  margin-left: 20rpx;
  height: 64rpx;
  line-height: 64rpx;
  padding: 0 28rpx;
  background: #C6171E;
  color: #FFFFFF;
  border-radius: 16rpx;
  font-size: 26rpx;
  border: none;
}

.search-btn:active {
  background: #A81212;
  transform: scale(0.97);
}

.log-list {
  padding: 0 20rpx;
}
.log-item {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 20rpx 24rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
}
.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
}
.item-operator {
  font-size: 28rpx;
  font-weight: 600;
  color: #C6171E;
}
.item-time {
  font-size: 22rpx;
  color: #999999;
}
.content-text {
  font-size: 26rpx;
  color: #333333;
  line-height: 1.6;
}
.item-meta {
  display: flex;
  gap: 16rpx;
  margin-top: 12rpx;
  padding-top: 12rpx;
  border-top: 1rpx solid #F5F5F5;
}
.meta-item {
  font-size: 22rpx;
  color: #CCCCCC;
}

.load-more { display: flex; justify-content: center; padding: 30rpx 0; }
.load-more-text { font-size: 26rpx; color: #999999; }

</style>
