<template>
  <el-dialog :model-value="visible" :title="title" width="600px" @close="close">
    <div>
      <el-table v-loading="loading" height="50vh" :data="list" border>
        <el-table-column prop="typeStr" label="操作类型" :width="120" />
        <el-table-column prop="time" label="操作时间" :width="200" />
        <el-table-column prop="ip" label="IP" :width="180" />
        <el-table-column prop="client" label="操作终端" :width="180" />
      </el-table>
      <div class="flex justify-end">
        <pagination :totalRow="total" :pageSize="pageSize" :currentPage="page" @handle-size-change="changeSize"
          @handle-current-change="changePage" />
      </div>
    </div>
  </el-dialog>
</template>
<script setup>
import { ref, watch, computed } from "vue";
import useElPagination from "@/hooks/useElPagination";
import { getLoginLog } from '@/api/account';
import dayjs from "dayjs";
import pagination from "@/components/pagination/pagination.vue";

const PlatformMap = {
  PC: '电脑网页',
  MATEPAD: 'PAD'
}
const typeMap = {
  login: '登录',
  loginout: '退出',
}

const props = defineProps({
  visible: { type: Boolean, default: false },
  user: { type: Object, default: () => ({}) }
});
const emits = defineEmits(["close"]);
const { list, more, page, pageSize, changePage, changeSize, loadMore, total } = useElPagination(getList)

const logList = computed(() => props.logs);
const loading = ref(false);
const title = computed(() => `${props.user?.accountName || ""} 登录日志`);

function close() {
  emits("close");
}

async function getList() {
  loading.value = true;
  const { data, success, message } = await getLoginLog({
    page: page.value,
    pageSize: pageSize.value,
    accountId: props.user._id,
    userId: props.user.userid
  });
  loading.value = false;
  list.value = data && Array.isArray(data.data) ? data.data.map(i => ({
    ...i,
    typeStr: typeMap[i.type] || '',
    time: dayjs(i.createTime).format("YYYY-MM-DD HH:mm:ss"),
    client: PlatformMap[i.platform] || '',
  })) : [];
  total.value = data && data.total ? data.total : 0;
  if (!success) {
    ElMessage.error(message);
  }
}

watch(() => props.visible, n => {
  if (n) {
    changePage(1)
  }
})
</script>
<style scoped>
/* 可根据需要自定义样式 */
</style>
