<script setup lang="ts">
import { getContestList, getLogs } from '../api'
import AppList from '@/components/base/AppList.vue'

const appList = $ref<InstanceType<typeof AppList> | null>(null)

const form = reactive({
  competition_id: '',
  competitor_name: '',
  competitor_mobile: '',
  page: 1,
  'per-page': 10
})

// 搜索
const onSubmit = () => {
  requestLogs()
}

let total: number = $ref(0)
let logsList: any = $ref()
const requestLogs = () => {
  const params = { ...form }
  getLogs(params).then((res: any) => {
    logsList = res.data.list.map((item: any) => {
      item.client_detail = JSON.parse(item.client_detail)
      return item
    })
    total = parseInt(res.data.total)
  })
}

let contestList: any = $ref()
getContestList({ page: 1, 'per-page': 1000 }).then((res: any) => {
  contestList = res.data?.list
})

const listOptions = $computed(() => {
  return {
    columns: [
      { label: '序号', type: 'index', width: 60 },
      { label: '客户端', prop: 'name' },
      { label: '客户端版本', prop: 'client_version' },
      { label: '赛项', prop: 'competition.name' },
      { label: '选手姓名', prop: 'name' },
      { label: '手机号', prop: 'mobile' },
      { label: '时间', prop: 'created_time' },
      { label: 'IP', prop: 'client_detail.ip' },
      { label: '操作系统', prop: 'client_detail.os' },
      { label: '浏览器', prop: 'client_detail.browser' },
      { label: '操作', prop: 'operation_desc' }
    ],
    data: logsList
  }
})

onMounted(() => {
  requestLogs()
})

// 页数改变
const pageSizeChange = (value: number) => {
  form.page = 1
  form['per-page'] = value
  requestLogs()
}

const fetchList = (n: any) => {
  form.page = n
  requestLogs()
}

const reset = () => {
  form.competition_id = ''
  form.competitor_name = ''
  form.competitor_mobile = ''
  form.page = 1
  form['per-page'] = 10
  requestLogs()
}
</script>

<template>
  <AppCard title="客户端日志">
    <el-form :inline="true" :model="form">
      <el-form-item label="赛项">
        <el-select clearable filterable v-model="form.competition_id" placeholder="请选择赛项">
          <el-option v-for="item in contestList" :label="item?.name" :value="item.id" :key="item?.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="选手姓名">
        <el-input clearable v-model="form.competitor_name" placeholder="请输入选手姓名" />
      </el-form-item>
      <el-form-item label="选手手机号">
        <el-input clearable v-model="form.competitor_mobile" placeholder="请输入选手手机号" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <AppList v-bind="listOptions" ref="appList" style="margin: 10px 0"> </AppList>
    <div style="display: flex; justify-content: right">
      <el-pagination
        class="table-list-pagination"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="form['per-page']"
        :total="total"
        v-model:current-page="form.page"
        @size-change="pageSizeChange"
        @current-change="fetchList"
      >
      </el-pagination>
    </div>
  </AppCard>
</template>

<style lang="scss"></style>
