<template>
  <AppPage :show-footer="false">
    <n-card rounded-10>
      <CrudTable
        ref="tableRef"
        :columns="columns"
        :query-items="queryItems"
        :getData="handleGetList"
      >
        <template #queryBar>
          <QueryBarItem label="wt2">
            <n-input v-model:value="queryItems.wt2" placeholder="wt2" />
          </QueryBarItem>
          <QueryBarItem label="mpt">
            <n-input v-model:value="queryItems.mpt" placeholder="mpt" />
          </QueryBarItem>
        </template>
      </CrudTable>

      <footer mt-15>
        <n-space>
          <n-button type="primary" @click="handleAdd">新增Token</n-button>
        </n-space>
      </footer>
    </n-card>

    <CrudModal :title="modalTitle" :visible="modalVisible" :loading="modalLoading" @save="() => handleSave(tableRef?.handleSearch)">
      <n-form ref="modalFormRef" :model="modalForm" label-placement="left" label-width="90">
        <n-form-item label="wt2" path="wt2" :rule="{ required: true, message: '请输入 wt2' }">
          <n-input v-model:value="modalForm.wt2" />
        </n-form-item>
        <n-form-item label="mpt" path="mpt" :rule="{ required: true, message: '请输入 mpt' }">
          <n-input v-model:value="modalForm.mpt" />
        </n-form-item>
        <n-form-item label="是否启用" path="is_active">
          <n-switch v-model:value="modalForm.is_active" />
        </n-form-item>
        <n-form-item label="失败次数" path="failed_count">
          <n-input-number v-model:value="modalForm.failed_count" :min="0" />
        </n-form-item>
      </n-form>
    </CrudModal>
  </AppPage>
  
</template>

<script setup>
import { h, onMounted } from 'vue'
import tokenApi from '@/api/token'
import useCRUD from '@/composables/useCRUD'
import { NButton } from 'naive-ui'

const queryItems = ref({ wt2: null, mpt: null })
const tableRef = ref(null)

const columns = [
  { title: 'ID', key: 'id', width: 80 },
  { title: 'wt2', key: 'wt2', minWidth: 160 },
  { title: 'mpt', key: 'mpt', minWidth: 160 },
  { title: '启用', key: 'is_active', width: 90, render: (row) => h('span', row.is_active ? '是' : '否') },
  { title: '失败次数', key: 'failed_count', width: 100 },
  { title: '最后使用时间', key: 'last_used_time', minWidth: 180 },
  { title: '创建时间', key: 'created_at', minWidth: 180 },
  {
    title: '操作',
    key: 'actions',
    width: 160,
    render(row) {
      return h('div', { style: 'display:flex;gap:8px' }, [
        h(NButton, { type: 'primary', size: 'small', onClick: () => handleEdit(row) }, { default: () => '编辑' }),
        h(NButton, { size: 'small', onClick: () => handleDelete(row.id) }, { default: () => '删除' }),
      ])
    },
  },
]

async function handleGetList(params) {
  const res = await tokenApi.list(params)
  return res
}

const initForm = { id: null, wt2: '', mpt: '', is_active: true, failed_count: 0 }
const { modalVisible, modalTitle, modalLoading, handleAdd, handleDelete, handleEdit, handleSave, modalForm, modalFormRef } = useCRUD({
  name: 'Boss Token',
  initForm,
  doCreate: (data) => tokenApi.create(data),
  doUpdate: (data) => tokenApi.update(data.id, data),
  doDelete: (id) => tokenApi.remove(id),
  refresh: () => tableRef?.handleSearch(),
})

onMounted(() => {
  tableRef.value?.handleSearch()
})

</script>
