<script setup>
import { computed, nextTick, onActivated, reactive, ref } from 'vue'
import IconButton from '../common/IconButton.vue'
import Refresh from '../icons/Refresh.vue'
import useConnectionStore from '../../stores/connections.js'
import { map, uniqBy } from 'lodash'
import { useI18n } from 'vue-i18n'

const connectionStore = useConnectionStore()
const i18n = useI18n()
const data = reactive({
    loading: false,
    server: '',
    keyword: '',
    history: [],
})
const filterServerOption = computed(() => {
    const serverSet = uniqBy(data.history, 'server')
    const options = map(serverSet, ({ server }) => ({
        label: server,
        value: server,
    }))
    options.splice(0, 0, {
        label: i18n.t('all'),
        value: '',
    })
    return options
})

const tableRef = ref(null)

const loadHistory = () => {
    data.loading = true
    connectionStore
        .getCmdHistory()
        .then((list) => {
            data.history = list
        })
        .finally(() => {
            data.loading = false
            tableRef.value?.scrollTo({ top: 999999 })
        })
}
onActivated(() => {
    nextTick().then(loadHistory)
})
</script>

<template>
    <n-card
        :title="$t('launch_log')"
        class="content-container flex-box-v"
        content-style="display: flex;flex-direction: column; overflow: hidden;"
    >
        <n-form inline :disabled="data.loading" class="flex-item">
            <n-form-item :label="$t('filter_server')">
                <n-select
                    style="min-width: 100px"
                    v-model:value="data.server"
                    :options="filterServerOption"
                    :consistent-menu-width="false"
                />
            </n-form-item>
            <n-form-item :label="$t('filter_keyword')">
                <n-input v-model:value="data.keyword" placeholder="" clearable />
            </n-form-item>
            <n-form-item>
                <icon-button :icon="Refresh" border t-tooltip="refresh" @click="loadHistory" />
            </n-form-item>
        </n-form>
        <div class="fill-height flex-box-h" style="user-select: text">
            <n-data-table
                ref="tableRef"
                class="flex-item-expand"
                :columns="[
                    {
                        title: $t('exec_time'),
                        key: 'time',
                        defaultSortOrder: 'ascend',
                        sorter: 'default',
                        width: 180,
                    },
                    {
                        title: $t('server'),
                        key: 'server',
                        filterOptionValue: data.server,
                        filter(value, row) {
                            return value === '' || row.server === value.toString()
                        },
                        width: 150,
                        ellipsis: true,
                    },
                    {
                        title: $t('cmd'),
                        key: 'cmd',
                        filterOptionValue: data.keyword,
                        filter(value, row) {
                            return value === '' || !!~row.cmd.indexOf(value.toString())
                        },
                    },
                ]"
                :data="data.history"
                flex-height
            />
        </div>
    </n-card>
</template>

<style scoped lang="scss">
@import 'content';

.content-container {
    padding: 5px;
    box-sizing: border-box;
}
</style>
