<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" type="info" :closable="false" show-icon>
            {{ t('config.depositChannel.desc') }}
        </el-alert>

        <TableHeader
            :buttons="['refresh', 'edit', 'quickSearch', 'columnDisplay']"
            :quick-search-placeholder="t('Quick search placeholder', { fields: t('config.depositChannel.quick Search Fields') })"
        ></TableHeader>

        <Table ref="tableRef"></Table>

        <PopupForm />
    </div>
</template>

<script setup lang="ts">
import { onMounted, provide, useTemplateRef } from 'vue'
import { useI18n } from 'vue-i18n'
import PopupForm from './popupForm.vue'
import { baTableApi } from '/@/api/common'
import { defaultOptButtons } from '/@/components/table'
import TableHeader from '/@/components/table/header/index.vue'
import Table from '/@/components/table/index.vue'
import baTableClass from '/@/utils/baTable'

defineOptions({
    name: 'config/depositChannel',
})

const { t } = useI18n()
const tableRef = useTemplateRef('tableRef')
const optButtons: OptButton[] = defaultOptButtons(['edit'])

const baTable = new baTableClass(
    new baTableApi('/admin/config.DepositChannel/'),
    {
        pk: 'code',
        filter: {
            page: 1,
            limit: 20,
        },
        defaultOrder: { prop: 'sort', order: 'asc' },
        extend: {
            registry: {} as Record<string, { name: string; name_en: string; sort: number }>,
        },
        column: [
            { type: 'selection', align: 'center', operator: false },
            {
                label: t('config.depositChannel.sort'),
                prop: 'sort',
                align: 'center',
                width: 88,
                operator: 'RANGE',
                sortable: 'custom',
            },
            {
                label: t('config.depositChannel.status'),
                prop: 'status',
                align: 'center',
                width: 100,
                operator: 'eq',
                sortable: false,
                render: 'switch',
                replaceValue: { 0: t('config.depositChannel.status_off'), 1: t('config.depositChannel.status_on') },
            },
            {
                label: t('config.depositChannel.code'),
                prop: 'code',
                align: 'center',
                minWidth: 120,
                operator: 'LIKE',
                operatorPlaceholder: t('Fuzzy query'),
            },
            {
                label: t('config.depositChannel.display_name'),
                prop: 'display_name',
                align: 'center',
                minWidth: 130,
                operator: 'LIKE',
                operatorPlaceholder: t('Fuzzy query'),
                showOverflowTooltip: true,
            },
            {
                label: t('Operate'),
                align: 'center',
                width: 90,
                render: 'buttons',
                buttons: optButtons,
                operator: false,
                fixed: 'right',
            },
        ],
        dblClickNotEditColumn: [undefined, 'status'],
    },
    {
        defaultItems: {
            code: '',
            sort: 10,
            status: 1,
        },
    },
    {},
    {
        getData({ res }) {
            const d = res.data as
                | {
                      registry?: Record<string, { name: string; name_en: string; sort: number }>
                  }
                | undefined
            if (d?.registry) {
                baTable.table.extend.registry = d.registry
            }
        },
    }
)

provide('baTable', baTable)

onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.getData()?.then(() => {
        baTable.initSort()
    })
})
</script>

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