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 { sysUserLoginPage } from '../api'
import { filterClientType } from '@/utils/filters'

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

    const columns = () => {
      return [
        {
          title: '编号',
          key: 'id'
        },
        {
          title: '登录用户',
          key: 'nickname'
        },
        {
          title: '客户端',
          key: 'clientType',
          render(row: any) {
            return filterClientType(row.clientType)
          }
        },
        {
          title: '登录总次数',
          key: 'loginCount'
        },
        {
          title: '最后登录IP',
          key: 'lastLoginIp'
        },
        {
          title: '最后登录时间',
          key: 'lastLoginTime'
        },
        {
          title: '锁定日期',
          key: 'lockDate'
        },
        {
          title(column: any) {
            return (
              <NTooltip>
                {{
                  trigger: () => (
                    <span style={{ display: 'flex', alignItems: 'center' }}>
                      锁定时间
                      <NIcon size={18}>
                        <HelpCircleOutline />
                      </NIcon>
                    </span>
                  ),
                  default: () => '超过锁定时间自动解锁'
                }}
              </NTooltip>
            )
          },
          key: 'lockTime'
        }
      ]
    }

    const getList = async () => {
      try {
        state.loading = true
        const { data } = await sysUserLoginPage({
          ...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-statistics"
        ></Pagination>
      </>
    )
  }
})
