<template>
  <div class="app-container">
    <!-- 卡片包装器 -->
    <el-card class="stats-card">
      <template #header>
        <div class="card-header">
          <span>爬虫统计数据</span>
        </div>
      </template>
      <!-- 工具栏组件 -->
      <stats-tool
        v-model:scrapyd-server-id="scrapydServerId"
        v-model:project="project"
        v-model:spider="spider"
        @project-change="handleProjectChange"
        @spider-change="handleSpiderChange"
        @success="handleSuccess"
      />
      <!-- 统计数据表格 -->
      <stats-table
        :data="list"
        v-loading="listLoading"
        @sort-change="handleSortChange"
      />
      <!-- 分页控件 -->
      <div class="pagination-container">
        <el-config-provider :locale="zhCn">
          <el-pagination
            v-model:currentPage="page"
            v-model:page-size="size"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
          />
        </el-config-provider>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import StatsTable from '@/views/stats/components/StatsTable.vue'
import StatsTool from '@/views/stats/components/StatsTool.vue'
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import * as statsApi from '@/api/stats'

const list = ref([])
const total = ref(0)
const listLoading = ref(false)

const page = ref(1)
const size = ref(20)

// 查询参数
const project = ref('')
const spider = ref('')
const scrapydServerId = ref('')

// 排序
const orderProp = ref('')
const orderType = ref('')

const getData = async () => {
  listLoading.value = true

  try {
    const res = await statsApi.getStatsList({
      page: page.value,
      size: size.value,
      scrapydServerId: scrapydServerId.value,
      project: project.value,
      spider: spider.value,
      order_prop: orderProp.value,
      order_type: orderType.value
    })

    if (res.code === 0) {
      list.value = res.data.list || []
      total.value = res.data.total || 0
    }
  } catch (error) {
    console.error('获取爬虫统计数据失败:', error)
  } finally {
    listLoading.value = false
  }
}

const handleProjectChange = () => {
  page.value = 1
  getData()
}

const handleSpiderChange = () => {
  page.value = 1
  getData()
}

const handleSuccess = () => {
  page.value = 1
  getData()
}

const handleSortChange = ({ prop, order }: { prop: string, order: string }) => {
  orderProp.value = prop
  orderType.value = order === 'ascending' ? 'asc' : order === 'descending' ? 'desc' : ''
  getData()
}

const handleSizeChange = (val: number) => {
  size.value = val
  getData()
}

const handleCurrentChange = (val: number) => {
  page.value = val
  getData()
}

onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>
.stats-card {
  margin-bottom: 20px;
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    span {
      font-size: 16px;
      font-weight: 500;
    }
  }
}

.pagination-container {
  padding: 15px 0;
  text-align: right;
}
</style>
