<template>
  <CommonPage>
    <template #action>
      <NButton type="primary" @click="handleAdd()">
        <i class="i-material-symbols:add mr-4 text-18" />
        新增
      </NButton>
    </template>

    <MeCrud ref="$table" v-model:query-items="queryItems" :scroll-x="1200" :columns="columns" :get-data="api.read">
      <MeQueryItem label="用户名" :label-width="80">
        <n-input v-model:value="queryItems.useName" type="text" placeholder="请输入用户名" clearable>
          <template #password-visible-icon />
        </n-input>
      </MeQueryItem>

      <MeQueryItem label="时间段" :label-width="80">
        <n-date-picker v-model:value="queryItems.times" type="datetimerange" :update-value-on-close="true" clearable style="width:340px" />
      </MeQueryItem>
    </MeCrud>

    <MeModal ref="modalRef" width="520px">
      <n-form ref="modalFormRef" label-placement="left" label-align="left" :label-width="80" :model="modalForm">
        <n-form-item
          label="分类名" path="title" :rule="{
            required: true,
            message: '请输入分类名',
            trigger: ['input', 'blur'],
          }"
        >
          <n-input v-model:value="modalForm.title" />
        </n-form-item>
        <n-form-item label="备注" path="remark">
          <n-input v-model:value="modalForm.remark" />
        </n-form-item>

        <n-form-item label="状态" path="enable">
          <NSwitch v-model:value="modalForm.enable">
            <template #checked>
              启用
            </template>
            <template #unchecked>
              停用
            </template>
          </NSwitch>
        </n-form-item>
      </n-form>
    </MeModal>
  </CommonPage>
</template>

<script setup>
import { MeCrud, MeModal, MeQueryItem } from '@/components'
import { useCrud } from '@/composables'
import { useUserStore } from '@/store/index.js'
import { formatDateTime } from '@/utils'
import { NButton, NSwitch } from 'naive-ui'
import { onMounted, watchEffect } from 'vue'
import api from './api'

defineOptions({ name: 'OperationLog' })

const router = useRouter()
const { userId } = useUserStore()
const $table = ref(null)
/** QueryBar筛选参数（可选） */
const queryItems = ref({})

const { modalRef, modalFormRef, modalAction, modalForm, handleAdd, handleDelete, handleEdit }
  = useCrud({
    name: '分类',
    doCreate: api.create,
    doDelete: api.delete,
    doUpdate: api.update,
    initForm: { enable: true },
    refresh: (_, keepCurrentPage) => $table.value?.handleSearch(keepCurrentPage),
  })
onMounted(() => {
  $table.value?.handleSearch()
})
watchEffect(() => {

})
const columns = [

  { title: '请求URL', key: 'requestUrl' },
  { title: '请求方式', key: 'method' },
  { title: 'ip', key: 'ip' },
  { title: '用户名', key: 'user.username' },
  {
    title: '操作时间',
    key: 'createTime',
    render: row => h('span', formatDateTime(row.createTime)),
  },
  // {
  //   title: '操作',
  //   key: 'actions',
  //   width: 200,
  //   align: 'center',
  //   fixed: 'right',
  //   render(row) {
  //     return [
  //       h(
  //         NButton,
  //         {
  //           size: 'small',
  //           type: 'primary',
  //           style: 'margin-left: 12px;',
  //           disabled: row.code === 'SUPER_ADMIN',
  //           onClick: () => handleEdit(row),
  //         },
  //         {
  //           default: () => '编辑',
  //           icon: () => h('i', { class: 'i-material-symbols:edit-outline text-14' }),
  //         },
  //       ),

  //       h(
  //         NButton,
  //         {
  //           size: 'small',
  //           type: 'error',
  //           style: 'margin-left: 12px;',
  //           disabled: row.code === 'SUPER_ADMIN',
  //           onClick: () => handleDelete(row.id),
  //         },
  //         {
  //           default: () => '删除',
  //           icon: () => h('i', { class: 'i-material-symbols:delete-outline text-14' }),
  //         },
  //       ),
  //     ]
  //   },
  // },
]

async function handleEnable(row) {
  row.enableLoading = true
  try {
    await api.update({ id: row.id, enable: !row.enable })
    row.enableLoading = false
    $message.success('操作成功')
    $table.value?.handleSearch()
  }
  catch (error) {
    console.error(error)
    row.enableLoading = false
  }
}
</script>
