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

export default defineComponent({
  name: 'login-device',
  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: 'userAgent',
          width: '400'
        },
        {
          title: '绑定时间',
          key: 'bindTime'
        },
        {
          title: '登录时间',
          key: 'updateTime'
        }
      ]
    }

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