<template>
    <Table url="/api/v1/logger/operation" rowKey="logId" :buttons="buttons" ref="table">
        <template #drawer="drawer">
            <Form v-bind="drawer" />
        </template>

        <template #search="{ query }">
            <MoreItem :label="$t('select.startTime')">
                <a-date-picker
                    class="tw-w-full"
                    show-time
                    v-model="query.startTime"
                    valueFormat="YYYY-MM-DD HH:mm:ss"
                />
            </MoreItem>
            <MoreItem :label="$t('select.endTime')">
                <a-date-picker
                    class="tw-w-full"
                    show-time
                    v-model="query.endTime"
                    valueFormat="YYYY-MM-DD HH:mm:ss"
                />
            </MoreItem>
            <MoreItem :label="$t('log.userId')">
                <a-input v-model="query.operatorId" :placeholder="$t('input.placeholder')" />
            </MoreItem>
            <MoreItem :label="$t('log.businessModule')">
                <a-select v-model="query.loginType" allowClear :placeholder="$t('select.placeholder')">
                    <a-select-option value="LOGIN">{{ $t('log.login') }}</a-select-option>
                    <a-select-option value="LOGOUT">{{ $t('log.logout') }}</a-select-option>
                </a-select>
            </MoreItem>
        </template>
        <template #moreSearch="{ query }">
            <MoreItem :label="$t('log.operationService')">
                <a-select v-model="query.isSuccess" allowClear :placeholder="$t('select.placeholder')">
                    <a-select-option value="0">{{ $t('fail') }}</a-select-option>
                    <a-select-option value="1">{{ $t('success') }}</a-select-option>
                </a-select>
            </MoreItem>
        </template>
        <a-table-column :title="$t('log.userId')" data-index="operatorId" />
        <a-table-column :title="$t('user.name')" data-index="operatorName" />
        <a-table-column :title="$t('log.businessModule')" data-index="moduleCode" />
        <a-table-column :title="$t('log.operationService')" data-index="serviceCode" />
        <a-table-column :title="$t('log.operateTime')" data-index="operateTime" />
    </Table>
</template>

<script>
import Form from './form.vue';
import { Table, MoreItem } from '@/components/table';

export default {
    components: { Form, Table, MoreItem },
    data() {
        return {
            buttons: [
                {
                    label: this.$t('table.view'),
                    click: this.view,
                },
            ],
        };
    },
    methods: {
        view(row) {
            this.$refs['table'].show({ row, title: this.$t('table.view') });
        },
    },
};
</script>
