<script lang="ts" setup>
import { h, onMounted, ref, watch } from 'vue';
import type { DataTableColumns, DataTableRowKey, RowData } from 'naive-ui';
import {
  NButton,
  NCard,
  NDataTable,
  NDialog,
  NForm,
  NFormItem,
  NInput,
  NModal,
  NPagination,
  NRadio,
  NSpace,
  NSpin,
  useDialog,
  useMessage
} from 'naive-ui';
import { ElPagination } from 'element-plus';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import { api_loginLog } from '@/api';

zhCn.el.pagination.pageClassifier = '页';
// 常量和响应式数据
const tableData = ref([]);
const message = useMessage();
const pageSizes = ref([10, 20, 50, 100]);
const show = ref(false);
const range = ref<any>();
const pageData = ref({
  pageNum: 1,
  pageSize: 10,
  total: 10
});

const serarchData = ref({
  pageNum: pageData.value.pageNum,
  pageSize: pageData.value.pageSize,
  username: '',
  startTime: '',
  endTime: ''
});

// 表格列配置
const tableColumn = [
  {
    title: '排序',
    key: 'id',
    align: 'center',
    width: 80
  },
  {
    title: '用户名',
    key: 'username',
    align: 'center',
    minWidth: 200
  },
  {
    title: 'IP',
    key: 'ip',
    align: 'center',
    minWidth: 120
  },
  {
    title: '登录地',
    key: 'address',
    align: 'center',
    minWidth: 180
  },
  {
    title: '创建日期',
    key: 'createTime',
    align: 'center',
    minWidth: 180
  }
];

const checkedRowKeysRef = ref<DataTableRowKey[]>([]);

function handleCheck(rowKeys: DataTableRowKey[]) {
  checkedRowKeysRef.value = rowKeys;
}

function handleSearch() {
  search();
}

function handleReset() {
  serarchData.value = {
    pageNum: 1,
    pageSize: 10,
    username: '',
    startTime: '',
    endTime: ''
  };
  range.value = null;

  search();
}

async function search() {
  const res = await api_loginLog(serarchData.value);
  if (res.data.code == 200) {
    tableData.value = res.data.data.records;
    pageData.value = {
      pageNum: res.data.data.pageNum,
      pageSize: res.data.data.pageSize,
      total: Number(res.data.data.total)
    };
    // = res.data.data.total;
  } else {
    message.error(res.msg);
  }
}

function watchTimeData(value: any) {
  serarchData.value.startTime = value[0];
  serarchData.value.endTime = value[1];
}

function handleclear() {
  serarchData.value.startTime = '';
  serarchData.value.endTime = '';
}

function handlePage() {
  serarchData.value.pageNum = pageData.value.pageNum;
  search();
}

function handlePageSize() {
  serarchData.value.pageSize = pageData.value.pageSize;
  pageData.value.pageNum = 1;
  serarchData.value.pageNum = 1;
  search();
}

onMounted(() => {
  search();
});
</script>

<template>
  <div id="DepartmentPage">
    <div>
      <NSpin :show="show">
        <NCard size="medium">
          <div style="margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center">
            <NSpace>
              <div>
                用户名
                <NInput v-model:value="serarchData.username" placeholder="请输入角色名称"
                  style="width: 200px; margin-left: 10px" clearable="true" />
              </div>
              <div style="display: flex; align-items: center; margin-left: 30px">
                <div>日期范围</div>
                <NDatePicker v-model:value="range" type="datetimerange" clearable style="margin-left: 10px"
                  @update:value="watchTimeData" @clear="handleclear" />
              </div>

              <NButton color="#2198f2" style="padding: 0px 17px; border-radius: 5px; margin-left: 20px"
                @click="handleSearch">
                查询
              </NButton>
              <NButton style="padding: 0px 17px; border-radius: 5px" @click="handleReset">重置</NButton>
            </NSpace>
          </div>

          <NDataTable :row-key="row => row.id" :columns="tableColumn" :data="tableData" :bordered="true"
            :pagination="false" tree-column-key="name" @update:checked-row-keys="handleCheck" />

          <div style="display: flex; justify-content: end; margin-top: 30px;">
            <ElPagination v-model:current-page="pageData.pageNum" v-model:page-size="pageData.pageSize"
              :page-sizes="[10, 20, 30, 40]" background="#2196f3" layout="sizes, prev, pager, next" :total="pageData.total"
              @size-change="handlePageSize" @current-change="handlePage" />
          </div>
        </NCard>
      </NSpin>
    </div>
  </div>
</template>

<style scoped>
:deep(.n-form-item-content > div) {
  &::-webkit-scrollbar {
    display: none;
  }
}

:deep(.n-pagination .n-pagination-item.n-pagination-item--active) {
  background-color: #2196ed !important;
  color: white !important;
  border-color: #2196ed !important;
}
</style>
