<!--
 * @Author: changjun
 * @FilePath: /qingdao-safety-product/src/views/threatIntelligenceManagement/ipAddressList.vue
 * @Date: 2022-08-03 14:08:25
 * @Description: 
 * @LastEditTime: 2023-02-08 17:28:38
 * @LastEditors: 李佐宁
-->
<script setup lang="ts">

import TableProgressBarItem from '../components/TableProgressBarItem.vue'
import TableCountryItem from '../components/TableCountryItem.vue'
import QuickSearch from '../components/QuickSearch.vue'
import { useIpList } from '../composable/useIpList'

const {
  page,
  pageSize,
  total,
  tableData,
  searchFormData,
  searchFormColumns,
  tableColumn,
  handleSearchBlockSearch,
  handleSearchBlockReset,
  handleQuickSearch,
  tableBtnClick,
  sizeChange,
  currentChange,
} = useIpList()

</script>

<template>
  <YaPageContent :formData="searchFormData" searchLabelWidth="90px" :formColumns="searchFormColumns" :tableData="tableData"
    :tableColumns="tableColumn" @search="handleSearchBlockSearch" @reset="handleSearchBlockReset" @tableBtnClick="tableBtnClick" :currentPage="page"
    :total="total" :pageSize="pageSize" @sizeChange="sizeChange" @currentChange="currentChange"
     >

    <template #pageContentTop>
      <QuickSearch placeholder="请输入IP/地理位置/来源" @search="handleQuickSearch"></QuickSearch>
    </template>

    <template #geoPosition="{ item }">
      <TableCountryItem :name="item.countryName" :code="item.countryCode"></TableCountryItem>>
    </template>

    <template #degreeMalicious="{ item }">
      <TableProgressBarItem :percentage="item.degreeMaliciousPercent" color="#F84A51" />
    </template>
  </YaPageContent>

</template>
