<script lang="ts" setup>
import { useTemplateRef } from 'vue';
import { NDatePicker, NSelect } from 'naive-ui';
import dayjs from 'dayjs';
import { client, safeClient } from '@/service/api';
import type { TableBaseColumns, TableFetchData, TableFilterColumns, TableInst } from '@/components/table';
import UserSelect from '@/components/common/user-select.vue';

defineOptions({
  name: 'CheckInPage'
});

const props = defineProps<{
  userId: string;
}>();

const tableInst = useTemplateRef<TableInst>('tableInst');

const fetchData: TableFetchData = ({ pagination, filter }) => {
  return safeClient(() => client.api.admin.checkIns.get({ query: { userId: props.userId, ...pagination, ...filter } }));
};

const columns: TableBaseColumns = [
  {
    key: 'user.name',
    title: '用户'
  },
  {
    key: 'checkInType',
    title: '签到类型',
    render: (row: any) => {
      return row.checkInType === 'meeting' ? '会议签到' : '应用签到';
    }
  },
  {
    key: 'checkInAt',
    title: '签到时间',
    render: (row: any) => {
      return dayjs(row.checkInAt).format('YYYY-MM-DD HH:mm:ss');
    }
  }
];

const filterColumns: TableFilterColumns = [
  {
    key: 'userId',
    title: '用户',
    component: UserSelect
  },
  {
    key: 'checkInType',
    title: '签到类型',
    component: NSelect,
    componentProps: {
      options: [
        { label: '会议签到', value: 'meeting' },
        { label: '应用签到', value: 'app' }
      ]
    }
  },
  {
    key: 'startDate',
    title: '开始日期',
    component: NDatePicker,
    componentProps: form => ({
      clearable: true,
      valueFormat: 'yyyy-MM-dd',
      formattedValue: form.startDate,
      onUpdateFormattedValue: val => {
        form.startDate = val;
      }
    })
  },
  {
    key: 'endDate',
    title: '结束日期',
    component: NDatePicker,
    componentProps: form => ({
      clearable: true,
      valueFormat: 'yyyy-MM-dd',
      formattedValue: form.endDate,
      onUpdateFormattedValue: val => {
        form.endDate = val;
      }
    })
  }
];
</script>

<template>
  <TableBase
    ref="tableInst"
    :fetch-data="fetchData"
    :columns="columns"
    :filter-columns="filterColumns"
    :scroll-x="800"
    :header-operations="{
      add: false,
      refresh: true,
      columns: true
    }"
  />
</template>

<style lang="css" scoped></style>
