<script setup>
import { PlusOutlined } from '@ant-design/icons-vue'
import CrudTableModal from './components/crud-table-modal.vue'
import { deleteApi, getListApi } from '~@/api/list/gateway-list.js'
import { useTableQuery } from '~@/composables/table-query'
import { useRouter } from 'vue-router'

const message = useMessage()
const columns = shallowRef([
  {
    title: 'ID',
      dataIndex: 'id', // JSON 属性名是 'id'
    key: 'id',       // 加上 key 是好习惯
  },
  {
    title: '订单ID',
    dataIndex: 'hostId', // Go 的 host_id -> JSON 的 hostId
    key: 'hostId',
  },
  {
    title: '规则ID',
    dataIndex: 'ruleId',
    key: 'ruleId',
  },
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '备注',
    dataIndex: 'comment', // Go 的 comment -> JSON 的 comment
    key: 'comment',
  },
  {
    title: '运营商',
    dataIndex: 'operator',
    key: 'operator',
  },
  {
    title: '是否封禁UDP',
    dataIndex: 'banUdp', // Go 的 ban_udp -> JSON 的 banUdp
    key: 'banUdp',
  },
  {
    title: '是否封海外',
    dataIndex: 'banOverseas', // Go 的 ban_udp -> JSON 的 banUdp
    key: 'banOverseas',
  },

  {
    title: '创建时间',
    dataIndex: 'createdAt', // Go 的 created_at -> JSON 的 createdAt
    key: 'createdAt',
  },
  {
    title: '更新时间',
    dataIndex: 'updatedAt',
    key: 'updatedAt',
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
  },
])
const { state, initQuery, resetQuery, query } = useTableQuery({
  queryApi: getListApi,
  queryParams: {
    id:undefined,
    name: undefined,
  },
  afterQuery: (res) => {
    if (!res || !Array.isArray(res.records)) {
      // 如果数据格式不正确，返回一个空状态，防止程序崩溃
      return { list: [], total: 0 }
    }
    return res
  },
})
const crudTableModal = ref()
async function handleDelete(record) {
  if (!record.id)
    return message.error('id 不能为空')
  try {
    const res = await deleteApi(record.id)
    if (res.code === 0)
      await query()
      message.success('删除成功')

  }
  catch (e) {
    console.log(e)
  }

}
function handleAdd() {
  crudTableModal.value?.open()
}
function handleEdit(record) {
  crudTableModal.value?.open(record)
}

const router = useRouter()
function handleViewIpList(record) {
  router.push(`/menu/ip-list?id=${record.id}`)
}

</script>

<template>
  <page-container>
    <a-card mb-4>
      <a-form class="system-crud-wrapper" :label-col="{ span: 7 }" :model="state.queryParams">
        <a-row :gutter="[15, 0]">
          <a-col :span="6">
            <a-form-item name="name" label="名">
              <a-input v-model:value="state.queryParams.name" placeholder="请输入名" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item name="value" label="值">
              <a-input v-model:value="state.queryParams.value" placeholder="请输入值" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item name="remark" label="备注">
              <a-input v-model:value="state.queryParams.remark" placeholder="请输入备注" />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-space flex justify-end w-full>
              <a-button :loading="state.loading" type="primary" @click="initQuery">
                查询
              </a-button>
              <a-button :loading="state.loading" @click="resetQuery">
                重置
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <a-card title="网关组列表">
      <template #extra>
        <a-space size="middle">
          <a-button type="primary" @click="handleAdd">
            <template #icon>
              <PlusOutlined />
            </template>
            新增
          </a-button>
        </a-space>
      </template>
      <a-table
          row-key="id" :row-selection="state.rowSelections" :loading="state.loading" :columns="columns"
          :data-source="state.dataSource" :pagination="state.pagination"
      >
        <template #bodyCell="scope">
          <template v-if="scope?.column?.dataIndex === 'action'">
            <div flex gap-2>
              <a-button type="link" @click="handleEdit(scope?.record)">
                编辑
              </a-button>
              <a-popconfirm
                  title="确定删除该条数据？" ok-text="确定" cancel-text="取消"
                  @confirm="handleDelete(scope?.record)"
              >
                <a-button type="link">
                  删除
                </a-button>
              </a-popconfirm>
              <a-button type="link" @click="handleViewIpList(scope?.record)">
                查看IP列表
              </a-button>
            </div>
          </template>

          <template v-else-if="scope?.column?.dataIndex === 'operator'">
            <!-- 直接在这里用 v-if 判断 -->
            <span v-if="scope?.text === 1">电信</span>
            <span v-else-if="scope?.text === 2">BGP</span>
            <span v-else>未知</span>
          </template>

          <template v-else-if="scope?.column?.dataIndex === 'banUdp'">
            <!-- 直接在这里用 v-if 判断 -->
            <span v-if="scope?.text === 0">否</span>
            <span v-else-if="scope?.text === 1">是</span>
            <span v-else>未知</span>
          </template>

          <template v-else-if="scope?.column?.dataIndex === 'banOverseas'">
            <!-- 直接在这里用 v-if 判断 -->
            <span v-if="scope?.text === 0">否</span>
            <span v-else-if="scope?.text === 1">是</span>
            <span v-else>未知</span>
          </template>
        </template>
      </a-table>
    </a-card>

    <CrudTableModal ref="crudTableModal" @ok="query" />
  </page-container>
</template>

<style lang="less" scoped>
.system-crud-wrapper{
  .ant-form-item{
    margin: 0;
  }
}
</style>
