<template>

  <div class="flow-select-main">
    <el-table :data="tableData" :header-cell-style="{'background':'#f6f8fb!important',
    'color':'#495060'}"
    :cell-style="{'padding':'20px 0 !important','font-size':'12px'}">
      <el-table-column label="记录号" prop="flow_record_no" width="180"/>
      <el-table-column label="访问者IP" prop="flow_visitor_ip" width="180"/>
      <el-table-column label="所在地" prop="flow_location">
        <template #default="scope">
          <div> {{scope.row.flow_location  }}</div>
        </template>
      </el-table-column>
      <el-table-column label="访问日期" prop="flow_create_time"/>
      <el-table-column label="来源" prop="flow_source"/>
    </el-table>
  </div>

    <pagination  v-model:limit="queryParams.limit" v-model:page="queryParams.page" :total="total"
                @pagination="getList"/>

</template>

<script lang="ts" setup>
import {getFlowRecord} from "~/service/flow.js"
import {reactive,ref} from "vue";
let tableData = ref([
])
let total = ref(0);
const queryParams = reactive({
  page: 1,
  limit: 20
})

 function  getList() {
  getFlowRecord(queryParams).then((res) => {
    if (res.code == 0) {
      console.log(res,'s')
      tableData.value = res.data
      total.value = res.count
    }
  })
}
getList()


</script>
<style scoped>
.el-card__body{
  padding-top:20px!important;
}
</style>