import Pagination from '@/components/pagination'
import { NDataTable, NIcon, NTooltip } from 'naive-ui'
import { HelpCircleOutline } from '@vicons/ionicons5'
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { sysUserLoginLogPage } from '../api'
import { filterClientType } from '@/utils/filters'

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

    const columns = () => {
      return [
        // {
        //   type: 'expand',
        //   renderExpand: (rowData: any) => {
        //     return `请求参数：${rowData.params} `
        //   }
        // },
        {
          title: '编号',
          key: 'id'
        },
        {
          title: '登录用户',
          key: 'nickname'
        },
        {
          title: '客户端',
          key: 'clientType',
          render(row: any) {
            return filterClientType(row.clientType)
          }
        },
        {
          title: '登录IP',
          key: 'loginIp'
        },
        {
          title: '登录时间',
          key: 'loginTime'
        },
        {
          title: '登录地点',
          key: 'loginRegion'
        }
      ]
    }

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

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

    onMounted(() => {
      getList()
    })
    return () => (
      <>
        <NDataTable loading={state.loading} columns={columns()} data={state.dataList}></NDataTable>
        <Pagination
          v-model:page={state.pagination.page}
          v-model:pageSize={state.pagination.rows}
          v-model:pageTotal={state.pagination.pageTotal}
          onList={getList}
          sync
          saveKey="login-log"
        ></Pagination>
      </>
    )
  }
})
