import Pagination from '@/components/pagination'
import { filterClientType } from '@/utils/filters'
import { NDataTable, NDescriptions, NDescriptionsItem, NIcon, NTooltip } from 'naive-ui'
import type { EllipsisProps } from 'naive-ui'
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { sysUserAuditLogPage } from './api'
import TheTooltip from '@/components/TheTooltip'

export default defineComponent({
  name: 'interface-log',
  setup() {
    const state = reactive({
      loading: false,
      pagination: {
        page: 1,
        rows: 10,
        pageTotal: 0
      },
      searchForm: {
        name: ''
      },
      dataList: [] as any,
      visiableCity: false
    })

    const columns = (): any => {
      return [
        {
          type: 'expand',
          renderExpand: (rowData: any) => {
            return `请求参数：${rowData.params} `
          }
        },
        {
          title: '编号',
          key: 'id',
          render(row: any) {
            return (
              <NDescriptions labelPlacement="left" column={1}>
                <NDescriptionsItem label="日志编号">{row.id}</NDescriptionsItem>
                <NDescriptionsItem label="操作用户">{row.nickname}</NDescriptionsItem>
                <NDescriptionsItem label="操作时间">{row.startTime}</NDescriptionsItem>
              </NDescriptions>
            )
          }
        },
        // {
        //   title: '操作用户',
        //   key: 'nickname'
        // },
        {
          title: '客户端',
          key: 'clientType',
          render(row: any) {
            return filterClientType(row.clientType)
          }
        },
        {
          title: '接口信息',
          key: 'requestUri',
          render(row: any) {
            return (
              <NDescriptions labelPlacement="left" column={1}>
                <NDescriptionsItem label="接口地址">
                  {' '}
                  <TheTooltip content={row.requestUri} />{' '}
                </NDescriptionsItem>
                <NDescriptionsItem label="接口描述">
                  {' '}
                  <TheTooltip content={row.description} />{' '}
                </NDescriptionsItem>
              </NDescriptions>
            )
          }
        },
        // {
        //   title: '接口描述',
        //   key: 'description'
        // },

        {
          title: '接口类路径',
          key: 'classPath',
          width: 230
        },
        // {
        //   title: '操作时间',
        //   key: 'startTime'
        // },
        {
          title: '调用时长',
          key: 'consumingTime',
          render(row: any) {
            return `${row.consumingTime}ms`
          }
        }
      ]
    }

    const getList = async () => {
      try {
        state.loading = true
        const { data } = await sysUserAuditLogPage({
          ...state.pagination
        })
        state.loading = false
        state.pagination.pageTotal = Number(data.total)

        state.dataList = data.rows || []
      } catch {}
    }

    onMounted(() => {
      getList()
    })
    return () => (
      <div class="system-menu-container">
        <div class={['section-container']}>
          <NDataTable
            loading={state.loading}
            columns={columns()}
            data={state.dataList}
            rowKey={(row: any) => row.id}
          ></NDataTable>
          <Pagination
            v-model:page={state.pagination.page}
            v-model:pageSize={state.pagination.rows}
            v-model:pageTotal={state.pagination.pageTotal}
            onList={getList}
            sync
          ></Pagination>
        </div>
      </div>
    )
  }
})
