<template>
  <TableCard
    v-model:page-no="queryParams.pageNo"
    v-model:page-size="queryParams.pageSize"
    :data="tableData"
    :columns="columns"
    :total="total"
    @change="handleChange"
    @selection-change="handleSelectionChange"
  >
    <template #toolbar-left>
      <el-button plain type="warning" size="large" @click="dialogForm.visible = true">
        <template #icon>
          <SvgIcon icon-class="Harm" />
        </template>
        一键加入风险名单
      </el-button>
      <el-button plain type="danger" size="large">
        <template #icon>
          <SvgIcon icon-class="Reduce-one" />
        </template>
        一键加入黑名单
      </el-button>
      <el-button plain type="success" size="large">
        <template #icon>
          <SvgIcon icon-class="Link-right" />
        </template>
        一键解除封禁名单</el-button
      >
      <el-button type="primary" :icon="Refresh" size="large" class="is-solid">刷新</el-button>
    </template>
    <template #toolbar-right>
      <el-button :icon="Upload" type="primary" class="is-solid" size="large">导出</el-button>
    </template>

    <template #column-enableStatus="{ row }">
      <StatusText :text="row.enableStatus" />
    </template>

    <template #column-sourceIpMethod="{ row }">
      <el-tag :type="row.sourceIpMethod === '不获取' ? 'success' : 'danger'">
        {{ row.sourceIpMethod }}
      </el-tag>
    </template>

    <template #column-operation>
      <el-button type="primary" link>编辑</el-button>
      <el-button type="danger" link>删除</el-button>
    </template>
  </TableCard>
</template>
<script setup lang="ts">
  import { Refresh, Upload } from '@element-plus/icons-vue'

  const dialogForm = reactive({
    visible: false,
  })

  const state = reactive({
    queryParams: {
      pageNo: 1,
      pageSize: 10,
      searchKeyword: '',
    },
    total: 20,
    tableData: [
      {
        id: 1,
        instanceId: '123456',
        protocolType: 'TCP',
        sourceIp: '192.168.1.100',
        sourcePort: 8080,
        targetIp: '192.168.1.200',
        targetPort: 8080,
        enableStatus: '启用',
        sourceIpMethod: '不获取',
        priority: 1,
        createTime: '2023-08-01 10:00:00',
        updateTime: '2023-08-01 10:00:00',
      },
    ],
    selectedList: [] as any[],
  })

  const columns = [
    { type: 'selection', width: 55 },
    { label: '设备ID', prop: 'id' },
    { label: 'SDK版本', prop: 'instanceId' },
    { label: '在线状态', prop: 'protocolType' },
    { label: '调度状态', prop: 'sourceIp' },
    { label: '请求次数', prop: 'sourcePort' },
    { label: '设备IP', prop: 'targetIp' },
    { label: '设备唯一ID', prop: 'enableStatus' },
    { label: '客户备注', prop: 'sourceIpMethod' },
    { label: '客户端地区', prop: 'priority' },
    { label: '操作系统', prop: 'createTime' },
    { label: '当前客户端版本号', prop: 'updateTime' },
    { label: '上传流量汇总', prop: 'updateTime' },
    { label: '下载流量汇总', prop: 'updateTime' },
    { label: '创建时间', prop: 'updateTime' },
    { label: '更新时间', prop: 'updateTime' },
    { label: '操作', prop: 'operation', minWidth: 120, isAction: true },
  ]
  function handleSelectionChange(selection: any[]) {
    state.selectedList = selection
  }

  const handleChange = (val: any) => {
    state.queryParams.pageNo = val.pageNo
    state.queryParams.pageSize = val.pageSize
  }

  const { queryParams, total, tableData } = toRefs(state)
</script>
<style lang="scss" scoped></style>
