<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
        type="primary"
        :icon="CirclePlus"
        size="large"
        class="is-solid"
        @click="dialogForm.visible = true"
        >添加</el-button
      >
      <el-button type="primary" disabled :icon="Delete" size="large" class="is-solid"
        >删除</el-button
      >
      <el-button type="primary" :icon="Refresh" size="large" class="is-solid">刷新</el-button>
    </template>
    <template #toolbar-right>
      <el-input
        v-model="queryParams.searchKeyword"
        :prefix-icon="Search"
        size="large"
        placeholder="请输入关键词搜索"
        style="width: 300px"
        clearable
      />
      <el-button :icon="Search" type="primary" class="is-solid" size="large">搜索</el-button>
      <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 { CirclePlus, Delete, Refresh, Search, 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: '序号', prop: 'id' },
    { label: '所属实例ID', prop: 'instanceId' },
    { label: '协议类型', prop: 'protocolType' },
    { label: '源IP', prop: 'sourceIp' },
    { label: '源端口', prop: 'sourcePort' },
    { label: '目标IP', prop: 'targetIp' },
    { label: '规则启用状态', prop: 'enableStatus' },
    { label: '源IP获取方式', prop: 'sourceIpMethod' },
    { label: '优先级(数值越小优先级越高)', prop: 'priority', minWidth: 160 },
    { label: '创建时间', prop: 'createTime' },
    { 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>
