<template>
  <PageWrapper>
    <n-card :bordered="false" class="pt-3 mb-3 proCard">
      <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
        <template #statusSlot="{ model, field }">
          <n-input v-model:value="model[field]" />
        </template>
      </BasicForm>
    </n-card>
    <n-card :bordered="false" class="proCard">
      <n-data-table :columns="columns" :style="{ minHeight: fwbHeight + 'px' }"
        :paginate-single-page="false"
        :data="onlineTableData.slice((pager.page - 1) * pager.size, pager.page * pager.size)">
        <!-- <template #bodyCell="{ column, record,index }">
          <template v-if="column.key === 'index'">
            {{index+1}}
          </template>
          <template v-if="column.key === 'action'">
            <n-space>
              <n-button type="danger" @click="handleDelete(record.tokenId)">
                强退
              </n-button>
            </n-space>
          </template>
        </template> -->
      </n-data-table>
      <pagination style="justify-content: flex-end" class="mt-10 flex" v-model="pager" @change="loadTable" />
    </n-card>
  </PageWrapper>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue';
import { columns } from './columns';
import { schemas } from './querySchemas';
import { useForm } from '@/components/Form/index';
import { getOnlineList, onlineOut } from '@/api/monitor/online';
import { useMessage, useDialog } from 'naive-ui';
const onlineTableData = ref([]);

/**
 * 定义查询参数
 */
const formParams = reactive({
  ipAddr: '',
  username: '',
});
const message = useMessage();
const dialog = useDialog()
/**
 * 定义分页参数
 */
const pager = ref({
  page: 1,
  size: 10,
  jumper:true,
  count: onlineTableData.value.length,
});
const fwbHeight = document.body.clientHeight - 420;

/**
 * 加载数据列表
 */
const loadTable = async () => {
  onlineTableData.value = await getOnlineList({ ...formParams });
  console.log(onlineTableData.value)
  pager.value.count = onlineTableData.value.length;
};

/**
 * 注册
 */
const [register, { }] = useForm({
  gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
  labelWidth: 80,
  schemas,
});

/**
 * 执行提交表单
 * @param values 参数
 */
function handleSubmit(values) {
  for (const key in formParams) {
    formParams[key] = '';
  }
  for (const key in values) {
    formParams[key] = values[key];
  }
  loadTable();
}

/**
 * 执行重置
 */
function handleReset() {
  for (const key in formParams) {
    formParams[key] = '';
  }
  pager.value.page = 1;
  loadTable();
}

/**
 * 执行删除
 * @param id 参数
 */
async function handleDelete(id) {
  Modal.confirm({
    title: '提示',
    content: '确定要强退？',
    onOk: async () => {
      await onlineOut(id);
      message.success('强退成功');
      loadTable();
    },
  });
}

/**
 * 钩子函数
 */
onMounted(() => {
  loadTable();
});
</script>

<style lang="scss" scoped></style>
